CODEWITHSUNDEEP
google-chrome-extension
mh-anwar
mh-anwar

Reputation: 151

Is there a way to change the position/location of a chrome extension popup?

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)

Upvotes: 4

Views: 4972

Answers (1)

mh-anwar
mh-anwar

Reputation: 151

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.

Upvotes: 6

Related Questions