title: Why am I getting an error when I click chrome extension?
body: <p>I am trying to create a simple chrome extension. I was able to load the extension but when I clicked the extension icon next to the address bar I get an error : <code>Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.</code> Why?</p>
  <p>My <strong>manifest.json</strong> file :</p>
  <pre><code>{
      &quot;name&quot; : &quot;Test&quot;,
      &quot;version&quot; : &quot;0.1&quot;,
      &quot;permissions&quot; : [&quot;&lt;all_urls&gt;&quot;, &quot;tabs&quot;, &quot;activeTab&quot;],
      &quot;content_scripts&quot; : [
          {
              &quot;matches&quot; : [&quot;&lt;all_urls&gt;&quot;],
              &quot;js&quot; : [&quot;content.js&quot;]
          }
      ],
      &quot;background&quot; : {
          &quot;scripts&quot; : [&quot;background.js&quot;]
      },
      &quot;browser_action&quot; : {
          &quot;default_popup&quot; : &quot;popup.html&quot;
      },
      &quot;manifest_version&quot; : 2
  }
  </code></pre>
  <p><strong>popup.html :</strong></p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;popup.css&quot;&gt;
          &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;button&gt;Click&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>popup.js</strong></p>
  <pre><code>chrome.tabs.query({active : true, currentWindow : true}, (tabs)=&gt;{
      chrome.tabs.sendMessage(tabs[0].id, {action : &quot;button_click&quot;}, response =&gt;{
          console.log(response);
      })
  });
  </code></pre>
  <p><strong>content.js</strong></p>
  <pre><code>chrome.runtime.onMessage.addListener((request, sender, sendResponse)=&gt;{
      if(request.action === &quot;button_click&quot;){
          console.log(&quot;You clicked the button&quot;);
          sendResponse(&quot;success&quot;);
      }
  })
  </code></pre>
  <p><strong>popup.js</strong> is working fine because it is logging the response but <strong>content.js</strong> returns <code>undefined</code> response. <strong>background.js</strong> is still empty so I excluded it.
  This is my first time diving into chrome APIs so I'm really confused as to why it isn't working.</p>