CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionmutation-observers
Nagendra Singh
Nagendra Singh

Reputation: 587

Mutation observer not able to listen attribute changes via chrome extension

There is a limitation in salesforce, that is why we are going for chrome extension to listen to data-tabid attribute changes in the dom.

I have created a chrome extension like this:

background.js

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function (mutations, observer) {

    mutations.forEach(function (mutation) {
        let attributeName1 = mutation.attributeName;
        console.log("Attribute name " + mutation.attributeName +
            " changed to " + mutation.target[attributeName1] +
            " (was " + mutation.oldValue + ")");
    });
});

observer.observe(document, {
    childList: true,
    attributes: true,
    subtree : true,
    attributeOldValue: true,
    attributeFilter: ['data-tabid']
});

Manifest.json

{
"manifest_version": 2,
"name": "Dom Browser Plugin",
"version": "1.0.0",
"description": "Project Requirement.",
"permissions": [
  "https://*/*",
  "http://*/*",
  "tabs"
],
"background": {
  "scripts": [
    "background.js"
  ],
  "persistent": true
}
}

For now in permissions I have given all, I will change this in future, but the observer is not able to catch the data-tabid changes which changes on refresh of the browser. I need to capture the new value and the old value of the data-tabid attribute which is embedded in the dom.

enter image description here

Full dom screen shot

enter image description here

Upvotes: 0

Views: 2156

Answers (1)

Andre Lopes
Andre Lopes

Reputation: 129

This happens bacause the background script doesn't receive the window object of the current tab window. MutationObserver object inside background script will refer to background page only. If you doesn't declared the background page in your manifest.json, it will be auto generated with a script tag pointing to the background script. So, MutationObserver will watch changes only at background page. You need a content script to watch changes at the current tab.

Upvotes: 1

Related Questions