Adding complex HTML using a Chrome content script

Question

I am working with Chrome extension\'s content script to create a complex display that is added on web pages.

I have first tested it directly integrated on a website,

Answer 1

I had the same issue, that my extension heavily relies on script templates

Here's what I did:

• create templates.html to store script templates in
• add templates.html to the web_accessible_resources as in the the above answer^^
• access templates.html from content.js with xhr and parse with jQuery

manifest.json

"web_accessible_resources": ["templates.html"]

templates.html

content.js

function getTemplates(){
    return new Promise(function(resolve){
        $.ajax({
            url: chrome.extension.getURL('/templates.html'),
            success: function(data) {
                var $templates = $('
').append($.parseHTML(data)).find('script'),
                    templates = {};
                $templates.each(function(){
                    templates[this.id] = this.innerHTML;
                });
                return resolve(templates);
            }
        });
    });
}
getTemplates().then(function(templates){
    console.log(templates.template1); //
template1
});