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

【问题标题】：Injecting Javascript into Newly Created Tab in Chrome Extension在 Chrome 扩展程序中将 Javascript 注入到新创建的选项卡中
【发布时间】：2016-06-27 14:50:23
【问题描述】：

我正在尝试制作一个 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": "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 的其他答案，所以我知道为什么这不起作用（无法直接将代码注入 chrome://extension 页面）；但是我无法使其他答案上发布的解决方案对我有用。有没有清晰完整的小代码可以让我想做的事情发挥作用？

恐怕我不太了解消息传递，因此对于任何包含该消息的解决方案，将不胜感激更全面的解释。

【问题讨论】：

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

不知道为什么启动消息从后台页面传递到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>

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'});
    }
});

【讨论】：

太棒了！但是我必须在监听器上添加一个延迟才能完成这项工作 - 否则它仍然没有做任何事情。