Proposal: extend extend browser.action API to display popup in the middle of the screen

[NV]

I propose to extend chrome.action API to allow displaying popup in the middle of the browser screen, instead of the top right corner.

Existing extensions, such as Omni, inject a content script on every single website only to display a popup in the middle of the screen.

This is bad for several reasons: excessive permissions, doesn't work at all on the new tab page (and the rest internal browser pages), the popup code can break the website, and the website code can break the popup.

Option 1

{
  "action": {
    "default_popup": "popup.html",
    "default_position": "center"
  }
}

browser.action.setPopup({
  popup: "popup.html",
  position: browser.action.Position.CENTER
})

This would center the popup in the middle both vertically and horizontally.

Option 2

Extend the existing OpenPopupOptions of browser.action.openPopup(options).

browser.action.openPopup({width, height, top, left})

When top and left are specified, the popup is no longer anchored to the extension icon. top and left is the offset from the top left corner of the screen in pixels. The same way it works for Window's top and left already.

Security concerns:

• Malicious extensions may timely display the popup on top of a bank login form, for example, to steal user's login/password. I don't think this is a real concern — if the attacker can display an action popup, they can also inject a content script with activeTab permission. Using the popup for phishing would be unnecessarily complicated.
  Outdated message:
  The existing popup has a slight shadow (on macOS at least; OS-specific), but it might now be sufficient. To solve this, I suggest that browsers "fade out" the rest of the UI while the positioned popup is visible. Chrome and Safari already do this with modal dialogs:

Minor details:

• What if only width/height are defined but not top/left? I suppose we can allow that to override the current popup sizing behavior.
• What if only top is specified, but not left (or vice-versa)? We can throw an exception and/or display the popup as if both top and left weren't specified.

Related docs:
browser.action.openPopup on MDN
chrome.action.openPopup

What about mobile or tablets?

On mobile devices, I don't expect this to make any difference.
On tablets, I think this should behave the same way as on the desktop. (I'd like to hear more from the browser vendors.)

---

Related docs: MDN, Chrome.

[oliverdunk]

I really like this! I recently opened an issue about a more reliable way to draw over web content and it would be nice to see if we could tackle both issues at once: #235

They do feel slightly different in the level of access they want to the page though. #235 would benefit from being controlled by the content script, whereas this use case seems like it would benefit from being able to run on pages even without host permissions.

[hanguokai]

Is this the same like below?

browser.windows.create({
    type: "popup",
    url: "popup.html",
    top, left, width, height
});

I created a proposal #267 like your proposal but put the popup in a new tab.

{
  "action": {
    "default_popup": "popup.html",
    "default_position": "new_tab"
  }
}

But they don't like the proposal if it is easy to do with existing api.

[NV]

They do feel slightly different in the level of access they want to the page though. #235 would benefit from being controlled by the content script, whereas this use case seems like it would benefit from being able to run on pages even without host permissions.

Yes, exactly. Also, content scripts can't run on restricted pages. In Chrome, for example, that would be the new tab page (and all chrome:// pages) and Chrome Web Store.

[hanguokai]

What would left and top values be if I want to position the popup in the middle of the browser window?

If it is the middle of the browser window, use browser.windows.getCurrent(), then use the left/top/width/height of the current window to calculate the popup position. If it is the middle of the computer screen, browser.system.display.getInfo() can get the screen info.

The window browser.windows.create() create is an independent window, that is not the same as a "popup" inside a web page. Do you want to create a popup inside or outside a browser window? Does it need to interact with the page's DOM?

[NV]

@hanguokai I apologize, I removed my comment soon after posting it, as I misunderstood what you were saying.

Is this the same like below?

browser.windows.create({
    type: "popup",
    url: "popup.html",
    top, left, width, height
});

Thank you for sharing, I didn't know about the "popup" window type.

This API has a different set of issues:

1. The title bar is excessive for this kind of extension:

If I were to reimplement something like Omni, having the title bar would look unnecessary and antiquated.

2. In Chrome on macOS specifically, opening a window has ~400ms animation. Safari doesn't have this animation, which I'd expect for this particular use case.

[NV]

Do you want to create a popup inside or outside a browser window?

It seems like either could work.

Does it need to interact with the page's DOM?

No, not in my case.

[hanguokai]

I generally understand your idea, and I also want to have this feature, but if I think about it, it's complicated.

1. The popup is an extension page.
2. It doesn't need any host permissions.
3. It doesn't interact with any tab's DOM.
4. It is displayed inside current tab, no matter what current tab is.
5. Switching to other tab, the popup will not display?
6. What is the behavior if the browser has no any tab/window?
7. How to specify it's position and size relative to current tab? For example treat it like an "position:fixed" iframe, and allow to specify "width", "height", "top/bottom/left/right"?

[stefanvd]

I do like this proposal.
8. However, that should also add (automatically) the cancel and OK buttons. Because of accessibility.
If you see this page:
chrome://settings/resetProfileSettings?origin=userclick
You see a popup in the center of the web page, but with a cancel and blue confirm button. And clicking outside on the dark layer of the popup panel, will not close the panel.

[NV]

1-3: Yes.
4. It doesn't have to be exactly inside, it could be on top, as the current action popup.
5. Yes, as the current popup. (However, either option would be fine, as the extension authors could use tabs API to close the popup when its tab becomes inactive.)
6. Good question. Perhaps, show it in the middle of the screen.
7. If instead of what I proposed, we provide "width", "height", "top/bottom/left/right", how would we actually center the popup? With CSS, we'd have to do something like top: 50%; left: 50%; transform: translate(-50%, -50%).
8. The existing popup doesn't include cancel/OK buttons, so I wouldn't automatically add them in the centered popup either.

[fwextensions]

The title bar is excessive for this kind of extension:

I get not wanting to have the window titlebar, but there has to be some consistent and accessible way for the user to close the popup, even if the nefarious extension developer doesn't want it to be closed. Perhaps hovering over the background scrim would always show a close box somewhere.

In Chrome on macOS specifically, opening a window has ~400ms animation. Safari doesn't have this animation, which I'd expect for this particular use case.

I've worked around this by keeping the popup open persistently. Command shortcuts can bring it forward when needed. The hard part is hiding the window. Moving it off-screen used to work on Windows in earlier versions of Chrome, but not on macOS. I've resorted to having options to hide it behind the current window, move it to/from a tab, or minimize it (which can also be slow, depending on the OS and whether animations are enabled).

[NV]

Another use case for my proposal is to be able to re-implement Arc's "new tab" UI as a browser extension:

Acr, after pressing Command-T

---

@hanguokai

7. How to specify it's position and size relative to current tab? For example treat it like an "position:fixed" iframe, and allow to specify "width", "height", "top/bottom/left/right"?

I updated my top comment with an alternative proposal — "Option 2". Please check it out.

@fwextensions, I appreciate the tips/hacks (I wasn't aware of them), but it would be even better not to rely on the off-screen window at all.

[NV]

None of the browser vendors supported this API proposal, so I'm closing this.

2023-01-05 meeting notes.

As per our discussion below, I opened #347.

[simeon] Random thought: maybe a "browser.modal" extension API to open a modal/lightbox etc. Allows browsers to choose appropriate presentation of this content for the device/platform.

[timothy] I'm supportive of that. Reminds me of the element which is well-supported.

[rob] I'm supportive of the capability, but there are a lot of different directions we could go. I think we need an API proposal in order to discuss something specific. The API in its current form has an unsurmountable issue (inability to associate the UI with the extension button), and we would therefore vote against it. There is a favorable sentiment for the feature in a different shape.