Search code examples
javascripthtmlgoogle-chromegoogle-chrome-extensioncontent-script

Chrome extension: How to append HTML to a newly created chrome tab?

I am trying to open a new tab from the background script background.js and have this new tab display some text I've obtained in the background script. I am using chrome.tabs.create({ url: "template.html" }); to create the new tab using the template.html file, which is just a blank HTML template:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Testing</title>
    </head>
    <body>
    </body>
</html>

In background.js, I have a variable called text which contains the text to add to the new tab page, but I'm not sure how to append it.

I thought it might work on execute a script on the new tab page to append the text, however when I try to run my script template.js on template.html using chrome.tabs.executeScript(tab.id, {file: 'template.js'});, I get the following error:

Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "chrome-extension://*/template.html". Extension manifest must request permission to access this host.

Since the new tab has the URL chrome-extensions://*/template.html which is inaccessible to the extension.

I am not sure how else to append text or HTML to the tab page. Any help on this appreciated. Thank you.

Solution

  • You can't use chrome.tabs.executeScript on a chrome-extension: page. The only valid schemes are http https file ftp.

    Anyway, you don't need to. You can simply include the file you want to run in your html with a script tag. Just add the following to template.html:

    <script src="template.js"></script>

    Note that in extension pages such as this you have access to the full chrome.* APIs, so for instance you can use messaging to communicate between this page and the background page.