我正在尝试制作一个 chrome 扩展,该扩展使用本地“blanksite.html”创建一个新选项卡,并注入(inject)一些 javascript 代码将其变成绿色。这是我到目前为止所拥有的。
背景.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"'
});
});
});
list .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"
]
}
这会在新选项卡中打开“blanksite.html”(字面意思是一个空的 html 文件),但不会将选项卡变成绿色。
我已阅读 Chrome extension: create tab then inject content script into it 上的其他答案,所以我知道为什么这不起作用(无法直接将代码注入(inject) chrome://extension 页面);但我无法使其他答案上发布的解决方案对我有用。是否有一段清晰、完整的小代码可以使我想做的事情发挥作用?
恐怕我不太了解消息传递,因此对于任何将其作为一个整体的解决方案,我们将不胜感激更全面的解释。
最佳答案
不知道为什么启动从后台页面传递消息到blanksite.html不会成功(也许在blanksite.html创建时监听消息已经太晚了?)。
但是,从blanksite.html开始消息传递并在响应中执行相应的操作效果很好,请参阅以下示例代码:
空白网站.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="blanksite.js"></script>
</body>
</html>
空白站点.js
chrome.runtime.sendMessage({src: "newtab"}, function(response) {
if(response.action === 'changeColor') {
document.body.style.backgroundColor = 'green';
}
});
背景.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'});
}
});
关于javascript - 将 Javascript 注入(inject) Chrome 扩展中新创建的选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38057056/