Question

我正在尝试制作一个Chrome扩展程序，用于创建一个包含本地＆＃39; blanksite.html＆＃39;并注入一些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": "This extension opens a Green Google tab.",
  "version": "1.0",

  "background":{
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs",
    "activeTab"
  ]
}

这将打开＆＃34; blanksite.html＆＃34; （在字面上是一个空的html文件）在新选项卡中，但不会将选项卡变为绿色。

我已经在Chrome extension: create tab then inject content script into it阅读了其他答案，所以我知道为什么这不起作用（无法直接将代码注入chrome：//扩展页面）;但我无法让其他答案上的解决方案适合我。是否有一个清晰，完整的小代码可以使我想做的工作？

我担心我不能很好地理解消息，因此对于任何具有该消息的解决方案，我们将非常感谢更全面的解释。

Answer 1

不确定为什么启动从后台页面传递到blanksite.html的消息不会成功（也许在blanksite.html中创建消息时为时已晚？）。

但是，从blanksite.html开始传递消息并在响应中执行相应的操作工作正常，请参阅以下示例代码：

blanksite.html

startsWith

blanksite.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="blanksite.js"></script>
</body>
</html>

background.js

chrome.runtime.sendMessage({src: "newtab"}, function(response) {
    if(response.action === 'changeColor') {
        document.body.style.backgroundColor = 'green';
    }
});

将Javascript注入Chrome扩展程序中的新创建的选项卡

1 个答案: