javascript - 如何使用 chrome 扩展修改站点元素

Question

我想修改带有扩展名的站点的内容，有<ul>和<il>标签，（在 a 内<div>），我想<il>在<ul>. 任何想法？

Answer 1

您可以将 JS 注入带有 Chrome 扩展程序的站点。例如，使用 jQuery，您可以执行以下操作：

$("div > ul").append("<li>This is a new list element.</li>");

这会将“新列表元素”附加到ul元素。

2013.02.06 更新：

取自Chrome 扩展文档。清单文件将包含以下内容（其中“...”表示省略）：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.the-site-your-targeting.com/*"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

并且myscript.js将包含以下内容：

(function () {
    // $("#theIdOfTheElement").append("<li>Foo bar baz</li>");
    // OR
    // $(".aSpecificClassName").append("<li>Foo bar baz</li>");
}())

阅读Chrome 开发者网站上的入门文章，了解有关创建扩展程序的整个过程如何工作的更深入信息。

Answer 2

没有 jQuery：

var ul = document.getElementsByTagName("div")[0].getElementsByTagName("ul")[0];
var newElement = document.createElement("li");
var textNode = document.createTextNode("New Element");
newElement.appendChild(textNode);
ul.appendChild(newElement);