javascript - 当用户单击工具栏中的扩展图标时，如何通过 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文件中。但这些代码不执行。我该如何解决这个问题？

背景.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

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

您需要使用内容脚本。空闲时页面加载后，内容脚本将被注入(inject)到页面中

从 documentation 获取更多信息

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

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

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

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

内容脚本.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()。这样只有在需要的时候才会调用

背景.js:

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