将按钮注入网站(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);
});

我对上述代码的期望是,当我进入buttonOnSite存在id的按钮的网站时,会出现一个新按钮,并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);