3

I am trying to develop a chrome extension, and I want to know if there is a way to change the position of a chrome extension popup and whether I can make it a sticky element. For example, an extension named Equatio, shows a sticky-like popup that remains at the bottoms of a user screen when its icon is clicked. I want to be able to do that, also, I am using Manifest Version 3 (if that helps).

I have already tried:

  1. Changing the position using the CSS position property
  2. Using Chrome Infobar (does not work)
  3. Using window.open() (also does not work for my purpose)
mh-anwar
  • 131
  • 3
  • 10
  • 1
    No, the built-in popup cannot be repositioned. That extension simply adds a DOM element in the web page which you can inspect in devtools yourself. – wOxxOm Apr 03 '21 at 02:23

1 Answers1

5

For anyone who comes here in the future:

As someone mentioned in the comments, it is not possible to reposition the built in popup. The comment also mentions, "That extension simply adds a DOM element in the web page." This was what I was trying to achieve. To do this, you add the following code into your content script:

let div = document.createElement(div);
div.id = 'toolbar';
document.body.appendChild(div);

fetch(chrome.runtime.getURL('foo.html'))
  .then((response) => response.text())
  .then((data) => {
    document.getElementById('toolbar').innerHTML = data;
  });

This code injects div to the bottom of the page then fetches an external HTML file (foo.html) and changes the content of the div. To make the div stay within the view-port, you can add CSS to the HTML file.

mh-anwar
  • 131
  • 3
  • 10