How to programmatically open a chrome extension popup window from background.html

Thanks in advance!

What I want to achieve is to open the popup window when a special tag is detected on a webpage by my extension. After searching for a while it seems like the popup can only be opened when user clicks the extension. Is it true?

Or could I get the location of my extension's icon 开发者_Go百科on browser? Maybe I could draw a window and display under the extension icon to make it looks just like the popup window.

---

This guy wants opposite effect and can't get his popup window not to open. Take a look at his code to open your popup page ;)

---

It is impossible to get the extension window to open without a user clicking on it... However, you can get the extension popup page to open in a new tab as follows:

1) Set your background page in your manifest file...

"background_page": "background.html",

This is where you will run the code to see whether the special tag is detected... background pages can constantly run code in the background, and it is up to you to set a repeat loop to check whether you variable condition is true every so often...

2) Enable tabs permission in your manifest file...

"permissions": [ "tabs" ],

This permission is needed for step 3 (Allows the background page to open a new tab)

3) In background page, call create and point to the extension popup url.

if(condition == true){
  chrome.tabs.create({url:"popup.html"});
}

---

You cannot fake click on browser action, but you can still open the popup page from the background script as usual window popup and it will work as expected. So for example the html page of your browser action is "popup.html"

window.open("popup.html", "extension_popup", "width=300,height=400,status=no,scrollbars=yes,resizable=no");

Note: you can call it only from the background script (event page). Therefore you need to register the background script in your manifest file and add an event handler, which would open the popup.You can read more about event pages here https://developer.chrome.com/extensions/event_pages

---

If by popup you mean browser action popup then you are right, there is no way of opening it programmatically.

You can embed whatever you need from your popup on demand directly into a page through a content script. I think this would be the best solution.

If your popup doesn't contain anything fancy, maybe desktop notifications would be enough for you.

Creating a new window and positioning it under the url bar would be pretty awkward solution and not very user friendly.

---

Let me add to devza above. His answer is great if the popup doesnt need to communicate back with the page - otherwise you have a problem because your content scripts aren't interacting with the original window. This answer relies on the page being aware of the extension (sending and receiving messages) - meaning you have to be in control of the page as well. What I did is cumbersome but it works:

1. Listen for postMessage from page to background script, and open the new window as devza suggested.
2. Encode the original page's url as the new window's name (the url is available on the message's event object).
3. When you need to propogate from the popup back to the original page, call window.opener.postMessage from the popup - this message is triggered on the background page's window. The message should include the data and the encoded origin(=window.name).
4. Listen for a message in the background script. When you receive the message, you can use the Chrome.tabs api (enable "tabs" permission in manifest.json) to find the relevant tab - usually this would be the first tab in the list, but now it isn't, because of the way the popup was opened. Here's where the encoded origin is useful - iterate through the tabs array and find the tab where tab.url===origin.
5. This is the relevant tab to send a message to (=to the relevant content script).
6. The content script should listen for said message, which should at the very least include the data.
7. The content script can then raise an event/use the relevant data to update the dom.

---

For manifest v3 I do something like this. Again, you cannot do this directly, instead you need to open a popup window like the posts above suggest.

//contentscript.js

chrome.runtime.sendMessage(JSON.stringify({
    left: window.screenLeft + window.outerWidth,
    top: window.screenTop
}), (response) => {});

//backgroundscript.js

chrome.runtime.onMessage.addListener(
    (request, sender, sendResponse) => {
        let data = JSON.parse(request);
        chrome.windows.create({
            url: chrome.runtime.getURL("index.html"),
            type: "popup",
            top: data.top,
            left: data.left-400,
            width: 400,
            height: 600,
        });
    }
);