javascript - Chrome拡張機能を使用してサイト要素を変更する方法

Question

拡張子が付いたサイトのコンテンツを変更したいのですが、（の中に）タグが<ul>あり、の中に別の要素を追加したいと思います。何か案が？<il><div><il><ul>

Answer 1

Chrome拡張機能を備えたサイトにJSを挿入できます。たとえば、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);