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

question from:https://stackoverflow.com/questions/16334054/inject-html-into-a-page-from-a-content-script

Answer 1

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

Step 1:

$.get(chrome.extension.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 under web_accessible_resources: See https://developer.chrome.com/extensions/manifest#web_accessible_resources (Provided by @QFDev)

Update (10/04/2020)

chrome.extension.getURL is deprecated since Chrome 58. Use this instead chrome.runtime.getURL