Chrome 扩展 Javascript 仅在图标单击时运行答案

【问题标题】：Chrome extension Javascript running only on icon clickChrome 扩展 Javascript 仅在图标单击时运行
【发布时间】：2018-06-08 18:07:54
【问题描述】：

我希望我的 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 文件无需用户单击扩展图标即可执行。我错过了什么？

【问题讨论】：

在清单的content_scripts 条目中添加"run_at":"document_start"。
@IvánNokonoko 工作！

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

【解决方案1】：

您的清单有效，但 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

【讨论】：

【解决方案2】：

您需要内容脚本。

内容脚本是在网络环境中运行的 JavaScript 文件页。通过使用标准的文档对象模型 (DOM)，他们可以阅读浏览器访问的网页的详细信息，或更改他们。

以下是内容脚本可以执行的一些示例：

在网页中查找未链接的 URL 并将其转换为超链接

增加字体大小以使文本更清晰

在 DOM 中查找和处理微格式数据

如果您的内容脚本的代码应始终注入，请使用 content_scripts 字段将其注册到扩展清单中，如下例所示。

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

请参阅this 链接了解更多信息和实施。

【讨论】：

但是我已经在 manifest.json 中编写了 content_scripts。我做错了什么？
你能用你的文件内容更新问题吗？
用 popup.html 的内容更新了问题

【解决方案3】：

您可以使用在页面上下文中运行的内容脚本，这样您就可以知道用户何时访问特定网站：https://developer.chrome.com/extensions/content_scripts

【讨论】：

请举例说明
答案中提供的链接有一个例子吗？你想为你重写你的清单吗？
我已经用内容脚本编写了 mainfest.json。我在问我写的有什么问题