Chrome扩展程序在X个下一个标签上运行Javascript [英] Chrome extension run Javascript on X next tabs
问题描述
我做了一个扩展，并且我不明白如何执行以下操作 -
根据特定文本，我的扩展程序当前打开了X个标签页。现在我想让它在每个打开的新选项卡中运行特定的脚本。
Manifest.json：
<$ p
name：Asaf Feedback Opener，
version：1，
manifest_version：2，
description：在当前页面打开任何查看项目，
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; （i = 0; i< links.length; i ++）
{
if（links [i] .innerHTML.startsWith（View Item））
b $ b {
numofview = numofview + 1;
window.open（links [i] .getAttribute（href），_blank）;
$ b现在，在上面的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扩展编码语言，我一直在用即兴创作来实现这一目标。
这两个脚本都可以工作分开，我不知道如何从这里前进。
解决方案
- 制作注入内容脚本通过将数据保留为文件中的最后一个表达式（请参见下面的代码），仅收集并返回到后台页面脚本的URL。它将在executeScript的回调参数中可用，该参数是选项卡中每个帧的结果数组，因此我们的数据位于其元素0（主框架0 =页面本身）内。
-
后台页面脚本将打开标签并使用executeScript将新的内容脚本插入到打开的标签中。如果您不知道哪些网站可能会被引用，那么这将需要manifest.json对已打开网站或所有网址的额外权限： c>permissions：[< all_urls>，tabs]
使用未使用扩展程序时自动卸载的活动页面。
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）;
}）;
}
函数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）;
}）;
}
函数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语法，默认情况下在现代浏览器中可用。
I'm making an extension and I can't understand how to do the following - My extensions currently open X amount of tabs, according to a specific text. Now I want it to run a specific script in every new tab it opens.
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"]
}
Now it runs the following code in the current page of clicking:
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");
}
}
Now, In the above JS It opens links in a new tab. I want the next code to run in every tab that the previous code had opened:
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()
}
}
I actually don't know JS or the chrome extensions coding language at all, I've been improvising with google to get this far.
Both scripts work in separate, I don't how to go forward from here.
- Make your injected content scripts only collect and return the URLs to the background page script by leaving the data as the last expression in the file (see the code below). It will be available in executeScript's callback parameter which is an array of results per each frame in a tab so our data is inside its element 0 (main frame is 0 = the page itself).
The background page script will open the tabs and use executeScript to inject the new content script into the opened tabs. This will require additional permissions in manifest.json for the opened sites or all URLs if you don't know which sites may be referred:
"permissions": ["<all_urls>", "tabs"]Use an event page that's automatically unloaded when your extension is not used.
"background" : { "scripts" : ["event.js"], "persistent": false },
event.js (previously background.js now renamed for clarity):
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 syntax is used, available in modern browsers by default.
这篇关于Chrome扩展程序在X个下一个标签上运行Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
