Improve sidePanel trigger example for production usage best practices

[chostudio]

Relevant Line

https://github.com/GoogleChrome/chrome-extensions-samples/blob/20d36c778028f25fb139b83fdd9910b530bd9ea2/functional-samples/ai.gemini-on-device/background.js

Describe the bug

Currently, the side panel is configured as:

chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Although it works as expected in a dev environment, in production environments this behavior does not open the side panel when users click the pinned extension icon. Users would have to right-click and select "Open Side Panel," which is not intuitive.

Expected behavior

Potential users expect to be able to open the side panel directly by clicking the pinned extension icon once, without needing to right-click > "Open Side Panel" in production.

Suggested Fix

Developers should see an example that will follow best practices for production use.

Update background.js to wrap the code in a Chrome onClick listener:

chrome.action.onClicked.addListener(async (tab) => {
  chrome.sidePanel
    .setPanelBehavior({ openPanelOnActionClick: true })
    .catch((error) => console.error(error));
});

[chostudio]

May I be assigned this issue to make a PR for it?

[jamalimubashirali]

@chostudio what this issue is all about, can you give me the direct insights because right know I can't get this.

[oliverdunk]

Hi @chostudio, feel free to open a PR. I wouldn't set the behavior in the action.onClicked event, since by the time that has fired the click is already being handled. However, moving it to a chrome.runtime.onInstalled listener might make sense.

[chostudio]

made a PR for this issue here: #1483