Add sidebar support (#140)

Author: fregante

package-lock.json

@@ -18,13 +18,13 @@
 	let showInfoMessage = !localStorage.getItem('undo-info-message');
 	let userClickedHideInfoMessage = false; // "Disable/enable all" shows the button again, unless the user clicked already "hide" in the current session
 
-	options.then(({showButtons, width}) => {
+	options.then(({showButtons, width, position}) => {
 		if (showButtons === 'always') {
 			showExtras = true;
 		}
 
-		if (new URLSearchParams(location.search).get('type') !== 'window') {
-			document.body.style.width = (width || 400) + 'px';
+		if (position === 'popup' || position === 'window') {
+			document.documentElement.style.width = (width || 400) + 'px';
 		}
 	});
 	$: {

source/app.svelte

@@ -10,12 +10,11 @@ chrome.storage.onChanged.addListener(async (changes, areaName) => {
 // Must be registered on the top level
 chrome.action.onClicked.addListener(async () => {
 	let {position, width} = await optionsStorage.getAll();
-	if (position === 'popup') {
-		return;
-	}
+
+	// 'popup' and 'sidebar' are handled by the browser
 
 	if (position === 'tab') {
-		chrome.tabs.create({url: chrome.runtime.getURL('index.html?type=tab')});
+		chrome.tabs.create({url: chrome.runtime.getURL('index.html')});
 		return;
 	}
 
@@ -25,7 +24,7 @@ chrome.action.onClicked.addListener(async () => {
 		const currentWindow = await chrome.windows.getCurrent();
 		await chrome.windows.create({
 			type: 'popup',
-			url: chrome.runtime.getURL('index.html?type=window'),
+			url: chrome.runtime.getURL('index.html?auto-fit=true'),
 			width,
 			height,
 			top: currentWindow.top + Math.round((currentWindow.height - height) / 2),
@@ -37,4 +36,4 @@ chrome.action.onClicked.addListener(async () => {
 matchOptions();
 
 // DEVELOPMENT MODE: uncomment this so the tab will reopen on extension reload
-// chrome.tabs.create({url:'chrome-extension://aknaajkpkdhfnbdfopjlkpkmajdckgfk/index.html?type=tab'})
+// chrome.tabs.create({url: chrome.runtime.getURL('index.html')});

source/background.js

@@ -5,9 +5,8 @@ new App({
 	target: document.body,
 });
 
-const type = new URLSearchParams(location.search).get('type');
-document.body.dataset.type = type;
-if (type === 'window') {
+const autoFit = new URLSearchParams(location.search).has('auto-fit');
+if (autoFit) {
 	fitWindow();
 }
 

source/main.js

@@ -5,15 +5,18 @@
 	"manifest_version": 3,
 	"homepage_url": "https://github.com/hankxdev/one-click-extensions-manager",
 	"default_locale": "en",
-	"permissions": ["management", "storage"],
+	"permissions": ["management", "storage", "sidePanel"],
 	"minimum_chrome_version": "110",
 	"icons": {
 		"16": "logo.png",
 		"128": "logo.png"
 	},
 	"action": {
 		"default_icon": "logo.png",
-		"default_popup": "index.html?type=popup"
+		"default_popup": "index.html"
+	},
+	"side_panel": {
+		"default_path": "index.html"
 	},
 	"options_ui": {
 		"page": "options/options.html"

source/manifest.json

@@ -29,4 +29,10 @@ const defaultPopup = chrome.runtime.getManifest().action.default_popup;
 export async function matchOptions() {
 	const {position} = await optionsStorage.getAll();
 	chrome.action.setPopup({popup: position === 'popup' ? defaultPopup : ''});
+
+	const inSidebar = position === 'sidebar';
+	chrome.sidePanel.setOptions({enabled: inSidebar});
+	chrome.sidePanel.setPanelBehavior({
+		openPanelOnActionClick: inSidebar,
+	});
 }

source/options-storage.js

@@ -18,27 +18,30 @@
 	ul {
 		padding-left: 1em;
 	}
+	p:has([value='tab']:checked, [value='sidebar']:checked)
+		~ p:has(label[for='width']) {
+		display: none;
+	}
 </style>
 <form id="options-form">
+	<p>
+		<label for="showButtons">Show buttons</label>
+		<select name="showButtons" id="showButtons">
+			<option value="on-demand">On right click (default)</option>
+			<option value="always">Always</option>
+		</select>
+	</p>
 	<p>
 		<label for="position">Position</label>
 		<select name="position" id="position">
 			<option value="popup">Menu (default)</option>
 			<option value="window">Popup window</option>
 			<option value="tab">Tab</option>
+			<option value="sidebar">Sidebar</option>
 		</select>
 	</p>
 	<p>
-		<label for="showButtons">Show buttons</label>
-		<select name="showButtons" id="showButtons">
-			<option value="on-demand">On right click (default)</option>
-			<option value="always">Always</option>
-		</select>
-	</p>
-	<p>
-		<label for="width"
-			>List width <small>(in pixels, or leave empty)</small></label
-		>
+		<label for="width"> Width <small>(in pixels)</small> </label>
 		<input type="text" name="width" id="width" placeholder="400" />
 	</p>
 </form>

source/options/options.html

@@ -6,25 +6,13 @@
 }
 
 body {
-	width: 400px;
+	width: auto;
 	margin: auto;
+	max-width: 800px;
 	padding: var(--margin);
 	direction: auto;
 }
 
-body[data-type='popup'] {
-	width: 320px;
-}
-
-body[data-type='tab'],
-body[data-type='window'] {
-	width: auto;
-}
-
-body[data-type='tab'] {
-	max-width: 800px;
-}
-
 main {
 	gap: 1em;
 	display: flex;
@@ -159,15 +147,6 @@ button:hover,
 }
 
 @media (prefers-color-scheme: dark) {
-	/* Border around improves contrast */
-	[data-type='popup'] body::before {
-		content: '';
-		position: fixed;
-		inset: 0;
-		z-index: -1;
-		border: solid 1px #595a5e;
-	}
-
 	body {
 		background-color: #292a2d;
 		color: #e8eaed;