WebExtensions getBackgroundPage Cannot Call Background Functions

When I try to call a function on the background script using getBackgroundPage in Firefox's WebExtensions, I get the error Error: Permission denied to access property "f1"

In the example below, data is retrieved every 10 seconds only when the checkbox in the browser pop-up is true.

Why do these errors occur?

Edit: Change to minimum, self-contained, and verifiable sample code

Edit 2:

Chrome54 seems to be able to run functions well using getBackgroundPage
Is it possibly a Firefox bug?

background-page.js:



function f1(){
    fetch("http://example.something.com/example").then(res)=>{
        res.text().then(text)=>console.log(text));
    });
}

function loop() {
    f1();
    if(getStorageValue("checked")}
        Get data every 10 seconds using setTimeout (loop, 10000); // setTimeout
    }
}

function getStorageValue(key){
    letretVal;
    chrome.storage.local.get(key,(result)=>{
        retVal=result [key];
    });
    return returnVal;
}

loop();

browser_action.js

let bgpage=chrome.extension.getBackgroundPage();
Get let checkbox= document.getElementById("checkbox"); // checkbox
let status = document.getElementById("status");
chrome.storage.local.get("checked", (result)=>{
    checkbox.checked=result.checked||true;// Reflects the checkbox value stored in storage
});


checkbox.onchange=(e)=>{
    Chrome.storage.local.set({"checked":checkbox.checked}); // Store checkbox state in storage
    if(checkbox.checked){
            status.textContent="ON";
            bgpage.loop();//Error: Permission denied to access property "f1"
    }
    else{
        status.textContent="OFF";
    }
}

default_popup.html:


<!DOCTYPE html>
<html>
    <head>
        <metacharset="utf-8">
    </head>
    <body>
        <label class="switch">
            <span id="status">OFF</span>
            <input id="check" type="checkbox">
        </label>
        <script src="browser_action.js"></script>
    </body>
</html>

manifest.json:


{
    "manifest_version"—2,
    "version": "1.0",
    "name": "My Extension",

    "background": {
        "scripts": ["background-page.js" ]
    },

    "permissions": [
        "*://example.something.com/example/*",
        "webRequest",
        "alarms",
        "notifications",
        "storage"
    ],

    "browser_action": {
        "default_icon": {
            "19": "icons/icon-19.png",
            "38": "icons/icon-38.png"
        },
        "default_title": "my popup",
        "default_popup": "popup/default_popup.html"
    }
}

javascript firefox firefox-webextension

2022-09-30 19:03

1 Answers

The problem was not reproduced with the code below.
(I don't know if calling the background function directly from popup is the right way to do it.)
Please refer to the minimum, self-contained, and verifiable sample code writing and include reproducible code in your questions.

popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="UTF-8">
    <title> </title>
    <style>
* {color:white;background-color:gray;}
    </style>
</head>
<body>
    <h1>Try Firefox WebExtension</h1>
    <pid="message_elm">/p>
    <script src="popup.js"></script>
</body>
</html>

popup.js

chrome.runtime.getBackgroundPage(bg_win)=>{
    console.log("bg_win.url:",bg_win.url);
    bg_win.fetch_page(message_elm);
});

background.js

var url="http://example.com/";
function fetch_page(elm){
    fetch(url).then(res=>res.text()) .then(text=>elm.textContent=text);
}

manifest.json

{

    "manifest_version"—2,
    "name": "Try_ex",
    "version": "1.0",

    "description": "Try Firefox WebExtension",

    "icons": {
        "48": "icon_48.png"
    },

    "background": {
        "scripts": ["background.js" ]
    },

    "browser_action": {
        "default_icon": {
            "48": "icon_48.png"
        },
        "default_title": "Try Firefox WebExtension",
            "default_popup": "popup.html"
    },

    "permissions": ["*://example.com/*" ]
}

2022-09-30 19:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656