title: Chrome Extension gives two errors: Uncaught TypeError and Unchecked runtime.lastError
body: <p>I am facing two errors on Chrome extension that I am building:</p>
  <p>Error 1:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot set properties of null (setting 'onclick')
  Context
  _generated_background_page.html
  Stack Trace
  popup.js:3 (anonymous function)</p>
  </blockquote>
  <p>Error 2:</p>
  <blockquote>
  <p>Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
  Context
  _generated_background_page.html
  Stack Trace
  _generated_background_page.html:0 (anonymous function)</p>
  </blockquote>
  <p>I have already checked the questions on this site that address these two errors and I tried the solutions provided in them, but I am still facing the two errors.</p>
  <p>My original code:-</p>
  <p>popup.js (tried changing from <code>onclick</code> to <code>onClicked</code> for error 1, tried putting this code in <code>window.onload</code> for error 2)</p>
  <pre><code>let populateBtn = document.getElementById('populateBtn');
  let textArea = document.getElementById('productList');
  populateBtn.onclick = function(element) {
      let color = element.target.value;
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          if(!textArea.value) 
          {
              chrome.tabs.executeScript(
                  tabs[0].id,
                  {code: 'alert(&quot;Please, populate the order list!&quot;);'});
              return;
          }
          chrome.tabs.sendMessage(tabs[0].id, {data: textArea.value.replace(/\t/g,'').split(&quot;\n&quot;)}, function(response) {
          });
      });
  };
  </code></pre>
  <p>background.html (tried putting <code>&lt;script&gt;</code> after <code>&lt;/body&gt;</code> tag for error 1)</p>
  <pre><code>&lt;body&gt;
      &lt;p&gt;Gina's Bakery Bulk Order&lt;/p&gt;
      &lt;textarea id=&quot;productList&quot;&gt;&lt;/textarea&gt;
      &lt;button id=&quot;populateBtn&quot;&gt;Create Order&lt;/button&gt;
      &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>app.js (tried <code>chrome.runtime.connect</code> for error 2)</p>
  <pre><code>chrome.runtime.onInstalled.addListener(function() {
  });
  </code></pre>
  <p>inject.js (tried <code>chrome.runtime.onConnect.addListener</code> for error 2)</p>
  <pre><code>chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
      let failed = [];
      request.data.forEach(element =&gt; { // itterate over all products
          if(element.includes('-')){
              let data = element.split('-');
              let quantity = data[0].toLowerCase().replace(&quot;gb&quot;, &quot;&quot;).trim();
              let ID = data[1].trim();
              let elementName = 'pid_' + ID.replace(&quot;.&quot;, &quot;_&quot;);
              if(document.getElementsByName(elementName).length &gt; 0) 
                  document.getElementsByName(elementName)[0].value = quantity;
              else        
                  failed.push(&quot;&lt;td&gt;GB-&quot;+ ID +&quot;&lt;/td&gt;&lt;td&gt;&quot; + quantity + &quot;&lt;/td&gt;&quot;);
          }
       });   
      if(failed.length &gt; 0){
          //alert(&quot;Order unsuccessful! One or more products are not ordered: &quot; + failed.join(&quot;, &quot;));
          let modal = document.createElement(&quot;div&quot;);
          modal.setAttribute(&quot;id&quot;, &quot;failedOrderModal&quot;);
          modal.setAttribute(&quot;style&quot;, &quot;position:fixed;width:250px;left:50%;top:100px;background-color:#fff;border-radius:10px;padding:10px;z-index:10000;color:#000;border: 1px solid red;text-align:center;&quot;);
          let head = document.createElement(&quot;h2&quot;);
          head.innerText = &quot;Order unsuccessful! One or more products were not found!&quot;;
          modal.appendChild(head);
          let table = document.createElement(&quot;table&quot;);
          let tbody = document.createElement(&quot;tbody&quot;);
          table.appendChild(tbody);
          let tr = document.createElement(&quot;tr&quot;);
          tr.innerHTML = &quot;&lt;td&gt;ITEM&lt;/td&gt;&lt;td&gt;QTY&lt;/td&gt;&quot;;
          tbody.appendChild(tr);
          failed.forEach(failedItem =&gt; {
              tr = document.createElement(&quot;tr&quot;);
              tr.innerHTML = failedItem;
              tbody.appendChild(tr);
          });
          modal.appendChild(table);
          let closeBtn = document.createElement(&quot;button&quot;);
          closeBtn.setAttribute(&quot;type&quot;, &quot;button&quot;);
          closeBtn.innerText = &quot;Close&quot;;
          closeBtn.onclick = function(){
              document.getElementById(&quot;failedOrderModal&quot;).remove();
          }
          modal.appendChild(closeBtn);
          document.body.appendChild(modal);
      }
      else
      {
          alert(&quot;All products were successfuly populated!&quot;);  
      }   
      sendResponse({result: &quot;ok&quot;})
      return true;
  });
  </code></pre>
  <p>manifest.json</p>
  <pre><code>{
      &quot;name&quot;: &quot;Gina's Bakery Order&quot;,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;description&quot;: &quot;Helps automate orders from ginas-bakery.com.au&quot;,
      &quot;permissions&quot;: [&quot;activeTab&quot;, &quot;declarativeContent&quot;, &quot;storage&quot;],
      &quot;background&quot;: {
          &quot;scripts&quot;: [&quot;app.js&quot;, &quot;popup.js&quot;],
          &quot;persistent&quot;: false
        },
      &quot;icons&quot;: {
          &quot;16&quot;: &quot;images/ginas-bakery_16.png&quot;,
          &quot;32&quot;: &quot;images/ginas-bakery_32.png&quot;,
          &quot;48&quot;: &quot;images/ginas-bakery_48.png&quot;,
          &quot;128&quot;: &quot;images/ginas-bakery_128.png&quot;
        },
      &quot;browser_action&quot;: {
          &quot;default_popup&quot;: &quot;background.html&quot;
        },
        &quot;content_scripts&quot;: [
          {
              &quot;matches&quot;: [&quot;*://www.ginas-bakery.com.au/order/&quot;],
              &quot;js&quot;: [&quot;inject.js&quot;]
          }
      ],
      &quot;manifest_version&quot;: 2
  }
  </code></pre>
  <p>None of the above mentioned solutions worked.</p>