Loading Extra Files In Chrome Extensions

Many times when building chrome extensions, we’ve often found ourselves in situations where we have to add extra html to the web page. One way is to add the html on directly in the content_script js file, but I personally prefer not mixing up html and js in the same file. Also depending on the amount of html needed, it’s just be better to create a new html file for that purpose and then find a way to bring it into the content script.

To do this, first we need to create the file and then add it to our manifest file as a web accessible resource. This allows the file to be usable in the context of a web page.

"web_accessible_resources": [
    "newfile.html"
]

Next if the file uses extra javascript or css files, we can add those in the content_script tag of our manifest file. This allows the css/js file be loaded as well so they can work on in the context of web pages and have access to the DOM as well.

"content_scripts": [
    {
      "matches": [{...}],
      "js": [
        "jquery-3.1.1.min.js",
        "content-script.js"
      ],
      "css": [
        "styles.css",
      ]
    }
]

Now that we have our manifest file all setup properly, next is to append the page when an action such as a click of a button happens.

// content-script.js
$('body').on('click', '#add_page', function(e) {
    e.preventDefault();
    $.get(chrome.extension.getURL('newfile.html'), function(html) {
        $('body').append(html);
    });
});

From the above, chrome.extension.getURL loads the file by converting the relative path within the extension install directory to a fully-qualified URL. JQuery’s $.get loads the file and we append it to the web page’s body.

Thats all. I hope this helps.