From efb298ba74dd15f16e7d032557a4f0c1ac61cf01 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Tue, 21 Apr 2026 16:40:23 -0700 Subject: [PATCH] initial code from article --- Extension-samples/sidebar/main-sb.html | 10 ++++ Extension-samples/sidebar/manifest.json | 12 +++++ Extension-samples/sidebar/service-worker.js | 56 +++++++++++++++++++++ Extension-samples/sidebar/sidebar.html | 10 ++++ Extension-samples/sidebar/welcome-sb.html | 10 ++++ 5 files changed, 98 insertions(+) create mode 100644 Extension-samples/sidebar/main-sb.html create mode 100644 Extension-samples/sidebar/manifest.json create mode 100644 Extension-samples/sidebar/service-worker.js create mode 100644 Extension-samples/sidebar/sidebar.html create mode 100644 Extension-samples/sidebar/welcome-sb.html 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 @@ + + +
+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 @@ + + + +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 @@ + + + +Sentence.
+ +