title: Chrome Extension - Sending event message back to the original tab
body: <p>I'm making a Chrome-Extension in which <code>content.js</code> sends an event to the <code>bacground.js</code> which requests a URL from the server. The URL received is sent back to content.js which is browsed <strong>ON THE TAB REQUESTED FROM</strong>. For eg:- If Tab1 has requested, the URL should be browsed on the same tab, not another.</p>
  
  <p>Here's my content and background.js</p>
  
  <p><strong>Content.js</strong></p>
  
  <pre><code>// sending details to `background.js`.
  message = {
      'event_type': 'Event1',
  }
  chrome.runtime.sendMessage(message);
  
  // listening to `background.js` response.
  chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
          if(request.event_type === 'Event1Response') {
              window.location.href = request.data.url;
          }
      }
  );
  </code></pre>
  
  <p><strong>Background.js</strong></p>
  
  <pre><code>chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse){
          if(request.event_type === 'Event1'){
              chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
                              message = {  //response from the server
                                  'event_type': 'Event1Response',
                                  'data': {
                                      'url': some_url
                                  }
                              }
                              // Sending response back to the `content.js`.
                              var activeTab = tabs[0];
                              chrome.tabs.sendMessage(activeTab.id, message);
                          }
                      }
                  }
              });
          }
      }
  );
  </code></pre>
  
  <p><strong>Manifest.json</strong></p>
  
  <pre><code>{
      "manifest_version": 2,
      "version": "0.1",
      "content_scripts": [{
          "matches": [
              "*://www.example.in/*",
          ],
          "js": ["js/content.js"],
          "run_at": "document_start"
      }, {
          "matches": [
              "*://www.example2.com/*"
          ],
          "js": ["js/content.js"],
          "run_at": "document_start"
      }],
      "background": {
          "scripts": ["js/background.js"],
          "persistent": false
      },
      "browser_action": {
          // "default_icon": "icon.png",
          "default_popup": "popup.html",
          "default_title": "Click here!"
      },
      "permissions": [
          "tabs"
      ]
  }
  </code></pre>
  
  <p>The problem that I'm facing is that the response is returned to the CURRENT active tab, instead of the actual tab where it is requested from. For eg:-</p>
  
  <p>1) Let's say I've 2 tabs T1 and T2. </p>
  
  <p>2) I'm in open state in T1 with <code>example.in</code>.</p>
  
  <p>3) Now I open <code>example2.in</code> on T2 and quickly switch to T1 tab.</p>
  
  <p>4) T1 will receive the response of server URL U1 and will browse to U1. Instead the response should have been received by T2, which should have browsed  U1. </p>
  
  <p>This is because I'm sending it to the current active tab in my <code>background.js</code>.</p>
  
  <p>How can I send the response to the actual tab where the request was initiated? I'm new to Chrome development. how can I rectify this?</p>
  
  <p>Do let me know if I'm not clear in any of the part.</p>