Run Scripts And Css Of Html File Fetched With Chrome.runtime.getURL()

I am building a chrome extension and would like to add the contents of an html file to the document when the browser action is activated. I can get the html added, but the css (or

Solution 1:

It appears that you have inputted the wrong path for your styles.css. Instead, It should have been:

<link rel="stylesheet" type="text/css" href="styles.css">

Since the location of your searchView.html is the same as styles.css.

I don't use jquery because it keeps us in the ground and dependent but your script here:

function addInitialView() {
    fetch(chrome.runtime.getURL('searchView.html')).then().then((response) => response.text())
    .then((html) => {
        $("body").prepend(html)
    })
}

It is prepending inside the body which theoretically still works but the code would have multiple headers and titles tag on a single page. Refine it if you must.

You are running your CSS using your content script, so you may also consider adding CSS in the "content_scripts" section in your manifest.json like this:

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["./node_modules/jquery/dist/jquery.min.js", "content.js"],
      "css":["style.css"]
    }
  ]

If your goal is to totally replace the entire content of a page. If not then you would have to make your style extremely unique with ids and classes.