Search code examples
javascriptiframegoogle-chrome-extensionfirefox-addon-webextensionscontent-script

Firefox/Chrome Web Extension - Security Error When Trying To Inject IFrame Through Content Script

I have the following really simple code in a content script that runs whenever a button in my "popup.html" file is pressed:

Section of code inside "inject.js"

browser.runtime.onMessage.addListener((message) => {
    console.log("Trying to inject iFrame");
    var iframe = document.createElement("iframe");
    iframe.src = browser.extension.getURL("inject.html");
    document.body.appendChild(iframe);
});

The content of "inject.html" is:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <p>
        Hello. This is a Test.
    </p>
</body>

</html>

However, when this code runs I get the following output in the console (Using "example.com: as an example URL):

Trying to inject iFrame
Security Error: Content at http://example.com/ may not load or link to moz-extension://218287b3-46eb-4cf6-a27f-45b9369c0cd9/inject.html.

Here is my "manifest.json"

{
"manifest_version": 2,
"name": "Summarizer",
"version": "1.0",

"description": "Summarizes webpages",

"permissions": [
    "activeTab",
    "tabs",
    "storage",
    "downloads",
    "*://*.smmry.com/*"
],

"icons":
{
    "48": "icons/border-48.png"
},

"browser_action":
{
    "browser_style": true,
    "default_popup": "popup/choose_length_page.html",
    "default_icon":
    {
        "16": "icons/summarizer-icon-16.png",
        "32": "icons/summarizer-icon-32.png"
    }
}

"web_accessible_resources": [
    "inject.html"
]
}

And, lastly, here is the top level file structure of my extension:

Extension_File_Structure

How can I fix this security error?

This is not a duplicate of this: Security error in Firefox WebExtension when trying getUrl image because I provided the full path in my manifest.json

Solution

  • I was missing a comma. Here is the relevant portion of the manifest.json with the comma in place:

    "browser_action":
{
    "browser_style": true,
    "default_popup": "popup/choose_length_page.html",
    "default_icon":
    {
        "16": "icons/summarizer-icon-16.png",
        "32": "icons/summarizer-icon-32.png"
    }
},

"web_accessible_resources": [
    "inject.html"
]