chrome.tabs.executeScript与新的浏览器选项卡不工作？ [英] chrome.tabs.executeScript with new browser tab not working?
问题描述
我试图制作一个Chrome扩展程序，该扩展程序在用户打开新选项卡时运行脚本。
我有以下基本代码，只要点击扩展按钮，就应该将页面涂成红色。
当我导航到一个实际的网站时（例如：在stackoverflow.com上点击我的扩展程序图标，页面变为红色），似乎工作正常。但是，如果我只是创建一个全新的选项卡并单击该按钮，弹出式窗口加载但页面不会更改颜色。
manifest.json： $ b
{
manifest_version：2，
name：ConsoleTap，
version：0.1.0，
browser_action：{
default_icon：icon.png，
default_popup：menu.html
}，
权限：[
标签，
< all_urls>，
https://ajax.googleapis.com/
]
}
menu.html：
< ;! doctype html>
< html>
< head>
< script src =menu.js>< / script>
< / head>
< body>
hello
< / body>
< / html>
menu.js：
document.addEventListener（'DOMContentLoaded'，function（）{
chrome.tabs.executeScript（null，{code：document.body.style.backgroundColor = 'red'}）;
}）;
关于为什么页面不会更新新选项卡上的背景颜色的任何想法？我估计> DOMContentLoaded 永远不会被触发，或者在负载发生之后侦听
Chrome在其内部网页上不允许使用内容脚本：更多信息
在Chrome 60或更旧版本中，仍然可以将内容脚本注入子框架的默认新标签页，因为它由多个框架组成，因此限制仅适用于顶层框架。对于默认的newtab（不是一些newtab扩展名），我们可以匹配它的框架url（ manifest.json： https://www.google.com/_/chrome/newtab* ）来注入一个内容脚本，一旦收到弹出消息，便会激活：
{
name：executeScript，
version：1.0，
content_scripts：[{
matches：[https://www.google.com/_/chrome/newtab*]，
js：[newtabcontent。 js]，
run_at：document_start
}]，
browser_action：{
default_icon：icon.png，
default_popup：popup.html
}，
permissions：[
activeTab
]，
manifest_version：2
}
newtabcontent.js：
< class =lang-js prettyprint-override> chrome.runtime.onMessage.addListener（function（msg）{
if（ msg ==activate）{
document.body.style.background ='red';
document.body.style.backgroundColor ='red';
}
}）;
popup.js：
chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
if（tabs [0] .url ==chrome：// newtab /）{
chrome.tabs.sendMessage（tabs [0] .id，activate）;
} else {
chrome.tabs.executeScript （{
code：document.body.style.backgroundColor ='red'，
allFrames：true
}）;
}
}）;
注意：
- 安装此扩展程序并显示其权限后，用户将看到它可以在www.google.com上阅读和更改您的数据。
-
chrome.tabs.executeScript无法在newtab页面上使用，因为由于不支持方案chrome：// ，甚至不会继续在子框架上执行。
I'm trying to make a Chrome extension which runs a script whenever the user opens a new tab.
I have the following basic code which is supposed to just paint the page red whenever the extension button is clicked.
It seems to work fine when I navigate to an actual website (ex: here on stackoverflow.com, click my extension icon, page becomes red). However, if I just create a brand new tab and click the button, the popup loads but the page never changes color.
manifest.json:
{
"manifest_version": 2,
"name": "ConsoleTap",
"version": "0.1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "menu.html"
},
"permissions": [
"tabs",
"<all_urls>",
"https://ajax.googleapis.com/"
]
}
menu.html:
<!doctype html>
<html>
<head>
<script src="menu.js"></script>
</head>
<body>
hello
</body>
</html>
menu.js:
document.addEventListener('DOMContentLoaded', function() {
chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"});
});
Any ideas on why the page won't update the background color on a new tab? I'm guessing the DOMContentLoaded is never fired or it's listening after the load occurs somehow?
Chrome doesn't allow content scripts on its internal pages: more info
In Chrome 60 and older it was still possible to inject content scripts into the child frames of the default new tab page because it consists of several frames so the restriction only applies to the top level frame. For the default newtab (not some newtab extension) we can match its frame url (https://www.google.com/_/chrome/newtab*) to inject a content script which will activate once a message from the popup is received:
manifest.json:
{ "name": "executeScript", "version": "1.0", "content_scripts": [{ "matches": ["https://www.google.com/_/chrome/newtab*"], "js": ["newtabcontent.js"], "run_at": "document_start" }], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ], "manifest_version": 2 }newtabcontent.js:
chrome.runtime.onMessage.addListener(function(msg) { if (msg == "activate") { document.body.style.background = 'red'; document.body.style.backgroundColor = 'red'; } });popup.js:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { if (tabs[0].url == "chrome://newtab/") { chrome.tabs.sendMessage(tabs[0].id, "activate"); } else { chrome.tabs.executeScript({ code: "document.body.style.backgroundColor='red'", allFrames: true }); } });
Notes:
- When this extension is installed and its permissions are displayed the user will see that it can "Read and change your data on www.google.com".
chrome.tabs.executeScriptcan't be used on newtab page because it instantly fails for the main frame due to unsupported schemechrome://and doesn't even proceed to execute on child frames.
这篇关于chrome.tabs.executeScript与新的浏览器选项卡不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
