Question

所以这是我的问题：我（尝试）开发了一个Web扩展程序：

打开带有按钮的面板
单击按钮后，将在浏览器中打开一个新标签页
在这个新标签上，通过扩展脚本，我遍历了urls数组并更新了浏览器的新标签。在每个URL上，我都会向内容脚本传递一条消息，以在页面上的“ a”元素下抓取标题。抓取后，内容脚本将文本标题发送到扩展脚本。

这是我的脚本：

背景脚本background.js：

    chrome.browserAction.onClicked.addListener(function (tab) {
        var tabUrl = tab.url;
        originalWindowId = tab.windowId;
        var popupURL = chrome.runtime.getURL("extension/main_panel.html");
        chrome.windows.create({
            url: popupURL,
            type: 'panel',
            width: 600,
            height: 520
        }, function (window) {
            extensionWindowId = window.id;
        });
    });

主面板main_panel.html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="../background/jquery.js"></script>
</head>
<body>
    <div class="title" id="main_title">
        <p>EXTRACTIFY</p>
    </div>
    <button type="button" id="scrap_button">SCRAP</button>    
    <script src="functions/scrap.js"></script>
    <script src="functions/main_panel.js"></script>
</body>
</html>

主面板脚本（从main_panel.html检索按钮）main_panel.js：

var urls = ["https://forum.openstreetmap.fr/viewtopic.php?f=3&t=6811&start=0", "https://forum.openstreetmap.fr/viewtopic.php?f=3&t=6811&start=25"];
var scrapButton = document.getElementById("scrap_button");
scrapButton.addEventListener("click", function (event) {
    chrome.tabs.create({
        url: "about:newtab"
    }, function (newTab) {
        var newTabId = newTab.id;
        console.log("created newTab : " + newTabId);
        for (var i = 0; i < urls.length; i++) {
            chrome.tabs.update(newTabId, {
                url: urls[i]
            });
            chrome.tabs.onUpdated.addListener(function (newTabId , info) {
              if (info.status === 'complete') {
                var port = chrome.tabs.connect(newTabId, {
                    name: "scrap"
                });
                port.postMessage({
                    type: "title"
                });
                port.onMessage.addListener(function (msg) {
                    console.log("recieved message : " + msg.title);
                });
              }
            });
        }
    });
});

内容脚本scrapContent.js：

chrome.runtime.onConnect.addListener(function (port) {
    console.assert(port.name == "scrap");
    port.onMessage.addListener(function (msg) {
        console.log("recieved message : " + msg.type); 
        if (msg.type == "title") {
            var title = $("h3.first a").text();
            port.postMessage({
                title: title
            });
        }
    });
});

该脚本实际执行的操作：成功抓取第二个URL并将我想要的信息传输到扩展脚本。但这是报废第一页。因此，我怀疑存在（-a）同步问题。

非常感谢您的帮助！

从扩展脚本导航到多个URL，并将消息传递到每个URL上的内容脚本

0 个答案: