javascript - Chrome 扩展 Javascript 仅在图标单击时运行

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

我希望我的 Chrome 扩展程序在用户访问网站时加载 Javascript。但目前,只有当用户单击扩展程序图标并直到扩展程序弹出窗口打开时才会执行 Javascript。

我在这个Chrome extension to load the script without clicking on icon中看到了答案问题。

我的manifest.json是:

{
  "manifest_version": 2,

  "name": "Javascript example",
  "description": "Some description.",
  "version": "1.1",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["popup.js"]
    }
  ]
}

popup.js 是:

document.addEventListener('DOMContentLoaded', () => {

  alert("Working");
});

popup.html 是:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

仅当我单击扩展程序图标时(即运行 popup.html 时)才会显示警报对话框,而不是在加载页面时显示。我希望 popup.js 文件无需用户单击扩展图标即可执行。我错过了什么?

最佳答案

您的 list 有效,但 run_at 默认为 document_idle,这意味着 DOMContentLoaded 已触发。可以通过将 run_at 指定为 document_start 来解决此问题。

{
  "manifest_version": 2,

  "name": "Javascript example",
  "description": "Some description.",
  "version": "1.1",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "run_at": "document_start",
      "js": ["popup.js"]
    }
  ]
}

来源:https://developer.chrome.com/extensions/content_scripts

关于javascript - Chrome 扩展 Javascript 仅在图标单击时运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48003307/

相关文章:

javascript - 如何选择多个输入字段并删除所需的属性?

javascript - AngularJS 中的 DOM 未更新

printing - 在没有打印对话框的情况下从 Chrome 打印?也许使用 Greasemonkey 用户脚本?

javascript - Chrome 扩展程序可更改首选项文件中的值

javascript - 如何直接在 Chrome 中编辑源文件?(刷新后保留)

javascript - grunt.task.run() 不工作

javascript - 如何使用 Leaflet Routing Machine 和 Mapzen 获取行人路线?

javascript - 使用 React-Router-Dom 在 React 中传递路由参数

html - 使用 CSS 对按钮进行“单击”动画效果

javascript - javascript中的验证表单,单独点击输入