Inject HTML into a page from a content script

Question

I am building a Chrome Extension and I have a requirement to overlay a blob of html on top of a few websites. At the moment I am using a JQuery `.Get` to pull the html from my server. In order to improve performance I am wondering if it is possible to include the html as a file in the extension directory and access the source directly from there? Does anyone know if this is possible? UPDATE Rob's suggestion does the job (see accepted answer). The only additional step is to register the file in the manifest under web_accessible_resources. ``` { ... "web_accessible_resources": [ "myimportfile1.html", "myimportfile2.html" ], ... } ```

Accepted Answer

Yes, that's possible. Use `chrome.runtime.getURL` to get an absolute URL for the resource. For example:

Step 1 (standard JavaScript):

```
fetch(chrome.runtime.getURL('/template.html')).then(r => r.text()).then(html => {
  document.body.insertAdjacentHTML('beforeend', html);
  // not using innerHTML as it would break js event listeners of the page
});
```

Step 1 (jQuery):

```
$.get(chrome.runtime.getURL('/template.html'), function(data) {
    $(data).appendTo('body');
    // Or if you're using jQuery 1.8+:
    // $($.parseHTML(data)).appendTo('body');
});
```

Step 2:

Register the resource in the manifest.json under web_accessible_resources:

```
  "web_accessible_resources": [
    "template.html",
    "foo.jpg"
  ]
```

Inject HTML into a page from a content script

Solution

Problem

Related problems