Add sidebar support

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

@@ -19,6 +19,10 @@ chrome.action.onClicked.addListener(async () => {
 		return;
 	}
 
+	if (position === 'sidebar') {
+		return;
+	}
+
 	if (position === 'window') {
 		width = width === '' ? 400 : Number.parseInt(width, 10); // Must be an integer
 		const height = 600;

source/background.js

@@ -6,7 +6,7 @@ new App({
 });
 
 const type = new URLSearchParams(location.search).get('type');
-document.body.dataset.type = type;
+document.documentElement.dataset.type = type;
 if (type === 'window') {
 	fitWindow();
 }

source/main.js

@@ -5,7 +5,7 @@
 	"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",
@@ -15,6 +15,9 @@
 		"default_icon": "logo.png",
 		"default_popup": "index.html?type=popup"
 	},
+	"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

@@ -26,6 +26,7 @@
 			<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>

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;