在Chrome扩展程序中将JavaScript注入新创建的标签 [英] Injecting Javascript into Newly Created Tab in Chrome Extension
问题描述
我正在尝试制作一个扩展名为chrome的扩展程序，该扩展程序使用本地blanksite.html创建一个新选项卡，并注入一些将其变成绿色的JavaScript代码。这是我到目前为止。
background.js
chrome .browserAction.onClicked.addListener（function（activeTab）{
chrome.tabs.create（{'url'：chrome.extension.getURL（blanksite.html）}，function（tab）{
chrome.tabs.executeScript（tab.id，{
code：'document.body.style.backgroundColor =green'
}）;
}）;
}）;
manifest.json
{
manifest_version：2，
name：Open Green Google Tab，
description： Google标签。，
version：1.0，
background：{
scripts：[background.js]
} ，
browser_action：{
default_icon：icon.png
}，
权限：[
标签，
activeTab
}
这会打开blanksite .html（字面上是一个空html文件），但不会将标签变为绿色。
我已阅读 Chrome扩展：创建标签，然后将内容脚本注入，所以我知道为什么这不起作用（不能直接注入代码到Chrome：//扩展页面）;但我无法使其他答案上发布的解决方案适用于我。是否有一段清晰完整的小代码可以让我想做的工作成功？
恐怕我不能很好地理解消息，所以对于任何解决方案，作为一块，更全面的解释将不胜感激。
不知道为什么从后台传递消息页面blanksite.html将不会成功（可能是在创建时在blanksite.html中收听邮件太迟了）。然而，从blanksite.html开始传递消息，并在响应中执行相应的操作，请参阅以下示例代码：
blanksite.html
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title>文档< / title>
< / head>
< body>
< script src =blanksite.js>< / script>
< / body>
< / html>
blanksite.js
chrome.runtime.sendMessage（{src：newtab}，function（response）{
if（response.action ==='changeColor'）{
document.body。 style.backgroundColor ='green';
}
}）;
background.js
chrome.browserAction.onClicked.addListener（function（activeTab）{
chrome.tabs.create（{url：chrome.runtime.getURL（'newtab.html'）}）;
}）;
chrome.runtime.onMessage.addListener（function（request，sender，sendResponse）{
if（request.src ==='blanksite'）{
sendResponse（{action ：'changeColor'}）;
}
}）;
I am attempting to make a chrome extension that creates a new tab with a local 'blanksite.html' and injects some javascript code turning it green. Here's what I have so far.
background.js
chrome.browserAction.onClicked.addListener(function(activeTab){
chrome.tabs.create({'url': chrome.extension.getURL("blanksite.html") }, function(tab) {
chrome.tabs.executeScript(tab.id, {
code: 'document.body.style.backgroundColor="green"'
});
});
});
manifest.json
{
"manifest_version": 2,
"name": "Open Green Google Tab",
"description": "This extension opens a Green Google tab.",
"version": "1.0",
"background":{
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs",
"activeTab"
]
}
This opens "blanksite.html" (literally an empty html file) in a new tab, but does not turn the tab green.
I've read the other answers at Chrome extension: create tab then inject content script into it, so I know why this doesn't work (not able to directly inject code into chrome://extension pages); but I wasn't able to make the solutions posted on the other answers work for me. Is there a clear, full piece of small code that can make what I want to do work?
I'm afraid I do not understand messaging very well, so for any solution that has that as a piece, a more comprehensive explanation would be greatly appreciated.
Not sure why starting message passing from background page to blanksite.html won't succeed (maybe it's too late to listen to message in blanksite.html when it's created?).
However, starting message passing from blanksite.html and executing corresponding action in the response work well, see following sample code:
blanksite.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="blanksite.js"></script>
</body>
</html>
blanksite.js
chrome.runtime.sendMessage({src: "newtab"}, function(response) {
if(response.action === 'changeColor') {
document.body.style.backgroundColor = 'green';
}
});
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
chrome.tabs.create({url: chrome.runtime.getURL('newtab.html')});
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.src === 'blanksite') {
sendResponse({action: 'changeColor'});
}
});
这篇关于在Chrome扩展程序中将JavaScript注入新创建的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
