diff --git a/Extension-samples/sidebar/main-sb.html b/Extension-samples/sidebar/main-sb.html new file mode 100644 index 0000000..315d3d6 --- /dev/null +++ b/Extension-samples/sidebar/main-sb.html @@ -0,0 +1,10 @@ + + + + Main sidebar + + +

Heading

+

Sentence.

+ + diff --git a/Extension-samples/sidebar/manifest.json b/Extension-samples/sidebar/manifest.json new file mode 100644 index 0000000..ee1840e --- /dev/null +++ b/Extension-samples/sidebar/manifest.json @@ -0,0 +1,12 @@ +{ + "name": "My sidebar extension", + "side_panel": { + "default_path": "sidebar.html" + }, + "action": { + "default_title": "Click to open sidebar" + }, + "permissions": [ + "sidePanel" + ] +} diff --git a/Extension-samples/sidebar/service-worker.js b/Extension-samples/sidebar/service-worker.js new file mode 100644 index 0000000..27a97f6 --- /dev/null +++ b/Extension-samples/sidebar/service-worker.js @@ -0,0 +1,56 @@ +const BING_ORIGIN = 'https://www.bing.com'; + +chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => { + if (!tab.url) return; + const url = new URL(tab.url); + // Enable the sidebar when at bing.com. + if (url.origin === BING_ORIGIN) { + await chrome.sidePanel.setOptions({ + tabId, + path: 'sidepanel.html', + enabled: true + }); + } else { + // Disable the sidebar when at other sites. + await chrome.sidePanel.setOptions({ + tabId, + enabled: false + }); + } +}); + +// Allow users to open the sidebar by clicking the action toolbar icon. +chrome.sidePanel + .setPanelBehavior({ openPanelOnActionClick: true }) + .catch((error) => console.error(error)); + +// Switch to a different sidebar. +const welcomePage = 'sidebar/welcome-sb.html'; +const mainPage = 'sidebar/main-sb.html'; + +chrome.runtime.onInstalled.addListener(() => { + chrome.sidePanel.setOptions({ path: welcomePage }); +}); + +chrome.tabs.onActivated.addListener(async ({ tabId }) => { + const { path } = await chrome.sidePanel.getOptions({ tabId }); + if (path === welcomePage) { + chrome.sidePanel.setOptions({ path: mainPage }); + } +}); + +// Open the sidebar upon user interaction. +chrome.runtime.onInstalled.addListener(() => { + chrome.contextMenus.create({ + id: 'openSidePanel', + title: 'Open sidebar', + contexts: ['all'] + }); +}); + +chrome.contextMenus.onClicked.addListener((info, tab) => { + if (info.menuItemId === 'openSidePanel') { + // Open the sidebar in all the tabs of the current window. + chrome.sidePanel.open({ windowId: tab.windowId }); + } +}); diff --git a/Extension-samples/sidebar/sidebar.html b/Extension-samples/sidebar/sidebar.html new file mode 100644 index 0000000..9e70ffe --- /dev/null +++ b/Extension-samples/sidebar/sidebar.html @@ -0,0 +1,10 @@ + + + + My Sidebar + + +

Sidebar extension for all sites

+

This sidebar is enabled on all sites

+ + diff --git a/Extension-samples/sidebar/welcome-sb.html b/Extension-samples/sidebar/welcome-sb.html new file mode 100644 index 0000000..de16cb0 --- /dev/null +++ b/Extension-samples/sidebar/welcome-sb.html @@ -0,0 +1,10 @@ + + + + Welcome sidebar + + +

Heading

+

Sentence.

+ +