Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sidePanel does not automatically open #982

Open
lucasjohnston opened this issue Jul 10, 2023 · 14 comments
Open

sidePanel does not automatically open #982

lucasjohnston opened this issue Jul 10, 2023 · 14 comments

Comments

@lucasjohnston
Copy link

lucasjohnston commented Jul 10, 2023

Describe the bug
As per both the description in the docs and on the README, the chrome extension cookbook.sidepanel-site-specific should automatically open the sidePanel when navigating to google.com. This does not happen, you have to click the icon.

To Reproduce

  1. Install the extension as unpacked
  2. Go to Google.com

Expected behavior
SidePanel to open automatically

Notes
The docs specifically point at this example for functionality: https://developer.chrome.com/docs/extensions/reference/sidePanel/#by-site
And the README states "This example demonstrates how to display the side panel only on google.com using the Side Panel API" here

@mukunda-
Copy link

I was pretty excited by the side panel offering, but this caught me off-guard too.

The feature is not useful to me unless I can automatically show the panel without user interaction. The documentation states "Opens the side panel for the extension. This may only be called in response to a user action." https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open

So, currently the user is required to click something to open the panel. I'm not sure where is the best place to submit developer feedback, but we really need a way to open the panel automatically. I don't see a problem if the user consents to the behavior.

@patrickkettner
Copy link
Collaborator

patrickkettner commented Jul 11, 2023 via email

@mukunda-
Copy link

Hi Patrick, my use case is users commenting on sites' contents. If there are no comments, it doesn't show, which is most of the time. If there are comments, then it shows. It needs to be automatic because otherwise the comment visibility suffers. That is, the information needs to present itself, rather than the user expecting it and taking action first.

@AmySteam
Copy link
Contributor

@lucasjohnston

I was looking at the instructions on the readme file:

  1. Load this directory in Chrome as an unpacked extension.
  2. Pin the extension.
  3. Go to https://www.google.com/.
  4. Click on the action icon to open the side panel.

💡 You can also open the side panel by pressing Ctrl+B (Windows) or Cmd+B (macOS).

So the way it works, is that you have to open it once via action icon. But then if you navigate back to google.com, the side panel should remain open.

@mukunda-
Copy link

Thank you @AmySteam

I reviewed the process again and unfortunately it's not quite as intuitive.

What happens when you navigate away is that the side panel closes. When they come back, they would have to open it again, via the click action or selecting it from the side panel dropdown.

Attached video for clarity
https://github.com/GoogleChrome/chrome-extensions-samples/assets/7541831/49555049-9a1a-4f0e-a247-6b2990092bcd

When I see step 2 as "pinning the extension", I already sense it is counter-intuitive. I'd consider that as "training instructions" that should be unnecessary in an intuitive user experience.

My ideal intuitive user experience would be:

  1. Install the extension, consenting to the extension behavior.
  2. Visit a relevant website, and have the extension content presented automatically.
  3. Manual activation beyond that is not needed.

I imagine there may be some conflict over other extensions doing the same on a page, since we need to share the side panel, and, not to get too offtrack here, but I would eventually want the ability to easily have a controllable, dedicated, docked panel, much like the developer tools window. Other extensions could do the same, displaying multiple panels on a page if the user desires, all configurable to be docked on a part of the screen. Honestly that would be amazing, and this isn't unheard of, for example, in a developer IDE where the visible text editor space is only 20% of the screen, surrounded by panels! I think it would be a great feature for many use cases.

In general, I think we need more presentation options. Outside of these new features, there is no way to safely adjust the viewport of a page, and we are left with ugly CSS hacks that do not work universally – I believe the corresponding blog post about side panels touches on the difficulties we face. Difficulties aside, intuitiveness is an important part of a software's success, and for now, I'm stuck with dangerous CSS hacks since it does get closer to providing the behavior that I need.

The "dangerous" part is a real concern to me because I predict many support tickets complaining about the 10% of sites that will not present properly, where my extension covers text, breaks the layout, etc. Not good! Hence I was very excited to see the new sidepanel API, but it doesn't fit my requirements currently.

@AmySteam
Copy link
Contributor

@mukunda- That video was super helpful! Thanks for sharing 💯 😃

The test I was performing was:

  • navigate to google.com
  • open a separate tab on example.com
  • switch back to the google.com and the side panel would remain open.

There will be other user interactions that will open the side panel, but this still doesn't quite solve for the "open-panel-if-element-exists-on-the-page" use case you described earlier 🧐:

Hi Patrick, my use case is users commenting on sites' contents. If there are no comments, it doesn't show, which is most of the time. If there are comments, then it shows. It needs to be automatic because otherwise the comment visibility suffers. That is, the information needs to present itself, rather than the user expecting it and taking action first.

@patrickkettner I'm gonna hand this use case over to you to add to side panel developer feedback.

@mukunda-
Copy link

Thanks Amy. Looking forward to the fun features ahead.

@lucasjohnston
Copy link
Author

Hey Amy - whilst I understand the idea, it feels misleading that "Enable a side panel on a specific site" doesn't actually enable the side panel, it persists it. It'd be great if Chrome could offer this functionality and/or change the wording :)

@AmySteam
Copy link
Contributor

@lucasjohnston *sigh*. You have discovered one of my daily struggles 🫢... picking the right term to best describe functionality!

I truly appreciate your feedback. It helps us write our docs in a way that makes more sense for developers :)

It'd be great if Chrome could offer this functionality

Do you mean programmatically open the side panel? Because 116 launched this feature. But it does require a use gesture :)

@lucasjohnston
Copy link
Author

@AmySteam Thank you! I do indeed – though given 116 isn't stable yet we've moved away from sidePanel until it's stable and the API is widely available

@zakariaelh
Copy link

@AmySteam Somewhat of a similar issue to lucas, but I'm trying to open the sidebar only in a specific tab. I don't understand why it's designed such that it will open in that tab only if there's a tab-specific side panel. Otherwise it will open in all tabs. That seems against the point of providing a tabId. I want all my tabs to share the same html template, but I want to populate that template based on information in each tab separately.

See quote from documentation

The tab in which to open the side panel. If the corresponding tab has a tab-specific side panel, the panel will only be open for that tab. If there is not a tab-specific panel, the global panel will be open in the specified tab and any other tabs without a currently-open tab- specific panel.

@AmySteam
Copy link
Contributor

@zakariaelh Good question! I'm curious, have you declared a global side panel in the manifest? Like in the example below? This will set a global side panel in all tabs. If so, can you remove this code and try again?

{
  "name": "My side panel extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  }
  ...
}

Let me know if this works for you 😄

@zakariaelh
Copy link

It works, thank you so much!

@kudos112
Copy link

Hi @patrickkettner @AmySteam @lucasjohnston, I've read your discussion above which was quite helpful.
@patrickkettner I am also building up a Chrome extension I think my client can also face this issue. Yet I've not discussed with him but I think he'll say something on this issue.

I am also facing an issue. I want to make sidePanel more wider than its default size. Is there any possibility of doing this? Because I've searched a lot but you also have to do it manually. There is no way to handle its size via CSS or any other way or I'm unable to find it yet.

Any suggestions or help will be so much appreciated.
Thanks

Warm Regards
Abdul Quddous

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants