Inietti l’interfaccia utente di estensione chrome utilizzando DOM ombra

Sono molto nuovo all’HTML e allo sviluppo del mondo web completo. Sto cercando di creare un’estensione di Chrome e ho deciso di mostrare l’interfaccia utente dell’interfaccia all’utente inserendo uno script di contenuto quando si fa clic sull’azione del browser. Ho creato una pagina HTML per l’interfaccia utente da mostrare e ora ho bisogno di caricare questa pagina HTML come un piccolo widget da qualche parte nella parte superiore destra della pagina corrente (per apparire come un popup). Dalle diverse cose cercate su internet, ho deciso di usare DOM ombra, ma non ho idea di come fare tutto questo. Qualcuno può aiutarmi con un codice di esempio per aiutarmi ad andare avanti con questo? Non sono in grado di scrivere un javascript che verrebbe utilizzato come script di contenuto per eseguire il suddetto lavoro.


Modifica 1: dopo qualche lettura in più, ho scoperto che è necessario creare la gerarchia degli elementi utilizzando javascript e non è ansible utilizzare direttamente una pagina HTML creata. È corretto? E se dobbiamo usare javascript, dovremmo usare le chiamate a document.createElement e aggiungere elemento? o document.write?

Basta compilare il riferimento delle risposte che ho ricevuto in questo thread:


My Background.js:

function hello() { chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () { chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" }); }); } // Supposed to Called when the user clicks on the browser action icon. chrome.browserAction.onClicked.addListener(hello); 

Per gli script di contenuto di estensioni di Chrome potrai solo inserire JavaScript / CSS. Non sarai in grado di avere la tua pagina popup HTML come quando utilizzi browserAction .

Con JavaScript dovrai creare dynamicmente gli elementi e inserirli nel DOM. Sei sulla strada giusta. È ansible utilizzare document.createElement o una libreria come jQuery per aiutare con la manipolazione DOM man mano che si acquisisce familiarità con Web Dev.