Question

我正在尝试编写一个后台脚本，以打开一个新标签页，在其中执行内容脚本。后台调用内容脚本中的“ method_1”，该脚本从网站获取到子域的链接，并将其报告给后台脚本。后台脚本使用链接更新选项卡，并在内容脚本中调用“ method_2”，该脚本试图访问更新后的选项卡上的元素。

一切正常，直到选项卡更新为止。更新选项卡后，内容脚本似乎无法访问DOM。我可以访问那些首次加载时已存在的元素，但不能访问那些在更新选项卡后已更改的元素。即使我将2种方法拆分为单独的内容脚本，其中一种在选项卡更新之前执行，而另一种在选项卡更新之后执行，仍然无法访问新的DOM元素。

尽管进行了数小时的搜索，阅读了文档以及无数次尝试失败，但我不知道如何使扩展程序浏览网站。

代码（我选择iana.org作为示例，因此您可以自己尝试代码）：

manifest.json

{
    "description": "extension",
    "manifest_version": 2,
    "name": "extension",
    "version": "1.0",

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

    "permissions": [
        "*://*.iana.org/*",
        "activeTab",
        "tabs",
        "tabCapture"
    ],

    "browser_action": {}
}

background.js

chrome.browserAction.onClicked.addListener(function () {
    chrome.tabs.create({url: "https://www.iana.org", active: true}, function(tab) {
        chrome.tabs.executeScript(tab.id, {file: "content.js"}, (res) => {
            chrome.tabs.sendMessage(tab.id, {msg: "method_1"}, function (res) {
                // res.url is a sudomain of iana.org
                chrome.tabs.update(tab.id, {url: res.url}, (tab) => {
                    chrome.tabs.sendMessage(tab.id, {msg: "method_2"}, function (res) {
                        console.log("res.text: " + res);
                    });
                });
            });
        });
    });
});

content.js

chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
    let url;
    if(req.msg === "method_1") {
        url = document.querySelector("#home-panel-domains > h2 > a").href;
        sendResponse({url: url});
    }
    if(req.msg === "method_2") {
        // this is where the code fails because the element is not accessible
        url = document.querySelector("#main_right > h1").textContent;
        sendResponse({text: url});
    }
});

非常感谢您的帮助或提示。

如何浏览带有扩展名的网站

0 个答案: