How to close popup.html for my google extension?

Question

How can I visibly hide my popup.html whenever I click a button on that popup. I want to keep my scripts running but minimize the popup off the page. The reason i'm doing this is because i'm making an eye dropper extension that can get the color under your cursor and perhaps that color is being blocked by the popup hence why I want to get hide it when I'm looking for a color. Once I've picked my color the popup reappears.

Answer 1

You'll have to resize the popup e.g. by hiding everything inside. The minimum size is still 16x16.

popup.js should call start() inside some event listener:

function start() {
  Object.assign(document.documentElement, {
    className: 'hidden',
    title: 'Click to cancel',
    onclick: stop,
  });
}
function stop() {
  Object.assign(document.documentElement, {
    className: '',
    title: '',
    onclick: null,
  });
}

popup.css:

html.hidden * {
  display: none !important
}

html.hidden::after {
  content: 'x';
  text-align: center;
  display: block;
  cursor: pointer;
}