title: Pass array variable from background.js to content.js
body: <p>I am really struggling with passing an array from my background.js to my content.js. Before I start, I will list my scripts.</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
  "manifest_version": 2,
  
  "name": "Tab Highlighter",
  "description": "Highlight already open tabs in a google search query",
  "version": "1.0",
  "content_scripts":[
  {
    "matches": [ "http://www.google.com/*", "https://www.google.com/*", "https://*/*", "http://*/*" ],
    "js": ["content.js"],
    "run_at": "document_end"
  }
  
  ],
  "background": {
      "persistent": false,
      "scripts": ["background.js"]
   },
   "permissions":[ "tabs" ]
  }
  </code></pre>
  
  <p><strong>content.js</strong></p>
  
  <pre><code>chrome.runtime.sendMessage({data: "getTabs"}, function(response) {
  var tabs = response.data;
      if(!tabs) {
          console.log("No Tabs could be found!!");
      }
      else {
          console.log("TABS FOUND");
          console.log(tabs);
          for(var k = 0; k &lt; tabs.length; k++) {
              console.log(tabs[k]);   
          }
          var links = document.getElementsByTagName("a");
          for(var i = 0; i &lt; links.length; i++) {
              var link = links[i];
              var real_href = link.getAttribute("href");
              if(real_href) {
                  //console.log(real_href);
  
                  for(var j = 0; j &lt; tabs.length; j++) {
                      if(i == 0) {
                          console.log("tab open: ", tabs[j]);
                      }
                      if(real_href == tabs[j]) {
                          console.log("duplicate found: ", real_href);
                          link.innerHTML = "Already Open";
                      }
                  }
              }
          }
          console.log("End printing tabs");
      }
  });
  </code></pre>
  
  <p><strong>background.js</strong></p>
  
  <pre><code>chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
  if(request.data === "getTabs"){
  var fourmTabs = new Array();
  chrome.tabs.query({}, 
          function(t) {
              for (var i = 0; i &lt; t.length; i++) {
                  fourmTabs[i] = t[i].url;
              }
              // Moved code inside the callback handler
              for (var i = 0; i &lt; fourmTabs.length; i++) {
                  if (fourmTabs[i] != null)
                      console.log(fourmTabs[i]);
                  else {
                      console.log("??" + i);
                  }
              }
          }
      );
  
      if(!fourmTabs) {
          console.log("Tabs could not be generated!!");
      }
      else {
          for(i = 0; i &lt; fourmTabs.length; i++) {
              console.log(fourmTabs[i]);
          }
      }
      sendResponse({data: fourmTabs});
      //return true;    used to see if this was asynchronous or not
  }
  });
  </code></pre>
  
  <p><strong>UPDATED background.js</strong></p>
  
  <pre><code>chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
  if(request.data === "getTabs"){
  var fourmTabs = new Array();
  chrome.tabs.query({}, 
          function(t) {
              for (var i = 0; i &lt; t.length; i++) {
                  fourmTabs[i] = t[i].url;
              }
              // Moved code inside the callback handler
              for (var i = 0; i &lt; fourmTabs.length; i++) {
                  if (fourmTabs[i] != null)
                      console.log(fourmTabs[i]);
                  else {
                      console.log("??" + i);
                  }
              }
              if(!fourmTabs) {
                  console.log("Tabs could not be generated!!");
              }
              else {
                  for(i = 0; i &lt; fourmTabs.length; i++) {
                      console.log("fourmtabs is here: ", fourmTabs[i]);
                  }
              }
              sendResponse({data: fourmTabs});
          }
      );
  }
  });
  </code></pre>
  
  <p>Currently, What gets printed from content.js is just an empty array, I believe. It shows up as "[ ]" (no quotes). Whenever I change sendReponse in background.js to <code>{data: "Test"}</code> then content.js prints out what I expect, Test, and then each letter. Hopefully, everything is here, I have been trying multiple things to get this to work. I'll be up for another hour, so if I don't respond, I will be back on tomorrow. Thanks for any help!</p>
  
  <p>The way I see it in my head is this. The page loads, and when it is done loading, it runs content.js. content.js sends a message to background.js, and gets its response (the array I am having trouble with). Then, all the links are gotten from the page and it is checked to see if any of the hrefs on the page are equal to any pages open in another tab. I would then like to change the style of this link to be a different color or something to indicate it was already open. I plan on this only working on google searches, which I think I would do by getting rid of the last two elements in the "matches" part of the manifest.json.</p>
  
  <p>Another quick edit: I was attempting to follow <a href="https://stackoverflow.com/questions/11688171/after-calling-chrome-tabs-query-the-results-are-not-available">this kind of question</a> however, I got stuck on send the array from background.js to content.js</p>
  
  <p>Please let me know if you need any more information.</p>