1

javascriptでreplace()を使用してページのDOM内を置き換える方法はありますか

置き換えたいソースコードで：

<div class="topbar">Bookmark Us</div>

に

<div class="topbar"><span class="larger-font">Bookmark Us</span></div>

Google Chrome 拡張機能がURLの一致する Web サイトにあり、上記のことを行う場合。

一致するすべてのページ:

http://www.domain.com/support.php

ありがとう。

4

2 に答える 2

2

Chrome がどのように拡張機能をトリガーするかはわかりませんが、ページ コンテンツの操作については説明できます。

topbarプレーンな JavaScript で divのすべての子コンテンツをラップするには:

var topbars= document.getElementsByClassName('topbar');
for (var i= topbars.length; i-->0;) {
    var span= document.createElement('span');
    span.className= 'larger-font';
    while (topbars[i].firstChild)
        span.appendChild(topbars[i].firstChild);
    topbars[i].appendChild(span);
}

(getElementsByClassName は比較的新しい API ですが、Chrome 3 でサポートされています。一致する要素ごとに、そのすべての子を新しいスパン要素に移動し、そのスパンを div 内に配置します。)

または、非常に大きなフレームワークを次の場所にドラッグすることを気にしない場合は、jQuery を使用します。

$('.topbar').each(function() {
    $(this).contents().wrapAll('<span class="larger-font"></span>');
});

次のようなものを使用して、HTML を文字列として操作できますが、

for (var i= topbars.length; i-->0;)
    topbars[i].innerHTML= '<span class="larger-font">'+topbars[i].innerHTML+'</span>';

JavaScript 参照、イベント リスナー、フォーム フィールド値などのシリアル化できないコンテンツを破棄するプロセスで、div のノード コンテンツ全体をシリアル化して再解析するため、これは一般的に避ける必要があります。

于 2010-05-06T20:46:06.170 に答える
1

必要なのはcontent scriptです。マニフェストで必要な URL でトリガーされるように設定し、Bobince のコードを使用して実際に操作を適用します。

于 2010-05-07T01:52:11.213 に答える