Chrome 扩展：在浏览器操作中，创建一个弹出窗口并执行脚本答案

【问题标题】：Chrome Extension: On browser action, create a pop up and execute a scriptChrome 扩展：在浏览器操作中，创建一个弹出窗口并执行脚本
【发布时间】：2014-11-02 05:15:14
【问题描述】：

我正在构建一个 Chrome 扩展程序，并希望在用户单击 Chrome 中的浏览器操作图标时显示一个弹出窗口并运行脚本。

我可以通过将 '"default_popup": "popup.html"' 放入 manifest.json 来触发弹出窗口。但是，当我这样做时，background.js 似乎没有运行。当我删除 '"default_popup": "popup.html"' 时，background.js 似乎运行了。

如何让弹出窗口出现并运行脚本？

manifest.json

{
  "manifest_version": 2,

  "name": "Typo Blaster",
  "description": "Blast away typos and make the internet a safer place for the kids.",
  "version": "0.1",

  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Blast the typo!",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" }
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Typo Blaster</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>

    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Got it!</h1>
  </body>
</html>

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' red!');
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="red"'
  });
});

alert('hello ' + document.location.href);

【问题讨论】：

你说的是background.js，但popup.html链接到popup.js。你试过用那个吗？

标签： javascript html json google-chrome-extension

【解决方案1】：

试试这个，

    chrome.browserAction.onClicked.addListener((tabs) => {
        chrome.tabs.executeScript(null,{file:"popup.js"})
    })

现在当用户点击浏览器动作图标时，将执行文件 popup.js

【讨论】：

【解决方案2】：

当您有一个弹出页面时，您不能使用onClicked 方法。 Google docs.

onClicked：单击浏览器操作图标时触发。此事件不会触发如果浏览器操作有弹出窗口。

如果您想同时保留两者，请考虑写一个content script。

【讨论】：

感谢您的解释和链接。我感觉合理。我将改用内容脚本。
注意：this 是另一种可能的解决方案。您将保留后台脚本和弹出窗口。