title: Can not use variables from background-script inside the popup-script after using getBackgroundpage()
body: <p>I am new to chrome extensions.
  I want to program a timer that alerts the user every 40 minutes and tells him to drink a cup of water, but I ran in some issues.</p>
  <p>After some googling I learned that I have to use the background-script to calculate the time and somehow pass it to the popup-script(because as soon as the popup is closed, the JS-session is closed too).</p>
  <p>I am trying to solve this with <code>getBackgroundPage()</code>. With the code, shown below I get this error: <code>**Uncaught TypeError: Error in invocation of runtime.getBackgroundPage(function callback): No matching signature. at popup.js:6**</code></p>
  <p>This is my code:</p>
  <p>HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//background.js
  
  setInterval(updateTimer, 1000);
  
  function updateTimer() {
    const StartingMinutes = 40;
    let timeinSec = StartingMinutes * 60;
    const minutes = Math.floor(timeinSec / 60);
    let seconds = timeinSec % 60;
  
    seconds = seconds &lt; 10 ? '0' + seconds : seconds;
  
    timeinSec--;
  
    timeinSec = timeinSec &lt; 0 ? 0 : timeinSec;
  
    return minutes, seconds;
  }
  
  //popup.js
  
  setInterval(function() {
    let BGPage = chrome.runtime.getBackgroundPage();
    let BGPage_Time_Data = BGPage.updateTimer();
    console.log(BGPage_Time_Data)
  }, 1000)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="popup.css"&gt;
    &lt;title&gt;Hydration Timer&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;h3&gt;You should drink a cup of water in:&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="drink-timer"&gt;&lt;span class="minutes-span"&gt;40&lt;/span&gt; : &lt;span class="seconds-span"&gt;00&lt;/span&gt;&lt;/div&gt;
    &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>manifest.json:</p>
  <pre class="lang-json prettyprint-override"><code>
      {
          &quot;name&quot;: &quot;Hydro Homies&quot;,
          &quot;description&quot;: &quot;Do not forget to drink my Homies&quot;,
          &quot;version&quot;: &quot;1.0&quot;,
          &quot;manifest_version&quot;: 3,
          &quot;background&quot;: {
            &quot;service_worker&quot;: &quot;background.js&quot;
          },
          &quot;permissions&quot;: [&quot;background&quot;], 
          &quot;action&quot;: {
            &quot;default_popup&quot;: &quot;popup.html&quot;
          }
        }
  
  </code></pre>
  <p>Could you please help me understand, how I can access the minutes and seconds variables in the popup-script and how to handle the error.</p>
  <p>Thanks :)</p>