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

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