L'estensione del mio browser modifica il DOM. Come posso impedire che interferisca con gli script di pagina?

Naviga le tue risposte
-1

Sto scrivendo un plugin per il browser WebExtensions che modificherà il DOM della pagina corrente quando l'utente preme un pulsante nella barra degli strumenti. Più specificamente, ho bisogno di inserire tag HTML nel DOM. Ancora più specificamente, ogni parola nella pagina deve essere racchiusa in un tag span.

In linea di principio non c'è modo di prevedere come questo potrebbe interferire con gli script di pagina. Ad esempio, se una pagina ha uno script che si basa sul numero di tag di estensione nella pagina 25, e quindi il mio script ne aggiunge altri 800, interromperò lo script di pagina.

Come posso aggirare questo problema? Ho pensato ad alcune alternative:

  1. "Blocca" la pagina. Quando l'utente preme un pulsante per attivare l'estensione, la pagina diventa essenzialmente HTML statico. La mia estensione non consentirà modifiche al DOM dagli script di pagina dopo l'esecuzione.

  2. Clona il DOM e sovrapponi il DOM clonato sulla vecchia pagina usando i livelli z. Inserisci il mio codice HTML nel clone e lascia che gli script di pagina agiscano sulla copia originale. Monitora la pagina originale per le modifiche DOM e le imita nel mio clone.

  3. Avvitali. L'estensione non funzionerà su pagine con script che si basano sul fatto che il DOM non ha gli elementi extra span in esso contenuti. Esegui dei test per assicurarti che ciò non accada sui siti web popolari.

Modificare la pagina DOM non è un comportamento oscuro per l'estensione. Quali sono le strategie generali per evitare conflitti disastrosi?

    
posta Jack M 11.01.2018 - 23:15
fonte

1 risposta

0

every word on the page needs to be wrapped in a span tag.

Inserisci il nuovo DOM come tag object . Ad esempio: 

var dom = new DOMParser();

var obj = document.createElement("object");

var foo = document.body.innerText.replace(/\s/g, "<span>");

var bar = dom.parseFromString(foo, "text/html");

console.log(bar);

obj.setAttribute("data", "data:text/html;charset=utf-8;," + foo);

document.body.appendChild(obj);

Riferimenti

risposta data 08.03.2018 - 05:23
fonte

Leggi altre domande sui tag

Dovremmo implementare la logica della macchina di stato vicino ai dati nel livello "persistence", o portare fuori i dati e implementarli nel layer "listener"? Come includere componenti con licenza BSD nel mio progetto