Chrome Extension : Access DOM after chrome.tabs.update

问题

My aim is to search for a div by id if it exists in all languages my site supports.

manifest.json

{
"manifest_version": 2,

"name": "Hello World!",
"description": "This extension is to check if link is not visible when it should not :)",
"version": "1.0",

 "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
 },

"content_scripts": [ {
    "js": [ "jquery-1.11.1.min.js"],
    "matches": [ "http://*/*", "https://*/*"]
}],

  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
]

 }

popup.html -

 <html>
 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 <style>

   table{background:#CCC;border:1px solid #000;}
   table td{padding:15px;border:1px solid #DDD;}
 </style>
 <body>
 <input type="hidden" id="currentLink"/>
 <hr />

    Checking ...

  <div id="dynamictable"></div>
   <script type="text/javascript" src="currentUrl.js"></script>
  </body>
  </html>

currentUrl.js -

    chrome.tabs.getSelected(null, function(tab) {
      var currentTab = (tab.url);


      var languages = [ "en", "fr" ];  
      $('#dynamictable').append('<table></table>');
     var table = $('#dynamictable').children();    

     var i;
     for (i = 0; i < locales.length; ++i) {

       chrome.tabs.update(tab.id, {active:true, url:  currentTab + "?languageParam=" + languages[i]});



var query = document.querySelector("div#header");

    if (query) {
         alert("This page has a friendly div");
     }

    table.append("<tr><td>" + languages[i] + "</td><td>"  + "</td></tr>");
    }

   });

In above query is not coming. How can I parse the DOM after chrome.tabs.update ?

回答1:

Have you tried using a callback?
The api defines the function as chrome.tabs.update(integer tabId, object updateProperties, function callback).

Perhaps you could change

chrome.tabs.update(tab.id, {active:true, url:  currentTab + "?languageParam=" + languages[i]});

for

chrome.tabs.update(
    tab.id,
    {active:true, url:  currentTab + "?languageParam=" + languages[i]},
    function() { // this is the callback you may want to use.
        var query = document.querySelector("div#header");
        if (query) {
            alert("This page has a friendly div");
        }
    }
);

This may not work as-is, but I hope the idea is clear.

来源：https://stackoverflow.com/questions/23463220/chrome-extension-access-dom-after-chrome-tabs-update

标签

google-chrome

google-chrome-extension