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.

Sign up for GitHub

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

Updated article "Extensions in the Microsoft Edge sidebar" #2852

Merged
merged 6 commits into from
Oct 10, 2023
Merged

Updated article "Extensions in the Microsoft Edge sidebar" #2852

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
445b993
date
mikehoffms Oct 5, 2023
03536c4
add new sections
mikehoffms Oct 5, 2023
e6db77b
link text
mikehoffms Oct 5, 2023
824c75c
windowId per example
mikehoffms Oct 5, 2023
c59d355
apply review cmts
mikehoffms Oct 9, 2023
d5ad858
Cleanup todos
mikehoffms Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions microsoft-edge/extensions-chromium/developer-guide/sidebar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 08/24/2023
ms.date: 10/05/2023
---
# Extensions in the Microsoft Edge sidebar

Expand Down Expand Up @@ -171,7 +171,7 @@ To allow users to open the sidebar by clicking the action toolbar icon, use [sid
}
```

Then, add the following code to the `service-worker.js` code listing that's in [Enable a sidebar for a specific site only](#enable-a-sidebar-for-a-specific-site-only) above:
Then, add the following code to the `service-worker.js` code listing that's in [Enable a sidebar for a specific site only](#enable-a-sidebar-for-a-specific-site-only), above:

```js
// Allow users to open the sidebar by clicking on the action toolbar icon
Expand Down Expand Up @@ -206,6 +206,38 @@ chrome.tabs.onActivated.addListener(async ({ tabId }) => {
```


<!-- ------------------------------ -->
#### Opening the sidebar upon user interaction
<!-- todo: note: new section.
other doc: https://developer.chrome.com/docs/extensions/reference/sidePanel/#user-interaction -->

[sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open) allows extensions to open the sidebar through an user gesture, such as clicking on the action icon. Or any user interaction on an extension page or content script, such as clicking a button.

The following code shows how to open a global sidebar on the current window when the user clicks on a context menu. When using `sidePanel.open()`, choose the context in which it should open. Use `windowId` to open a global sidebar.

`sidePanel.open()` is available starting with Microsoft Edge version 117.

Alternatively, set the `tabId` to open the sidebar only on a specific tab.

```js
// service-worker.js:
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'openSidePanel',
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
title: 'Open sidebar',
contexts: ['all']
});
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'openSidePanel') {
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
// This will open the panel in all the pages on the current window.
mikehoffms marked this conversation as resolved.
Show resolved Hide resolved
chrome.sidePanel.open({ windowId: tab.windowId });
}
});
```


<!-- ====================================================================== -->
## Sidebar extensions user experience

Expand All @@ -225,7 +257,7 @@ Users can click the **Open in sidebar** icon (![Open in sidebar icon](./sidebar-

![Sidebar dialog](./sidebar-images/sidebar-dialog.png)

Or, users can click the extension's custom icon in the toolbar, if it's enabled. This user experience requires that the extension has enabled the shortcut icon to open the sidebar, as described in [Enable the extension's shortcut icon to open the sidebar](#enable-the-extensions-shortcut-icon-to-open-the-sidebar) above. In this example, the extension's custom icon is a circle (![Extension's custom icon](./sidebar-images/custom-icon-for-demo-extension.png)):
Or, users can click the extension's custom icon in the toolbar, if it's enabled. This user experience requires that the extension has enabled the shortcut icon to open the sidebar, as described in [Enable the extension's shortcut icon to open the sidebar](#enable-the-extensions-shortcut-icon-to-open-the-sidebar), above. In this example, the extension's custom icon is a circle (![Extension's custom icon](./sidebar-images/custom-icon-for-demo-extension.png)):

![Clicking the extension's icon in the toolbar](./sidebar-images/left-click-toolbar-icon.png)

Expand Down Expand Up @@ -253,6 +285,18 @@ Users can press a keyboard shortcut, if the action command is enabled and the ac
If the `openPanelOnActionClick()` property of the [PanelBehavior](https://developer.chrome.com/docs/extensions/reference/sidePanel/#type-PanelBehavior) type is set to `true`, the user can open the sidebar by using a keyboard shortcut. To enable this, you specify an action command in the manifest.


<!-- ---------- -->
###### Open through a gesture

<!-- todo: note: new section -->

The sidebar can be opened through the following interactions:

* Open the sidebar by an extension user gesture, such as clicking the action icon. This approach uses [sidePanel.open()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open). See [Opening the sidebar upon user interaction](#opening-the-sidebar-upon-user-interaction),<!-- todo: note: other doc: [Programmatically open the side panel on user interaction](https://developer.chrome.com/docs/extensions/reference/sidePanel/#user-interaction) --> above.

* Open the sidebar by clicking the toolbar icon - This approach uses [sidePanel.setPanelBehavior()](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-setPanelBehavior). See [By clicking an icon](#by-clicking-an-icon) in section "Opening the extension in the sidebar",<!-- todo: note: other doc: [Open the side panel by clicking the toolbar icon](https://developer.chrome.com/docs/extensions/reference/sidePanel/#open-action-icon) --> above.


<!-- ====================================================================== -->
## Extension samples

Expand All @@ -261,6 +305,7 @@ For more Sidebar API extensions demos, explore any of the following extensions:
* [Dictionary side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.sidepanel-dictionary)
* [Global side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-global)
* [Multiple side panels example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-multiple)
* [Opening the side panel through a user interaction](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open)
* [Site-specific side panel example](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-site-specific)


Expand Down