title: Transfer control from popup to content script - Google Chrome Extension
body: <p>PRINT SCREEN to understand my problem : <a href="http://www.scitechexplained.com/magazine/chromeproblem.JPG" rel="nofollow noreferrer">link</a></p>
  
  <p>I'm building an extension which inserts a button into a specific web page's DOM. This insertion is achieved by the <strong>injectScript()</strong> function from insert.js which is correctly executed and correctly entered in the <strong>"content_scripts"</strong>: field of the manifest file. </p>
  
  <p><strong>injectScript()</strong> injects (in the DOM of the currently loaded webpage, if it's, of course, the page I'm looking for) a script tag containing the same inject.js (that contains the onclick event for the button), a style tag containing the CSS for the button, and most importantly, a div that contains a text obtained from <strong>background.html</strong> by calling <strong>chrome.extension.sendRequest({greeting: "dami"}, function(response) {...});</strong> the text inserted in this div is used to populate some other div from the webpage by clicking on the button which I inserted. </p>
  
  <p>This works perfectly but I also need to solve another issue:</p>
  
  <p>The specific text which I inject into the webpage's DOM <strong>is injected only</strong> when <strong>chrome.tabs.onSelectionChanged</strong> , <strong>chrome.tabs.onUpdated</strong>, and <strong>chrome.history.onVisited</strong> events happen. I also want to <strong>re-inject</strong> this text whenever my <strong>popup.html modifies it by changing localStorage["builtin"]</strong>. So what I want is this: when I click the OK button from the popup.html page I want to use <strong>chrome.extension.sendRequest({greeting: "reintrodu"}, function(response) {...});</strong> from popup.html to send a request to the same content script that managed my first text injection, but it seems it doesn't work.</p>
  
  <p>Nothing happens when I click the button! the <em>test</em> alert boxes don't show anything. When I press the OK button the popup.html just closes and no exchange of data seems to happen.</p>
  
  <p>This is the function that is triggered by the OK button from my popup.html : </p>
  
  <pre><code>function closer() 
  {
      if ($('input[name=check]').is(':checked'))
      {
          localStorage["builtin"] = document.getElementById("tkey_1").value;
          localStorage["build"] = "true";
      }
      else 
      {
          localStorage["builtin"] = document.getElementById("tkey_1").value;
          localStorage["build"] = "false";            
      }
  
      chrome.extension.sendRequest({greeting: "reintrodu"}, function(response)
      {
          alert(response.farewell);
      });         
  
      window.close();
  }
  </code></pre>
  
  <p><strong>chrome.extension.sendRequest({greeting: "reintrodu"}, function(response) {...})</strong> should send the request to the content script that is <strong>inject.js</strong>:</p>
  
  <pre><code>chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
  //      console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
  if (request.greeting === "history")
   {
      console.log("registered in history");
      sendResponse({farewell: "goodbye from history"});
      PageShowHandler();
   }   
  else if (request.greeting === "historyrem")
   {
      console.log("registered in historyrem");
      sendResponse({farewell: "goodbye from historyrem"});
      PageShowHandler();
   }       
  else if (request.greeting === "exploit")
   { 
      console.log("registered in exploit");
      sendResponse({farewell: "goodbye from exploit"});
      PageShowHandler();
   }
  else if (request.greeting === "reintrodu") 
   { 
      console.log("registered in reintrodu");
      sendResponse({farewell: "goodbye from reintrodu"});
      //PageShowHandler();
      alert('prins reintrodu');
   }   
  else if (request.greeting === "selected")
   {
      console.log("registered in selected");
      sendResponse({farewell: "goodbye from selected"});
      PageShowHandler();
   }
  
  else
      sendResponse({}); // snub them.
  });
  </code></pre>
  
  <p>And this is <strong>background.html</strong> which seems do to the job for the initial injection, unlike popup.html :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  
  //Fired when a URL is visited, providing the HistoryItem data for that URL.
  chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo)
  {
      chrome.tabs.sendRequest(tabId, {greeting: "selected"}, function(response) {
          console.log(response.farewell);
      });
  });
  
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) 
  {
      chrome.tabs.sendRequest(tab.id, {greeting: "exploit"}, function(response) {
              console.log(response.farewell);
      });
  });
  
  chrome.history.onVisited.addListener(function(result)
  {
      //alert(result.url);
      //chrome.tabs.sendRequest(null, {greeting: "history"}, function(response) {
      //      console.log(response.farewell);
      //});
      chrome.windows.getCurrent(function(w) 
      {
          chrome.tabs.getSelected(w.id, function (tabul)
          {
              //alert(tabul.id);
              chrome.tabs.sendRequest(tabul.id, {greeting: "history"}, function(response) {
                      console.log(response.farewell);
              });
          });
      });     
  });
  
  
  chrome.history.onVisitRemoved.addListener(function(removed)
  {
      //alert(result.url);
      //chrome.tabs.sendRequest(null, {greeting: "historyrem function(response) {
      //      console.log(response.farewell);
      //});
      chrome.windows.getCurrent(function(w) 
      {
          chrome.tabs.getSelected(w.id, function (tabul)
          {
              //alert(tabul.id);
              chrome.tabs.sendRequest(tabul.id, {greeting: "historyrem"}, function(response) {
                      console.log(response.farewell);
              });
          });
      });     
  });
  
  chrome.extension.onRequest.addListener(function(request, sender, sendResponse) 
  {
      if(request.greeting == "dami")
      {
          if(localStorage["build"] == "true")
          {   
              sendResponse({farewell: localStorage["builtin"]});
          }
          else
          {
              sendResponse({farewell: "textul default"});
          }
      }
  
      else 
      {
          sendResponse({farewell: "n-am ba; du-te dracu!"});
      }
  });
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the manifest:</p>
  
  <pre><code>{
  "name" : "gMail Adder ",
  "version" : "1.0",
  "description" : "Google Chrome Gmail Adder",
  "options_page": "options.html",
  "background_page": "background.html",
  "run_at": "document_start",
  "permissions": [
     "tabs",
     "history",
     "http://*/*",
     "https://*/*"
  ],
  "content_scripts": [
    {
     "matches": ["*://*.google.mail.com/*", "https://*.google.mail.com/*"     ,"http://mail.google.com/*" ,"https://mail.google.com/*", "https://www.google.com/*", "http://www.google.com/*", "file:///*"],
     "css": ["toggle.css"],
     "js": ["jquery-1.4.4.min.js", "inject.js"]
    }
  ],
  "browser_action" : {
  "default_icon" : "Quest Icon 11.png",
  "default_popup": "popup.html"
  }
  }
  </code></pre>