javascript - 将按钮注入(inject)站点(Chrome 扩展内容脚本)

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);
});

我对上述代码的期望是，当我访问一个带有 id 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);