GoogleChrome / GoogleChrome/chrome-extensions-samples

cookbook.sidepanel-open sample does not behave correctly

Open
#1,477 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
17.8k
Forks
9k
Avg merge
21h
Merged PRs (30d)
28

Description

https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/functional-samples/cookbook.sidepanel-open/service-worker.js doesn't really work as the author intended.

The sample tries to create a button that will be appended to a page, the button will send a message, and a message listener will open the sidePanel to a secondary path instead of the primary path for the panel.

The problem is that the code does this:

```javascript
await chrome.sidePanel.open({ tabId: sender.tab.id });
await chrome.sidePanel.setOptions({
tabId: sender.tab.id,
path: 'sidepanel-tab.html',
enabled: true
});
```

Since open is done first the panel is opened to the primary path and then the options get set. If you press the button a second time the options that were previously set (including the sidepanel-tab.html path) will actually show.

What you really need to be able to do is to call setOptions followed by open but you can't. Trying to do that will cause the user gesture context to be lost or invalidated by the time the open call happens. This results in an `Uncaught (in promise) Error: sidePanel.open() may only be called in response to a user gesture.`

I don't think the example works how the author intended which is to show a button added to a web page that results in the sidePanel being opened to a different path. The only way to make it work is to hit the button twice. The first time will show the panel and set the options and the second time will re-open the panel to the options set on the previous button press.

The example is misleading and should be changed.

Contributor guide

Open the contributing guide

Research direction

Start with functional-samples/cookbook.sidepanel-open/service-worker.js and reproduce the sample by pressing the injected button once and twice. Read the sidePanel.open and setOptions call sequence and verify the user-gesture behavior; done means the sample no longer presents a misleading one-click flow and its observed behavior matches its stated purpose.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.