Question

我正在使用content scripts，我想在网页上注一个按钮。

这是我的manifest.json：

{
  "manifest_version": 2,
  "name": "my extension",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
      {
        "matches": ["http://127.0.0.1:8000/*"],
        "js": ["script.js"],
        "run_at": "document_end"
      }
  ]
}

这是popup.html：

<html>
  <body>
    <input type="button" id="button" style="display:none;">
  </body>
</html>

script.js：

document.body.style.backgroundColor = "yellow";
var button = document.getElementById("button");
button.style.visibility = "visible";

转到http://127.0.0.1:8000时，我看到背景更改为黄色，但它找不到按钮，因为它不属于我本地服务器所服务的网页的一部分。它显示了这个错误：

Uncaught TypeError: Cannot read property 'style' of null

我应该怎样做才能在http://127.0.0.1:8000的内容上点击按钮（假设我不知道其内容）？

Answer 1

要插入按钮，只需在内容脚本中创建并插入按钮，您无需（不应）在popup.html中声明它

的manifest.json

{
  "manifest_version": 2,
  "name": "my extension",
  "content_scripts": [
      {
        "matches": ["http://127.0.0.1:5000/*"],
        "js": ["script.js"]          
      }
  ]
}

的script.js

document.body.style.backgroundColor = "yellow";
var button = document.createElement("button");
document.body.appendChild(button);

Answer 2

您应在"run_at": "document_end"媒体资源中添加content_scripts

在document_end中，脚本文件将在DOM完成后注入。这样document就可以找到丢失的按钮：）

"content_scripts": [
      {
        "matches": ["http://127.0.0.1:5000/*"],
        "js": ["script.js"],
        "run_at": "document_end"
      }
  ]

如何使用Chrome扩展程序向网页注入按钮

2 个答案: