Question

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

Answer 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

Answer 2

您需要内容脚本。

内容脚本是在Web上下文中运行的JavaScript文件   页面。通过使用标准文档对象模型（DOM），他们可以   阅读浏览器访问或更改的网页的详细信息   它们。

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


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

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

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

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

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

有关详细信息，请参阅this链接。实施

Answer 3

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

Chrome扩展程序Javascript仅在图标点击时运行

3 个答案: