GoogleChrome / GoogleChrome/chrome-extensions-samples
cookbook.sidepanel-open sample does not behave correctly
- 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
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