Заменить текст на веб-сайте расширением скрипта содержимого 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"
    }
  ]
}

, а javascript в myscript.js:

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

Однако это не работает .. и я не могу найти способ отладки сценария содержимого, только background.html

Answer 1

Я взял пример из JavaNut13 и Мэтта Кертиса, чтобы создать расширение псевдонима псевдонима для Reddit, и обновил его для нового манифеста 2. Он ищет пользователя в Reddit с именем «user1» и заменяет его на «никто». Изменить, как вам нужно.

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: (Убедитесь, что у вас есть правильный тег включения)

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

Answer 3

Замена / изменение текста в 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);

Answer 4

Используйте DOM и измените data соответствующих Text узлов. Э.Г.

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

Answer 5

var matchText = function(node, regex, callback, excludeElements) { 

    excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas', 'a']);
    console.log("Node name " + node.nodeName);
    var child = node.firstChild;

    while (child) 
    {
        switch (child.nodeType) 
        {
        case 1:
            if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
                break;
            matchText(child, regex, callback, excludeElements);
            break;
        case 3:
            var bk = 0;
            child.data.replace(regex, function(all) 
            {
                var args = [].slice.call(arguments),
                    offset = args[args.length - 2],
                    newTextNode = child.splitText(offset+bk), tag;
                bk -= child.data.length + all.length;

                newTextNode.data = newTextNode.data.substr(all.length);
                tag = callback.apply(window, [child].concat(args));
                child.parentNode.insertBefore(tag, newTextNode);
                child = newTextNode;
            });
            regex.lastIndex = 0;
            break;
        }
        child = child.nextSibling;
    }

    return node;
};

matchText(document.body, new RegExp("(?:(?:\\+|0{0,2})91(\\s*[\\- ]\\s*)?|[0 ]?)?[789]\\d{9}|(\\d[ -]?){10}\\d", "g"), function(node, match, offset) {
    var newAnchor = document.createElement("a");
    newAnchor.className = "search-term";
    //newAnchor.textContent = match;
    newAnchor.href = "tel:" + match.replace( /(\s|-)/g, "");
    newAnchor.innerHTML = '<img src =' + chrome.extension.getURL("call_icon_10x10.png")+'> ' + match;
    return newAnchor;
});