2

I'm writing a Chrome Extension that changes some words in a webpage to others. This is what I have and I'm not getting any words to change and no console errors.

myscript.js

var text = $(this).text();
var mapObj = {
   is:"tests",
   a:"AAAAAAAA",
   the:"testing"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
$(this).text(text.replace(re, function(matched){
    return mapObj[matched.toLowerCase()];
}));

manifest.json

{
  "manifest_version": 2,

  "name": "example",
  "description": "bla",
  "version": "1.0",

 /* "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },*/
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js":["js/jquery-3.1.1.js", "myscript.js"],
      "run_at": "document_end"

    }
  ],
  "permissions": [
    "activeTab",
    "<all_urls>"
  ]
}

I followed this guys answer but it's not changing the words for me. What am I doing wrong?

UPDATE I have tried this: 

$(this).text(text.replace(new RegExp("the", "g"), "test"));

and it works. and this: 

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("the", "g"), "hunter");

and it works. So it obviously has something to do with this (and not any other file or permission. Correct?):

var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
$(this).text(text.replace(re, function(matched){
    return mapObj[matched.toLowerCase()];
}));

In the end I want to loop through each word and test if it needs to be changed, and if so change it. Please let me know if there is a better way.

Community
  • 1
  • 1
now_world
  • 940
  • 7
  • 21
  • 56
  • @IvánNokonoko good eye, I just had the SE question marked wrong. The file is correctly named myscript.js. – now_world Jan 25 '17 at 17:34
  • try changing `"permissions": [ ... ]` with `"permissions: ["activeTab"]"`. You already declare `content_scripts > matches > ""`. Hope it helps! – ramabarca Jan 25 '17 at 17:53
  • `this` equals to `window` object in your code which is not what you want. Actually the entire code is wrong because it destroys html structure. Look for correct examples that use createTreeWalker or document.evaluate to process html elements individually. – wOxxOm Jan 25 '17 at 17:57
  • @wOxxOm I've gotten `$(this).text(text.replace(new RegExp("the", "g"), "test"));` to work. why wouldn't it work with what I have now? – now_world Jan 25 '17 at 18:34
  • Like I said, if the posted code is your entire content script then `this` equals to `window` and its `text()` will be empty. Anyway, the approach you're using is wrong: it either destroys the entire html structure or (innerHTML case) the dynamically added event listeners, thus breaking many pages. – wOxxOm Jan 25 '17 at 18:38
  • @wOxxOm I've gotten `document.body.innerHTML.replace` to work, is that not correct either? – now_world Jan 25 '17 at 18:40
  • It's wrong because it breaks dynamically added event listeners. – wOxxOm Jan 25 '17 at 18:40
  • 1
    See the correct method using TreeWalker API: http://www.peterdebelak.com/blog/search-and-replace-text-with-javascript/ – wOxxOm Jan 25 '17 at 18:46
  • And an advanced example using MutationObserver: [How to change the HTML content as it's loading on the page](//stackoverflow.com/a/39334319) – wOxxOm Jan 25 '17 at 18:55
  • 1
    Related/near duplicates: [Change matching words in a webpage's text to buttons](//stackoverflow.com/q/40572679), [Highlight a word of text on the page using .replace()](//stackoverflow.com/q/40710728), [Replacing a lot of text in browser's addon](//stackoverflow.com/q/37562475), and [Replacing a lot of text in browser's addon](//stackoverflow.com/q/37562475) – Makyen Jan 25 '17 at 22:54
  • Possible duplicate of [Change matching words in a webpage's text to buttons](http://stackoverflow.com/questions/40572679/change-matching-words-in-a-webpages-text-to-buttons) – Makyen Jan 25 '17 at 22:56

1 Answers1

0

Found the answer by doing this: 

var html = document.querySelector('html');
var walker = document.createTreeWalker(html, NodeFilter.SHOW_TEXT);
var node;


    var oneArray= ["the"];
    var twoArray= ["bob"];
    var one;
    var two;


while (node = walker.nextNode()) {
    for (i=0; i<engWords.length;i++) {

        one= new RegExp(oneArray[i],"g");
        two= twoArray[i];

        node.nodeValue = node.nodeValue.replace(one, two);

    }

}
now_world
  • 940
  • 7
  • 21
  • 56