mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00

Files

Oliver Dunk 8a4c25dde6 Update dictionary sample to use sidePanel.open() (#1087 )

* Update dictionary sample to use sidePanel.open()

Updates the dictionary side panel example to use the
sidePanel.open() API. This means we are also able to demonstrate
a way of safely passing data to the side panel without hitting
any race conditions.

* Address feedback

2024-02-20 09:58:30 +00:00

images

[SidePanel API] Adds four examples (#890 )

2023-05-03 11:19:49 -05:00

manifest.json

Update dictionary sample to use sidePanel.open() (#1087 )

2024-02-20 09:58:30 +00:00

README.md

Update dictionary sample to use sidePanel.open() (#1087 )

2024-02-20 09:58:30 +00:00

service-worker.js

Update dictionary sample to use sidePanel.open() (#1087 )

2024-02-20 09:58:30 +00:00

sidepanel.html

[SidePanel API] Adds four examples (#890 )

2023-05-03 11:19:49 -05:00

sidepanel.js

Update dictionary sample to use sidePanel.open() (#1087 )

2024-02-20 09:58:30 +00:00

README.md

Dictionary Side panel example

This example allows users to right-click on a word and see the definition on the side panel using the Side Panel API.

NOTE: This example only defines the word extensions and popup.

Implementation Notes

When the user selects a word, we need to send it to the side panel, but that may not be open yet. To handle this we store the word in chrome.storage.session, which results in the following:

If the side panel is already open, the storage.session.onChanged event will fire in the side panel.
Otherwise, the value will be loaded from storage when the side panel opens.

Running this extension

Clone this repository.
Load this directory in Chrome as an unpacked extension.
Go to https://developer.chrome.com/docs/extensions/
Right-click on the "Extensions" word.
Choose the "Define" context menu

You should see the definition on the side panel