cookbook.sidepanel-open sample does not behave correctly

[mattheimer]

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:

      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.