-
Notifications
You must be signed in to change notification settings - Fork 68
Proposal for sidePanel lifecycle events. #779
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
Open
rishikramena-ms
wants to merge
11
commits into
w3c:main
Choose a base branch
from
rishikramena-ms:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
4023e11
Create sidepanel_events.md
rishikramena-ms 5eeb24b
Update sidepanel_events.md
rishikramena-ms 2e5a8e1
Update sidepanel_events.md
rishikramena-ms 88a4b90
Update sidepanel_events.md
rishikramena-ms c8f431e
Update sidepanel_events.md
rishikramena-ms c627cfe
Update sidepanel_events.md
rishikramena-ms d3d959c
Update sidepanel_events.md
rishikramena-ms 94348f4
Update sidepanel_events.md
rishikramena-ms 57239c5
Update sidepanel_events.md
rishikramena-ms 19e63c4
Update sidepanel_events.md
rishikramena-ms 7e89fbc
removing a use case
rishikramena-ms File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,165 @@ | ||
# Proposal: New onClosed and onOpened events for the sidePanel API | ||
|
||
**Summary** | ||
|
||
Proposal to introduce two new lifecycle events that will help developers manage the lifecycle of the side panel of their extensions | ||
|
||
**Document Metadata** | ||
|
||
**Author:** [rishikramena-ms](https://github.com/rishikramena-ms) | ||
|
||
**Sponsoring Browser:** Microsoft Edge | ||
|
||
**Contributors:** | ||
|
||
**Created:** 2025-03-11 | ||
|
||
**Related Issues:** [#752](https://github.com/w3c/webextensions/issues/752), [#517](https://github.com/w3c/webextensions/issues/517) | ||
|
||
## Motivation | ||
|
||
### Objective | ||
|
||
Create new lifecycle events for the chrome.sidePanel API. | ||
|
||
- `chrome.sidePanel.onOpened` | ||
- `chrome.sidePanel.onClosed` | ||
|
||
These events aim to provide developers with better control and management of the side panel's lifecycle. | ||
|
||
#### Use Cases | ||
|
||
- User Experience Enhancement: | ||
- Objective: Improve user interactions by providing context-specific content or actions. | ||
- Example: An extension that offers contextual help can display relevant tips or tutorials when the side panel is opened, enhancing the user's experience based on their current activity. Although this can be achived in other ways, but having a dedicated event will make using it simpler. | ||
|
||
- Custom Analytics: | ||
- Objective: Collect usage data to understand how users interact with the side panel. | ||
- Example: An extension can log events when the side panel is opened or closed to gather insights into user behavior and improve future versions of the extension. | ||
|
||
### Known Consumers | ||
|
||
The need for lifecycle events have been expressed by many extension developers. The initial discussion was also started by an extension developer ([link](https://github.com/w3c/webextensions/issues/517)). | ||
There have been many workarounds tried by extension developers to get the state change information for the side panel UI for extensions: | ||
A few of them are listed below: | ||
- https://groups.google.com/a/chromium.org/g/chromium-extensions/c/o1_-Su6DkCI | ||
- https://medium.com/@latzikatz/chrome-side-panel-simulate-close-event-c76081f53b97 | ||
|
||
|
||
## Specification | ||
|
||
### Schema | ||
|
||
```typescript | ||
namespace sidePanel { | ||
|
||
// An object that represents the side panel open info. This is used for | ||
// passing the information of the side panel context to the event listeners. | ||
dictionary PanelOpenInfo { | ||
// The window associated with the side panel. | ||
long windowId; | ||
|
||
// The tab associated with the side panel. This is only set if there is a | ||
// tab-specific panel. | ||
long? tabId; | ||
|
||
// The path to the side panel HTML file in use. | ||
DOMString path; | ||
}; | ||
|
||
// An object that represents the side panel close info. This is used for | ||
// passing the information of the side panel context to the event listeners. | ||
dictionary PanelCloseInfo { | ||
// The window associated with the side panel. | ||
long windowId; | ||
|
||
// The tab associated with the side panel. This is only set if there is a | ||
// tab-specific panel. | ||
long? tabId; | ||
|
||
// The path to the side panel HTML file in use. | ||
DOMString path; | ||
}; | ||
|
||
interface Events { | ||
// Fired when a sidePanel hosted by an extension is triggered to open. | ||
static void onOpened( | ||
addListener(callback: (info: PanelOpenInfo) => void): void; | ||
hasListener(callback: (info: PanelOpenInfo) => void): void; | ||
removeListener(callback: (info: PanelOpenInfo) => void): void; | ||
); | ||
|
||
// Fired when a sidePanel hosted by an extension is triggered to close. | ||
static void onClosed( | ||
addListener(callback: (info: PanelCloseInfo) => void): void; | ||
hasListener(callback: (info: PanelCloseInfo) => void): void; | ||
removeListener(callback: (info: PanelCloseInfo) => void): void; | ||
); | ||
}; | ||
``` | ||
|
||
### Behavior | ||
|
||
Described as code comments in schema. | ||
|
||
### New Permissions | ||
|
||
No new permissions needed. However, the existing `sidePanel` permission to use the `chrome.sidePanel` API will be needed. | ||
|
||
### Manifest File Changes | ||
|
||
No manifest file changes. | ||
|
||
## Security and Privacy | ||
|
||
No new security or privacy concerns are expected to be introduced. | ||
|
||
### Exposed Sensitive Data | ||
|
||
No sensitive user data exposed. | ||
|
||
### Abuse Mitigations | ||
|
||
Since this proposal just adds events to an existing API, we do not see any abusive usage concerns. | ||
|
||
### Additional Security Considerations | ||
|
||
None. | ||
|
||
## Alternatives | ||
|
||
### Existing Workarounds | ||
|
||
Developers are using the `runtime.connect()` method to create a long lived channel from the side panel script and listening to the `onDisconnect` event from the service worker. | ||
References: | ||
- https://groups.google.com/a/chromium.org/g/chromium-extensions/c/o1_-Su6DkCI | ||
- https://medium.com/@latzikatz/chrome-side-panel-simulate-close-event-c76081f53b97 | ||
### Open Web API | ||
|
||
Not applicable to the open web. | ||
|
||
## Implementation Notes | ||
|
||
### Open for discussions: | ||
- Should we also have trigger reasons for the onClosed and onOpened events? A sample schema for the reasons is given below. | ||
```typescript | ||
namespace sidePanel { | ||
// Reason for the side panel open trigger. | ||
enum onOpenedReason { | ||
USER_ACTION, | ||
PROGRAMMATIC, | ||
} | ||
// Reason for the side panel close trigger. | ||
enum onClosedReason { | ||
USER_ACTION, | ||
PROGRAMMATIC, | ||
NEW_SIDE_PANEL_OPENED, | ||
TAB_CLOSED | ||
} | ||
} | ||
``` | ||
- Would adding onHidden, onShown or onVisibilityChanged events for side panel extensions make sense too? | ||
- Should we provide granular controls for attaching listeners for tab-specific or path-specific side panels. | ||
|
||
## Future Work | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As discussed in the last meeting, I am waiting until there is more discussion in the proposal about this before doing a full review.