我正在尝试创建一个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页面);但是我无法使其他答案上发布的解决方案对我有用。是否有清晰,完整的小代码片段可以使我想要执行的工作?

恐怕我不太了解消息传递,因此对于将其作为一个整体的任何解决方案,将不胜感激。

最佳答案

不知道为什么启动从后台页面传递到blanksite.html的消息不会成功(也许在创建时听完Blanksite.html中的消息已经太晚了吗?)。

但是,启动从blanksite.html传递消息并在响应中执行相应的操作效果很好,请参见以下示例代码:

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

关于javascript - 将Javascript注入(inject)Chrome扩展程序的新创建的标签页中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38057056/

10-09 18:40