Chrome Extension - how to monitor page mutations

Question

Solution:

The most efficient method: (April 2014)

Is there a JavaScript / jQuery DOM change listener?

I'm working on a chrome extension that checks the content of your google search and alters the page accordingly. It does this by checking if a specific element ID exists in the current tab.

For example when the user searches: "define love", an element ID called "uid_0" is created.

My problem is that once the user opens the Google home page the function that checks for the existence of a specific element ID is executed and never again.

What listener would be appropriate to get this working for all Google subpages?

Here is my code: JSON FILE:

{
  "manifest_version": 2,

  "name": "YES",
  "description": "YES",
  "version": "1.0",

  "permissions": [
    "tabs",
    "webNavigation", 
    "*://*/*" 
  ],
  
  "content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"],
        "all_frames": true
    }
  ]
}

Content script:

var element =  document.getElementById('uid_0');
    if (typeof(element) != 'undefined' && element != null)
    {
        document.body.style.background = 'yellow';
    }
    else
    {
        document.body.style.background = 'red';
    }

If this code was working the page should be yellow.

REd page

pseudocode solution:

chrome.runtime.**ONSOMETHING**.addListener( function() { 
var element =  document.getElementById('uid_0');
    if (typeof(element) != 'undefined' && element != null)
    {
        document.body.style.background = 'yellow';
    }
    else
    {
        document.body.style.background = 'red';
    }});

Your problem is that Google isn't reloading the page, it's asynchronously re-rendering it. I don't think you'll be able to listen for an event that does this, since it's their specific implementation. You can do this by listening for page events though, try looking into MutationObserver to check for DOM changes. — Brian, Jul 12 '15 at 16:55
Brian you are a genius. A DOM Mutation Observer is exactly what i needed. — Msegling, Jul 12 '15 at 17:59

Chrome Extension - how to monitor page mutations

Solution:

Here is my code: JSON FILE:

Content script:

If this code was working the page should be yellow.

pseudocode solution:

0 Answers0