Question

我尝试使用Chrome的内容脚本在页面上注入一个按钮，但按钮从未出现，我在控制台中没有出现任何错误。

我的manifest.json文件：

{
  "name": "Test",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Test",
  "default_locale": "en",
  "permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]
}

和我的inject.js文件：

document.addEventListener('DOMContentLoaded', function () {
    var buttonOnSite = document.getElementById("buttonOnSite");
    var button = document.createElement("button");
    var text = document.createTextNode("test");
    button.appendChild(text);
    buttonOnSite.appendChild(button);
});

我对上述代码的期望是，当我访问存在标识为buttonOnSite的按钮的网站时，会在其后创建一个新文本test的按钮。

但是当我使用按钮访问此站点时没有任何反应！肯定有一个ID为buttonOnSite的按钮（我已在这里更改了ID，因为它是一个很长的ID）。

我在控制台中没有收到任何错误消息，那有什么不对？它可能是显而易见的，但我无法看到它。任何帮助表示赞赏！

Answer 1

这是您需要的代码：

var buttonOnSite = document.getElementById("buttonOnSite"),
    parent = buttonOnSite.parentElement,
    next = buttonOnSite.nextSibling,
    button = document.createElement("button"),
    text = document.createTextNode("test");

button.appendChild(text);
if (next) parent.insertBefore(button, next);
else parent.appendChild(button);

Answer 2

默认情况下，内容脚本在加载DOM后运行。这意味着您在事件触发后添加事件侦听器，因此您的侦听器永远不会听到它。删除javascript的第一行和最后一行。

将按钮注入网站（Chrome扩展程序内容脚本）

2 个答案: