Question

I have a small chrome extension which I want to use to change text. It works just the way I want it to(clicking the icon changes text), but on some pages the existing jquery stops working when the app is enabled. What am I doing wrong?

Files: manifest.json, myscript.js and background.html

manifest.json content:

{
  "name": "My extension",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
    "matches": ["https://*/*"],
      "js": ["myscript.js"]
    }
  ],
"browser_action": {
    "default_icon": "icon.png"
    }
}

myscript.js content:

var array = {"not":" NOT ", "like":" LIKE ", "job":"JOBS"}

for (var val in array)
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp(val, "g"),     array[val]);

background.html content:

<script>
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null,
                       {file:"myscript.js"});
});
</script>

Answer 1

document.body.innerHTML is very bad.

When you use it, you’re treating DOM nodes as raw text. Those DOM nodes have event handlers and even a simple document.body.innerHTML+='...' will send the existing nodes to oblivion, creating new ones, without event handlers.

So instead, you need to iterate through all the text nodes in the document (*see here how) and do an innerHTML each one individually.

Sănătate!