Inyectar la interfaz de usuario de la extensión de Chrome usando la sombra DOM

Soy muy nuevo en HTML y en el desarrollo completo del mundo web. Estoy tratando de crear una extensión de Chrome y he decidido mostrar la IU de la extensión al usuario inyectando un script de contenido cuando se hace clic en la acción del navegador. He creado una página HTML para mostrar la interfaz de usuario y ahora necesito cargar esta página HTML como un pequeño widget en algún lugar en la parte superior derecha de la página actual (para que aparezca como una ventana emergente). A partir de las diferentes cosas que he visto en Internet, he decidido utilizar el DOM de sombra, pero no tengo ni idea de cómo hacer todo esto. ¿Puede alguien ayudarme con un código de ejemplo para ayudarme a seguir adelante con esto? No puedo escribir un javascript que se usaría como secuencia de comandos de contenido para realizar el trabajo mencionado anteriormente.


Edición 1: Después de leer un poco más, descubrí que necesitamos crear la jerarquía de elementos utilizando javascript y no podemos usar directamente ninguna página HTML creada. ¿Es eso correcto? ¿Y si tenemos que hacer uso de javascript, deberíamos hacer llamadas a document.createElement y agregar elemento? o document.write?

Solo comstackndo la referencia de las respuestas que tengo en este hilo:


Mi 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); 

Para los scripts de contenido de la extensión de Chrome, solo podrá inyectar JavaScript / CSS. No podrá tener su propia página emergente de HTML como cuando usa browserAction .

Con JavaScript necesitará crear elementos dinámicamente e insertarlos en el DOM. Estás en el camino correcto. Puede usar document.createElement o una biblioteca como jQuery para ayudar con la manipulación de DOM a medida que se familiarice con el desarrollador web.