Chrome 扩展在 X 下一个标签上运行 Javascript

Question

我正在进行扩展，但我不明白如何执行以下操作 - 根据特定文本，我的扩展程序当前打开 X 数量的选项卡。现在我希望它在打开的每个新标签页中运行一个特定的脚本。

Manifest.json：

{
  "name": "Asaf Feedback Opener",
  "version": "1",
  "manifest_version" : 2,
  "description": "Opens any View Item on the current page",
  "background" : {
    "scripts" : ["background.js"]
  },
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": ["activeTab", "tabs"]
}

现在在点击的当前页面运行如下代码：

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "testScript.js"});
});

Javascript：

var links = document.getElementsByTagName("a");
numofview = 0;

for (i = 0; i < links.length; i++)
{
    if (links[i].innerHTML.startsWith("View Item"))
{
        numofview = numofview+1;
        window.open(links[i].getAttribute("href"), "_blank");
}
}

现在，在上面的 JS 中，它会在新标签页中打开链接。我希望下一个代码在上一个代码打开的每个选项卡中运行：

var soldlinks = document.getElementsByTagName("a");
for (i = 0; i < soldlinks.length; i++)
    {
    if (soldlinks[i].innerHTML.endsWith("sold"))
        {
        var soldlength = soldlinks[i].innerHTML.length
        var amount = soldlinks[i].innerHTML.substring(0,soldlength-5);
        if (Number(amount) >= 5)
            window.open(soldlinks[i].getAttribute("href"), "_self");
        else
            window.close()
            }
    }

我实际上根本不了解 JS 或 chrome 扩展编码语言，我一直在与谷歌即兴创作。

两个脚本分开工作，我不知道如何从这里开始。

Answer 1

1. 通过将数据保留为文件中的最后一个表达式（请参见下面的代码），使您注入的内容脚本仅收集 URL 并将其返回给后台页面脚本。它将在 executeScript 的回调参数中可用，该参数是选项卡中每个帧的结果数组，因此我们的数据位于其元素 0 内（主框架为 0 = 页面本身）。

2. 后台页面脚本将打开选项卡并使用 executeScript 将新内容脚本注入打开的选项卡。如果您不知道哪些网站可能被引用，这将需要 manifest.json 中打开的网站或所有 URL 的额外权限：

   "permissions": ["<all_urls>", "tabs"]
   

3. 使用event page，在不使用您的扩展程序时自动卸载。

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

event.js（为了清晰起见，以前的 background.js 现在重命名）：

chrome.browserAction.onClicked.addListener(collectViewItems);

function collectViewItems(tab) {
    chrome.tabs.executeScript(tab.id, {file: 'collect-view-items.js'}, results => {
        results[0].forEach(openViewItem);
    });
}

function openViewItem(url) {
    chrome.tabs.create({url, pinned: true, active: false}, collectSoldItems);
}

function collectSoldItems(tab) {
    chrome.tabs.executeScript(tab.id, {file: 'collect-sold-items.js'}, results => {
        chrome.tabs.remove(tab.id);
        results[0].forEach(openSoldItem);
    });
}

function openSoldItem(url) {
    chrome.tabs.create({url, active: false});
}

collect-view-items.js：

[...document.links]
    .filter(a => a.textContent.trim().startsWith('View Item'))
    .map(a => a.href);

collect-sold-items.js：

[...document.links]
    .filter(a => a.textContent.trim().endsWith('sold') && parseInt(a.textContent) >= 5)
    .map(a => a.href);

使用 ES2015 语法，现代浏览器默认可用。