注入按钮到网站(Chrome扩展内容脚本)

Inject button into site (Chrome Extension content script)

本文关键字：脚本 扩展 Chrome 按钮 网站 注入      更新时间：2023-09-26

我试图使用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)。

我在控制台中没有得到错误消息，那么出了什么问题?可能很明显，但我就是看不出来。任何帮助都是感激的!

这是您需要的代码:

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

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

相关文章：