Sidepanel must be opened in response to a user gesture

After Chrome 127, some users and developer are seeing the following error:
sidePanel.open()` may only be called in response to a user gesture

We open the sidepanel from clicks in the content script and our web app app Scribehow.com and they no longer work in Chrome 127. The documentation says that you should be able to trigger an open from a click in the content script.

We are observing the same behavior in our extension, our e2e test that opens the sidepanel based on user gesture is consistently failing.

We're seeing this issue for users of our extension on Chrome 127 who also have 1Password (2.26.1) installed on both macOS and Windows.

Here's a crash id: 71bc12c4089532de

I've created a minimum repro that can be found here: https://github.com/pixiebrix/chrome-user-gesture-repro

The readme includes detailed instructions to reproduce

I should also note that the crash looks to be caused by an unhandled exception in our Extension that was exposed by the thrown user gesture error. 

We are also seeing the error be thrown with and without 1password installed. Though 1Password must be installed to replicate in the minimal repro. I'm not certain what is causing the difference

@Patrick - Just wanted to emphasize that from our perspective the bigger problem here is that `sidePanel.open` no longer works from a content script, which breaks meaningful functionality in our (and other) extensions. Maybe the root cause is also what is causing the crash, but regardless hoping the Chrome team can get a fix out for this soon. Thanks for your help!

It looks that the root cause of `sidePanel.open` no longer working from a content script is reproducible by including a mousedown listener in the content script. See the repro here: https://github.com/pixiebrix/chrome-user-gesture-repro. No need to have 1Password installed

I can confirm this issue affects our users on v127+ too, with no workaround available.

A bug report at https://issues.chromium.org/issues/40929586 was marked as “won’t fix”.

Any updates, Chrome team?

Here I have documented our learnings:

https://issues.chromium.org/issues/40929586#comment20

Hi Patrick, 

Thanks Cory for your reply

Are you sure about that? For me this works just fine (in 128...)


Only when I start reading the `chrome.sidepanel.getOptions();` It starts failing

User gesture context is a rather bizarre beast. In Firefox it is
insanely strict and really does not allow even a callback to read
settings from storage. In Chromium it seems single step callback (e.g.
the slowest one when multiple API calls are fired in parallel) works well.

Even await is possible if
1. The extension has the scripting permission,
2. The menu option is selected fast enough after opening context menu.

The following works for permissions.request as well. Credits: Rob Wu
<https://stackoverflow.com/questions/28060485/can-a-chrome-extensions-content-script-guarantee-that-a-dom-event-was-user-init>

---- 8< -----

{
"manifest_version": 3,
"name": "Open sidebar",
"description": "sidePanel.open() and user gesture context",
"version": "0.1",
"permissions": ["scripting", "activeTab", "contextMenus", "sidePanel"],
"background": { "service_worker": "asp_bg.js" }
}

---- 8< ----

"use strict";

async function aspOnClicked(tab, click) {
const frameId = click?.frameId;
const tabId = click?.tabId ?? tab.id;
await chrome.sidePanel.setOptions({ path: "asp_panel.html" });
// Fails
try {
console.log("after await", await chrome.sidePanel.open({tabId}));
} catch (ex) {
console.error("after await", ex);
}

// May work
console.log(
"content script",
await chrome.scripting.executeScript({
target: { tabId, allFrames: false, frameIds: [ frameId ] },
func: async function asp_cs(tabId) {
return await chrome.runtime.sendMessage(
{type: "open", tabId});
},
args: [ tabId ],
}));
}

chrome.contextMenus.onClicked.addListener(
(clickData, tab) => void aspOnClicked(tab, clickData));
chrome.runtime.onInstalled.addListener(async () => {
await chrome.contextMenus.removeAll();
chrome.contextMenus.create({
id: "ASP",
title: "open sidebar", contexts: ["all"]
});
});

chrome.runtime.onMessage.addListener((msg, _port, sendResponse) => {
async function asp_msg(tabId) {
try {
console.log(
"from content script",
await chrome.sidePanel.open({tabId}));
return true;
} catch (ex) {
console.error("from content script", ex);
return false;
}
}
asp_msg(msg.tabId).then(r => sendResponse(r));
return true;
});

Thank you Max,
for helping to collect more information.

However, I don't try to react to a user event in the host page space (injected script). All I try to do is get a sidepanel to be only open for the tabs I ever opened it.

For that I had to set NO default_panel in the manifest. Only then I receive the `chrome.action.onClicked` event in the background script. Interesting difference, in 128 it does only fire once, in 129 it fires every time it is clicked.

I'm able to `chrome.sidePanel.setOptions` and then `chrome.sidePanel.open`.

There is no `chrome.sidePanel.close` to close it on a second click. But the Little (x) button does hide it again.

It's really a pain to not have a documented way to open a side panel only on select tabs, such as the "Developer Tools" behave.

I'd wish that there was simply a mode to have a side panel global or only where ever opened. I don't want to inject a user script on every page after I activated my sidepanel.

Heureka,
I got it working the way I wanted it - https://github.com/KajKandler/ext_sidepanel_per_tab

The sidepanel is only active per tab and I believe I only inject the user script into the pages where it the sidepanel has been opened once. I hav eno idea if it ever has been closed.

The user script sends the current URL via message to the worker and from there to the sidepanel.

I'm open to comments or suggestions how to make this better.