web-dev-qa-db-ja.com

ウェブサイトのテキストをChrome content script extensionに置き換えます

Google Chrome=拡張機能を作成します。その仕事は、すべてのWebサイトでWordを別のWordに置き換えることです。

次のmanifest.jsonファイルがあります。

{
  "name": "My extension",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["myscript.js"],
      "run_at": "document_end"
    }
  ]
}

myscript.jsのJavaScriptは次のとおりです。

< script type="text/javascript" >
    document.body.innerHTML = document.body.innerHTML.replace("uno", "dos");
< /script >

ただし、これは機能しません。コンテンツスクリプトをデバッグする方法が見つかりません。background.htmlのみです。

javascriptgoogle-chromereplacegoogle-chrome-extension
14
Will Richardson

JavaNut13とMatt Curtisの例を使用してRedditのエイリアスハイダー拡張機能を作成し、新しいマニフェスト2に合わせて更新しました。「user1」という名前のRedditでユーザーを探し、「nobody」に置き換えます。必要に応じて変更します。

manifest.json

{
  "name": "No Alias",
  "version": "0.1",
  "permissions": [
    "https://www.reddit.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.reddit.com/*"],
      "js": ["myscript.js"],
      "run_at": "document_end"
    }
  ],
  "manifest_version": 2
}

myscript.js

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("user1", "g"), "nobody");
15
Volomike

私は実際にこれをjQueryで書いています：（正しいインクルードタグがあることを確認してください）

var replaced = $("body").html().replace(/text/g,'replace');
$("body").html(replaced);
10
Will Richardson

このスケールでのDOM内のテキストの置換/変更は、非常に危険なHTMLの正規表現の置換では行わないでください。その過程でHTMLを破壊するリスクがあります。

ドキュメント内のすべてのTextNode（ Node ）をループし、テキスト内のテキストを変更する必要があります。

コードは次のようになります。

var replaceTextInNode = function(parentNode){
    for(var i = parentNode.childNodes.length-1; i >= 0; i--){
        var node = parentNode.childNodes[i];

        //  Make sure this is a text node

        if(node.nodeType == Element.TEXT_NODE){
            node.textContent = /* modify text here */
        } else if(node.nodeType == Element.ELEMENT_NODE){
            //  Check this node's child nodes for text nodes to act on

            replaceTextInNode(node);
        }
    }
};

replaceTextInNode(document.body);
3
mattsven

DOMを使用して、適切なdataノードのTextを変更します。例えば。

document.body.querySelector(".number").firstChild.data = "dos";
1
Eli Grey