I make an extension, in which clicking on its icon, the sidebar appears on the page (in the screenshot). This is now done in background-scripts. But I have problems with debugging, and I want to rewrite it all as a separate HTML template with my own styles and scripts. The question is how to insert such a template into a web page using the Chrome extension so that access to the DOM of the original page remains?

manifest.json:

{ "name": "TestAppExtension", "version": "0.0.1", "manifest_version": 2, "browser_action": { "default_title": "Test App" }, "background": { "scripts": ["app/background.js"] }, "permissions": ["activeTab"] }

enter image description here

  • 2
    background.js purpose in another, to create your template, create popup.html and connect your own files with JS styles - Arsen
  • @Arsen I just do not need popup.html, because it has too many restrictions in terms of styles. It is necessary that the content of the page narrowed to the left by 20% and the 20% occupied the sidebar, as on the screenshot. Just now this sidebar needs to be redone so that it connects as a separate html-file to the page on which the extension was launched and that it gets access to its DOM. - Vadim Spring
  • 2
    Popup.html is like an example, you can create any html file in which you insert your layout and styles, then through JS insert the contents of this html into the DOM page - Arsen

1 answer 1

Crash the HTML template in popup.html or options.html, or on any other page connected to the extension. Then take the contents of the template (yes at least document.children [0] .innerHTML, if necessary, along with) and stick the script in the sidebar. You will absolutely not give a damn about the limitations in terms of styles, because all elements will no longer be in popup.html, but in your sidebar.