3

更新：「amno I am」からのガイダンスで、これを解決しました。最後に動作するコード。

現在、最初のChrome拡張機能に取り組んでいます。これは、表示されたWebページでテキストの置換を実行することを目的としています。私はDOMの操作に頭を悩ませようと努力してきましたが、最終的には次のことを思いつきました。理論的には、これはDOMテーブル全体を調べ、テキストノードを見つけてクローンを作成し、テキストを置き換え（該当する場合）、元のノードをクローンに置き換える必要があります。

これが私のmanifest.jsonです...

{
    "name": "My app",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Do thing.",
    "permissions": [
        "tabs", "http://*/"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*"],
            "js": ["myapp.js"],
            "run_at": "document_end"
        }
    ]
}

そしてmyapp.js;

function myapp() {
    var nodes = document.getElementsByTagName("*");
        for(var i = 0; i < nodes.length; i++) {
             if(nodes[i].type == "text") {
                  var parent = nodes[i].parentnode;
                  var newnode = nodes[i].cloneNode(true);
                  newnode.data.replace("test text","replacement test text");
                  parent.replaceChild(newnode, nodes[i]);
             };
        };
};
myapp();

拡張機能をインポートしてアクティブ化しました。Chromeのjavascriptコンソールは、以前はエラーを示していましたが、これは実行中であることを意味しますが、現在はエラーがないため、基本的なタイプミススタイルのエラーはありません。テキストノードを変更または交換する方法が間違っているか、マニフェストファイルまたはjsファイルの設定方法について基本的な誤解があると思いますが、どちらを見つけようとして壁にぶつかりました。

どんな助けでもありがたいです！

更新：これが作業バージョンです。

function myapp() {
    var nodes = document.getElementsByTagName("*");
    for(var i = 0; i < nodes.length; i++) {
         var subNodes = nodes[i].childNodes;
         for (var j = 0; j < subNodes.length; j++) {
            var node = subNodes[j];
            if (node.nodeType === 3) {
                if (node.data) {
                    node.data = node.data.replace(/test text/g,"replacement test text");
                }
            }
        }
    }
};
myapp();
4

1 に答える 1

3

DOMを変更しているため、反復に問題がある可能性もあります。これは、DOMの変更で更新されるnodes「ライブ」NodeListです。

同じインデックスでスワップを行っているように見えるので、これが問題であるかどうかはわかりませんが、わかりません。NodeListを配列に変換するか、逆に繰り返すことができます。

ただし、テキストノードのみを扱っているため、テキストノードはまったく必要ないように思われます.replaceChild。.dataテキストノードのを直接更新することができます。

.typeもう1つは、プロパティをチェックしているということです。これは、プロパティである可能性が高い場合.nodeTypeです...

if(nodes[i].nodeType == 3) {

またはnodeName...

if(nodes[i].nodeName == '#text') {

ああ、もう一つ。要素getElementsByTagName('*')のみをフェッチするため、を使用してテキストノードを取得することはできません。

そのようにする場合は、要素の子テキストノードを処理するコードを追加する必要があります。

function myapp() {
    var nodes = document.getElementsByTagName("*");
    for(var i = 0; i < nodes.length; i++) {
         var el = nodes[i];
         for (var j = 0; j < el.childNodes; j++) {
             var node = el.childNodes[j];
             if (node.nodeType === 3)
                 node.data = node.data.replace("test text","replacement test text");
         }
    }
};
于 2012-04-11T21:58:45.023 に答える