使用Chrome内容脚本扩展程序替换网站中的文字

Question

我想创建Google Chrome扩展程序.它的工作是在所有网站上用另一个词替换一个词.

我有以下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

Answer 1

我从JavaNut13和Matt Curtis的示例中为Reddit创建了一个别名hider扩展,并为新清单2更新了它.它在Reddit上查找名为"user1"的用户并将其替换为"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");

Answer 2

我实际上是用jQuery编写的:(确保你有正确的include标签)

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

Answer 3

在这种规模的 DOM 中替换/更改文本不应该使用生硬的 HTML-regex 替换来完成，这是非常不安全的。您可能会在此过程中损坏 HTML。

您需要做的是遍历Node文档中的每个 TextNode ( )，修改其中的文本。

您的代码最终将看起来像这样：

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