Chrome扩展程序无法在特定网站上运行

时间:2014-06-19 19:29:25

标签: javascript google-chrome google-chrome-extension

我在网页上查找电话号码的Chrome扩展程序无效。基本上,我希望除了数字之外还会出现一个图标。它适用于其他网站,但不是google.com搜索结果页面。例如:https://www.google.com/#q=macy的%20redmond你知道为什么吗?

这是我的代码。

reverphonescript.js:

var hostname = document.location.hostname;
if (hostname.indexOf('xp')== -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); 
                 }
             }
         }
     }
}

并且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
  }
]
}

非常感谢任何帮助。

谢谢, Kushal。

1 个答案:

答案 0 :(得分:0)

使用chrome“inspect”工具在页面中找到您的图标。使用ctrl-f在页面中找到您的图标。 https://developer.chrome.com/devtools/index

某些css可能会将您的图标移动到屏幕的最左侧,或者很简单,没有z-index标记应用于您的图标,因此它可能隐藏在其他内容之后。 http://www.w3schools.com/CSSref/pr_pos_z-index.asp