当用户单击工具栏中的扩展图标时，如何通过 webExtension 更改文档元素？

Question

我想创建一个 webExtension，我想在工具栏中为这个扩展添加图标。在我的 manifest.json 文件中，我输入了这段代码：

{
"manifest_version": 2,
"name": "test",
"version": "1.0",
"description": "test",
"icons": {
    "48": "icons/icon48.png",
    "96": "icons/icon96.png"
},
"background": {
    "scripts": ["background.js"]
},
"permissions": [
    "activeTab",
    "contextMenus"
],

"browser_action": {
    "default_icon": {
        "19": "button/btn19.png",
        "38": "button/btn38.png"
    },
    "default_title": "test"
}
}

当用户在工具栏中单击此扩展程序图标时，我想获取当前页面的元素并在文档中我想要的位置添加标记。我将这个 java 脚本代码放在 background.js 文件中。但是这些代码不执行。我该如何解决这个问题？

background.js :

function change() {
var elems = document.body.getElementsByTagName("*");  
var re = new RegExp(/abba\b/g);
for (var i = 0; i < elems.length; i++) {
    var str = elems[i].innerHTML;
    if (!str.match(/<[a-zA-Z0-9\s:./\"\'=\;()-_]*>/) && re.test(str)) {
        var aTag = document.createElement("a");
        aTag.setAttribute('href', "test.php?t=" + str.match(/abba\b/)[0]);
        aTag.setAttribute('target', "_blank");
        aTag.innerHTML = " --**CHANGES**-- ";
        elems[i].appendChild(aTag);
    }
}
}
browser.browserAction.onClicked.addListener(change);

Answer 1

后台页面无权访问网页内容。

您需要使用内容脚本。内容脚本在页面空闲时加载后注入页面

从 documentation

获取更多信息

要将内容脚本添加到您的扩展中，您可以将其添加到 manifest.json

"content_scripts": [{
    "matches": ["*://*/*"],
    "js": ["contentscript.js"]
 }]

然后将 background.js 重命名为 contentscript.js。这样代码总是在每个页面上执行。

或者只是创建 contentscript.js 并将内容 change() 函数移入其中

contentscript.js:

var elems = document.body.getElementsByTagName("*");  
var re = new RegExp(/abba\b/g);
for (var i = 0; i < elems.length; i++) {
    var str = elems[i].innerHTML;
    if (!str.match(/<[a-zA-Z0-9\s:./\"\'=\;()-_]*>/) && re.test(str)) {
        var aTag = document.createElement("a");
        aTag.setAttribute('href', "test.php?t=" + str.match(/abba\b/)[0]);
        aTag.setAttribute('target', "_blank");
        aTag.innerHTML = " --**CHANGES**-- ";
        elems[i].appendChild(aTag);
    }
}

然后 background.js 将在单击浏览器操作时调用 tabs.executeScript()。这样它只在必要时被调用

background.js:

browser.browserAction.onClicked.addListener(function(){ 
    browser.tabs.executeScript({file: "/contentscript.js"})
});

当用户单击工具栏中的扩展图标时，如何通过 webExtension 更改文档元素？

How can I change document elements by webExtension when user click on extension icon in toolbar?

javascript

firefox-addon-webextensions