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. 使注入的内容脚本仅通过将数据作为文件中的最后一个表达式（请参见下面的代码）收集并返回到后台页面脚本。它将在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}); 
} 

收集 - 视图 - items.js：

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

收集出售，items.js：

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

ES2015语法使用，在现代浏览器默认选项。