chrome 扩展中的浏览器事件侦听器无法正常工作

Question

我试图在单击工具栏（右上角）中的扩展程序图标时执行一个函数。我在 background.js 文件中添加了 chrome.browserAction.onClicked.addListener，但它不起作用。请帮助我。

最终，我的目标是通过我在 iframe 标记中使用的 http://localhost:3000 中的 HTML 元素设置不同的图标。（检查 localhost:3000 -> 设置图标中是否有特定元素）

我遵循的参考： https://developer.chrome.com/extensions/samples#search:a%20browser%20action%20which%20changes%20its%20icon%20when%20clicked

我的代码在下面。

manifest.json

{
  "name": "test",
  "version": "1.0",
  "description": "test",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "permissions": [
    "storage"
  ],
  "browser_action": {
    "default_title": "test",
    "default_popup": "popup.html"
  }
}

background.js

chrome.browserAction.onClicked.addListener(() => {
  console.log('test for browser action');
});

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <iframe src="http://localhost:3000" width="400" height="600"></iframe>
  <script src="./background.js" charset="UTF-8"></script>
</body>

</html>

Answer 1

在 manifest.json 中指定 default_popup 将禁用 chrome.browserAction.onClicked 事件。

解决方案：只需将代码放入 popup.js 并像加载任何其他脚本一样将其加载到 popup.html.

popup.html

  <script src=popup.js></script>
</body>
</html>

popup.js

console.log('This will run every time the popup is opened');

要检查弹出窗口及其控制台，right-click 在弹出窗口内，然后单击“检查”。

请注意，您不需要后台脚本。后台脚本在隐藏的后台页面中运行，因此绝不能在其他任何地方使用。从 popup.html.

中删除

P.S。你用错了 reference extension。通过 Ctrl-F 使用 built-in 浏览器搜索搜索 popup.html（不是页面上的搜索输入）。

chrome 扩展中的浏览器事件侦听器无法正常工作

browser event listener in chrome extensions is not working

html

javascript

css

google-chrome-extension