google chrome - 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"
    ],
    ...
}

Answer 1

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"
  ]