centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-26 13:19:49 +07:00
Code Issues Packages Projects Releases Wiki Activity

[SidePanel API] Add sidePanel.open() cookbook (#983)

Browse Source 
* Init commit

* Add sidepanel open cookbook

* Add minimum chrome version

* Add 116 on readme

* Add extension page
Add content script

* Tweak

* Tweak 2

* ¯\_(ツ)_/¯

* Update readme

* Update readme

* Change sample name in Readme

* Bold Chrome 116 for emphasis

* Typo fix
This commit is contained in:
amysteamdev
2023-07-18 10:36:40 -06:00
committed by GitHub
parent a3966b4d92
commit 6f2e616494
12 changed files with 144 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
functional-samples/cookbook.sidepanel-open/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Opening the side panel through a user interaction
This example demonstrates using [`chrome.sidePanel.open()`](https://developer.chrome.com/docs/extensions/reference/sidePanel/#method-open) to open a global side panel through a context menu click and a tab-specific side panel by clicking a button in an extension page or a button click injected by a content script. This feature will be available starting **Chrome 116**.
## Running this extension
1. Clone this repository.
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
### Test with a context menu
1. Navigate to any page, like [example.com](http://example.com/).
2. Right-click on any word.
3. Choose the context menu "Open side panel".
### Test in an extension page
1. The extension page will open when you install the extension.
2. Click on the "Open side panel" button.
### Test by clicking on an injected element
1. Navigate to [google.com](http://www.google.com/).
2. Scroll to the very bottom of the page.
3. Click on the "Open side panel" button.

8
functional-samples/cookbook.sidepanel-open/content-script.js Normal file
View File

@@ -0,0 +1,8 @@
const button = new DOMParser().parseFromString(
'<button>Click to open side panel</button>',
'text/html'
).body.firstElementChild;
button.addEventListener('click', function () {
chrome.runtime.sendMessage({ type: 'open_side_panel' });
});
document.body.append(button);

BIN
functional-samples/cookbook.sidepanel-open/images/icon-128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
functional-samples/cookbook.sidepanel-open/images/icon-16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 B

BIN
functional-samples/cookbook.sidepanel-open/images/icon-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

25
functional-samples/cookbook.sidepanel-open/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"manifest_version": 3,
"name": "Open side panel",
"version": "1.0",
"description": "Use user interactions to open the side panel",
"minimum_chrome_version": "116",
"background": {
"service_worker": "service-worker.js"
},
"side_panel": {
"default_path": "sidepanel-global.html"
},
"content_scripts": [
{
"js": ["content-script.js"],
"matches": ["https://www.google.com/*"]
}
],
"permissions": ["sidePanel", "contextMenus"],
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}

9
functional-samples/cookbook.sidepanel-open/page.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<body>
<h1>This is an extension page</h1>
<p>Click on the button below to open the side panel</p>
<button id="openSidePanel">Open side panel</button>
<script src="script.js" type="module"></script>
</body>
</html>

16
functional-samples/cookbook.sidepanel-open/script.js Normal file
View File

@@ -0,0 +1,16 @@
// top level await is available in ES modules loaded from script tags
const [tab] = await chrome.tabs.query({
active: true,
lastFocusedWindow: true
});
const tabId = tab.id;
const button = document.getElementById('openSidePanel');
button.addEventListener('click', async () => {
await chrome.sidePanel.open({ tabId });
await chrome.sidePanel.setOptions({
tabId,
path: 'sidepanel-tab.html',
enabled: true
});
});

44
functional-samples/cookbook.sidepanel-open/service-worker.js Normal file
View File

@@ -0,0 +1,44 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'openSidePanel',
title: 'Open side panel',
contexts: ['all']
});
chrome.tabs.create({ url: 'page.html' });
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'openSidePanel') {
// This will open the panel in all the pages on the current window.
chrome.sidePanel.open({ windowId: tab.windowId });
}
});
chrome.runtime.onMessage.addListener((message, sender) => {
// The callback for runtime.onMessage must return falsy if we're not sending a response
(async () => {
if (message.type === 'open_side_panel') {
// This will open a tab-specific side panel only on the current tab.
await chrome.sidePanel.open({ tabId: sender.tab.id });
await chrome.sidePanel.setOptions({
tabId: sender.tab.id,
path: 'sidepanel-tab.html',
enabled: true
});
}
})();
});

9
functional-samples/cookbook.sidepanel-open/sidepanel-global.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<body>
<h1>Global side panel</h1>
<p>
This is a global side panel, which means it remains open on every tab.
</p>
</body>
</html>

7
functional-samples/cookbook.sidepanel-open/sidepanel-tab.html Normal file
View File

@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<body>
<h1>Tab-specific side panel</h1>
<p>This side panel is available and stays open only on the current tab</p>
</body>
</html>

5
functional-samples/sample.sidepanel-dictionary/manifest.json
View File

@@ -13,8 +13,5 @@
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel",
"contextMenus"
]
"permissions": ["sidePanel", "contextMenus"]
}