javascript - 将 Javascript 注入(inject) Chrome 扩展中新创建的选项卡

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

我正在尝试制作一个 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/

相关文章:

javascript - 仅使用 NUXT.js 生成静态 html

javascript - 如何删除mongodb数组中的元素

javascript - AspTokenInput 启用和禁用

jquery - 如何让 onclick 执行两个功能 : show description and show video or picture

javascript - 使用 JavaScript 的带背景图像的径向光标

python - Selenium Python 按文本/样式单击页面上的链接

javascript - 从 API 更新 Html JavaScript 表单 URL

html - 当我在上面添加白色时,CSS 使文本消失

javascript - Javascript 不适用于 chrome 上的元素 id,但适用于名称(在 Edge 上效果很好)

javascript - 将图像的主色设置为子 div - jquery.fillcolor.js