title: Popup refreshing on form submit in chrome extension
body: <p>I am trying to build a chrome extension popup window that once clicked, will display a form for the user to submit his or her name and the college they attend. I want to then store this information in chrome storage, and once done, it will replace the popup window with a different window that will display a &quot;hello&quot; + (user retreived from chrome storage) + &quot;!&quot; as a header. If the user doesn't enter anything and submits the form, then it won't submit the form and ask them to fill out the form again. I am trying to achieve this, but for some reason, it is not working. The page is just reloading on submit when the information entered, and not proceeding or something like that. What am I doing wrong? My code is down below</p>
  <p>Manifest.json</p>
  <pre><code>    {
      &quot;name&quot;: &quot;CXhrome Extemsopm&quot;,
      &quot;description&quot;: &quot;my extension&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;manifest_version&quot;: 2,
      &quot;background&quot;: {
          &quot;scripts&quot;: [
              &quot;jquery-3.5.1.min.js&quot;, 
              &quot;background.js&quot;
          ]
      },
      &quot;browser_action&quot;: {
          &quot;default_popup&quot;: &quot;index.html&quot;
      },
      &quot;permissions&quot;: [
          &quot;storage&quot;,
          &quot;tabs&quot;,
          &quot;identity&quot;,
          &quot;notifications&quot;
      ],
      &quot;content_security_policy&quot;: &quot;script-src 'self' https://cdn.firebase.com https://apis.google.com https://www.gstatic.com https://kit.fontawesome.com/; object-src 'self'&quot;
    }
  </code></pre>
  <p>index.html</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;style&gt;
          html {
              width: 370px;
              height: 500px;
          }
  
          .header {
              position: absolute;
              right: 0;
              top: 0;
              width: 370px;
              height: 60px;
              background-color: white;
          }
  
          .logo {
              position: absolute;
              top: 12px;
              right: 122px;
          }
  
          .form {
              position: absolute;
              right: 0;
              top: 63px;
              width: 370px;
              height: 437px;
              text-align: center;
              background-color: whitesmoke;
          }
  
          .questionaire {
              width: 336px;
              position: absolute;
              left: 17px;
              top: 35px;
              padding: 15px;
              background-color: white;
              border-radius: 25px;
          }
          
      &lt;/style&gt;
      &lt;body&gt;
          &lt;section class=&quot;header&quot;&gt;
              &lt;div&gt;
                  &lt;h1 class=&quot;logo&quot;&gt;Logo Here&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;section class=&quot;form&quot;&gt;
              &lt;form id=&quot;form&quot; class=&quot;questionaire&quot;&gt;
                  &lt;h1&gt;What is your name?&lt;/h1&gt;
                  &lt;input id=&quot;name&quot; class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Name&quot; required&gt;
                  &lt;br&gt;
                  &lt;h2&gt;What college do you attend?&lt;/h2&gt;
                  &lt;select id=&quot;college&quot; class=&quot;form-select&quot; required&gt;
                      &lt;option selected&gt;College&lt;/option&gt;
                      &lt;option value=&quot;college1&quot;&gt;College 1&lt;/option&gt;
                      &lt;option value=&quot;college2&quot;&gt;College 2&lt;/option&gt;
                      &lt;option value=&quot;college3&quot;&gt;College 3&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;hr&gt;
                  &lt;div class=&quot;d-grid gap-2&quot;&gt;
                      &lt;button id=&quot;link&quot; class=&quot;btn btn-primary&quot; type=&quot;submit&quot; name=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/section&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;index.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>index.js</p>
  <pre><code>    document.getElementById('link').addEventListener(&quot;click&quot;, myFunction);
  
  function myFunction() {
      var name = document.getElementById('name').value;
      var college = document.getElementById('college').value;
  
      if ((name === &quot;&quot; || name == null) &amp;&amp; (college === &quot;&quot; || college == null)) {
          window.location.replace(&quot;index.html&quot;);
      } else {
          chrome.storage.local.set({'name': name, 'college': college}, function () {
              window.location.replace(&quot;canvas.html&quot;);
          });
      }
  }
  </code></pre>