title: Chrome extensions - why click event in popup refresh popup html?
body: <p>Im experimenting with Chrome extensions and I found a weird behavior of popup window.</p>
  
  <p>In popup.html is one element <code>&lt;a id="grantexpert"&gt;...&lt;/a&gt;</code> and in popup.js I would like to change background color of this element when clicked. The change of color works when changed immediately after document ready. But when in click event, the color is changed for a very short time (just a blink) when clicked and then is immediately returned to original settings. It looks like popup window is reloaded again after click event.</p>
  
  <p><strong>Manifest:</strong></p>
  
  <pre><code>  "browser_action": {
      "default_popup": "popup/popup.html"
    },
  </code></pre>
  
  <p><strong>popup.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;head&gt;
      &lt;script src='../other/jquery-3.1.1.min.js'&gt;&lt;/script&gt;
      &lt;script src='popup.js'&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body style="width:250px;"&gt;
  
      &lt;a class="testitem" href id="grantexpert"&gt;grantexpert.sk&lt;/a&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>popup.js:</strong></p>
  
  <pre><code>(function($) {
  
    $(document).ready(function() {
  
      //$("#grantexpert").css('font-size', '28px'); - this works
  
      // this does not work
      $('#grantexpert').click(function () {
        $(this).css('font-size', '28px');
      });
  
    });
  
  })(jQuery);
  </code></pre>
  
  <p>Why does the element change the color for a blink, but does not keep adjusted properties after the click event and reverts them back?</p>