Chrome extension not working on specific websites

[Kushal Shah]

My chrome extension which looks for a phone number on a webpage is not working. Essentially, i expect an icon to appear besides the number. It works on other websites, but not on say google.com search results page. E.g.: https://www.google.com/#q=macy's%20redmond Do you know why?

Here is my code.

reverphonescript.js:

var hostname = document.location.hostname;
if (hostname.indexOf('whitepages')== -1)
{
     // Initiate recursion 
     wpReversePhoneLookup(document.body); 
     function wpReversePhoneLookup(elem) { // elem must be an element node
         var nodes = elem.childNodes
           , i = nodes.length
           , regexp = /([\(]|)\d*([\+)]|)\d*[-\.\(\ ][0-9][0-9][0-9][-\s\.\)]*(([0-9][0-9][0-9][-\s\.][0-9][0-9][0-9][0-9])|([ ][1-9][0-9][0-9][0-9][0-9][0-9][0-9])|[1-9][0-9][0-9][0-9][0-9][0-9][0-9])]*/gi
           , node, phoneNode, a, result;
         while (node = nodes[--i]) {
             if (node.nodeType === 1) {
                 // Skip anchor tags, nested anchors make no sense
                 //if (node.nodeName.toUpperCase() !== 'A')
                    wpReversePhoneLookup(node);
             } else if (node.nodeType === 3) {
                 //   Please note that the regexp has NO global flag,
                 //    and that `node.textContent` shrinks when an address is found
                 while (result = regexp.exec(node.textContent)) { 
                     //console.log(result);
                     node = node.splitText(result.index); 
                     node = node.splitText(result[0].length); 
                     phoneNode = node.previousSibling
                     //console.log(phoneNode)
                      var link = "https://pro.lookup.whitepages.com/phones?number=" + result[0]; 
                      var imgURL = chrome.extension.getURL("images/rsz_wp_16.png");  
                      var img = new Image();
                      img.src = imgURL;
                      img.className = "wpChromeExtensionImg";
                      img.onclick = function() {
                        window.open( link ,"_blank" ,"width=1000, height=650");
                     };  
                     document.getElementsByClassName("wpChromeExtensionImg").src = imgURL; 
                     //Create link
                     wpLink = document.createElement('a');
                     wpLink.href = '#';   
                     //Append phoneNode
                     wpLink.appendChild(img)  
                     var refNode = phoneNode; 
                     refNode.parentNode.insertBefore(wpLink, refNode.nextSibling); 
                 }
             }
         }
     }
}

And manifest.json:

{   // Required
 "manifest_version": 2,
 "name": "XP",
 "version": "1.0",
 "description": "XP Reverse Phone Lookup. ",
 "icons": { "128": "images/rsz_xp_128.png"
},

"web_accessible_resources": [
    "images/*.png", 
    "js/reversePhoneScript.js" 
  ],
  "browser_action": {
  "default_icon": {
    "19": "images/rsz_wp_19.png"
  },
  "default_title": "XP Reverse Phone Lookup"
},
  "permissions": [
  "tabs", "http://*/*", "https://*/*"
],
 "content_scripts" : [
  {
    "matches" : ["http://*/*", "https://*/*"],
    "js" : ["js/reversePhoneScript.js"],
    "run_at" : "document_idle", //document_end
    "all_frames" : false
  }
]
}

Any help will be much appreciated.

Thanks, Kushal.

[Alexandre Barreira]

Maybe because the page content is populated through AJAX? What happens if you wrap up your initial call on a setTimeout 5000?

[Shawn Kanyer]

Alexandre is right.  You should set up a mutation observer and run the code when the DOM tree changes.

[Kushal Shah]

I see. Is there a good Mutuation Observer chrome extension sample I can look at? Quick Google search didn't yield anything. Appreciate all the effort.

[Alexandre Barreira]

Not a chrome extension sample, but a nice lib on top of the MutationObserver API: https://code.google.com/p/mutation-summary/

[Kushal Shah]

Hi -

Sorry for slow progress. I tried the following:

var target = document.querySelector('body');

// create an observer instance

var observer = new MutationObserver(function(mutations) {

                mutations.forEach(function(mutation) {

                                console.log(mutation.type);

                                console.log(mutation);                           

                                if (mutation.type === 'childList') {

                                  wpReversePhoneLookup(mutation.target);

                               }

                });

  });

// configuration of the observer:

var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options

observer.observe(target, config);

The result is on pages like google.com where we have a lot of AJAX loading, our icon appears multiple times till the entire page finishes loading. How can we avoid that?

Thanks,

Kushal.