title: Chrome extension event listener fires multiple of times
body: <p><strong>Introduction</strong></p>
  
  <p>I've got a problem with my extension for Chrome. It supposed to show a small overlay popup window (created in jQuery) with search results from Google based on your text selection. Basically you should be able to highlight a text on any page, right click on it (context menu), click on "Search for 'selected keyword'" and a small window pops up in the same tab as an overlay with all search results from Google.</p>
  
  <p><strong>The problem</strong></p>
  
  <p>It works as described, HOWEVER only for the first time. When I'll highlight another keyword and search for it, extension still REMEMBERS previous keywords and throws 2 windows at the same time. And if I would search for another keyword that would give me 3 windows with 2 previous searches and a new one...</p>
  
  <p>I've tried to remove listener in background script after it executes, but didn't work. It looks like the old listeners are there and they are replying for a request from content script. Can  I somehow remove them?</p>
  
  <p>I've tried to put:</p>
  
  <pre><code>chrome.extension.onConnect.removeListener(listener);
  </code></pre>
  
  <p>at the end of getClickHandler() function but doesn't work.</p>
  
  <p>I was also thinking that maybe this piece of code in background script is doing that, but not sure</p>
  
  <pre><code>return function(info, tab) {
  </code></pre>
  
  <p>Please, do you have any suggestions?</p>
  
  <p>Many thanks in advance!</p>
  
  <p>PS. This pop-up window cannot be closed at the moment and am aware of that. But you can always refresh the page to get a clean window. The problem is that the second time I will get 2 pop ups opened in the same time... and so on as described above.</p>
  
  <p>Manifest file:</p>
  
  <pre><code>{
    "name": "Easy search Accelerator",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Easily search for anything...",
    "icons": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    },
    "background": {
      "scripts": ["sample.js"]
    },
    "permissions": [
      "contextMenus",
      "tabs",
      "http://*/*",
      "https://*/*"
    ],
    "manifest_version": 2
  }
  </code></pre>
  
  <p>Background page / script (sample.js):</p>
  
  <pre><code>chrome.contextMenus.create({
      "title": 'Search for "%s"',
      "contexts":['selection'],
      "onclick": getClickHandler()
  });
  function getClickHandler() {
      return function(info, tab) {
  
      var url = "https://www.google.co.uk/search?q=" + info.selectionText;
  
      chrome.extension.onConnect.addListener(function listener(port) {
      console.assert(port.name == "searchQuery");
      port.onMessage.addListener(function(msg) {
          if (msg.keywordRequest == "Yes")
          port.postMessage({keyword: url});
      });
  });
  
      chrome.tabs.executeScript(null, { file: "jquery-1.7.2.min.js" }, function() {
      chrome.tabs.executeScript(null, { file: "frame.js" });
  
      });
    };
  };
  </code></pre>
  
  <p>Content script (frame.js)</p>
  
  <pre><code>var port = chrome.extension.connect({name: "searchQuery"});
  port.postMessage({keywordRequest: "Yes"});
  port.onMessage.addListener(function listen(msg) {
  
    var test = msg.keyword;
    $("body").append("&lt;div style=\"position: fixed;top: 20px;right: 20px;z-index: 9999;\"&gt;&lt;iframe style=\"border:1px solid #868686;-webkit-box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);\" src=\""+ test +"\" width=328 HEIGHT=240&gt;&lt;/iframe&gt;&lt;/div&gt;");
  });
  </code></pre>