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

Question

我想用扩展修改网站的内容，有<ul>和<il>标记（在<div>中），我想在<ul>中添加另一个<il>元素。知道吗？

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