Add permissions check

holo-key-manager-extension/src/routes/+page.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+
 	import { ActionPage, Login } from '$components';
 	import { dismissWindow } from '$helpers';
 	import { sessionStorageQueries } from '$queries';
+	import { isChromePermissionsSafe } from '$shared/helpers';
 
 	const { sessionQuery, setupDeviceKeyQuery } = sessionStorageQueries();
 	$: isLoading = $sessionQuery.isFetching || $setupDeviceKeyQuery.isFetching;
@@ -11,10 +14,33 @@
 	const openInNewTab = (url: string) => () => window.open(url, '_blank');
 	const redirectToChangePassword = openInNewTab('change-password.html');
 	const redirectToSetup = openInNewTab('/setup-pass/start.html');
+
+	let permissionGranted = false;
+
+	onMount(async () => {
+		if (isChromePermissionsSafe()) {
+			const permissions = await chrome.permissions.getAll();
+			permissionGranted = permissions.origins?.includes('*://localhost/*') ?? false;
+		}
+	});
+
+	const requestPermission = async () => {
+		if (isChromePermissionsSafe()) {
+			const granted = await chrome.permissions.request({ origins: ['*://localhost/*'] });
+			permissionGranted = granted;
+		}
+	};
 </script>
 
 {#if isLoading}
 	<span>Loading</span>
+{:else if !permissionGranted}
+	<ActionPage
+		mainAction={requestPermission}
+		mainActionLabel="Request Permissions"
+		title="Permission Required"
+		subTitle="Holo Key Manager needs additional permissions. Click “Request Permissions” to proceed."
+	/>
 {:else if hasSessionData}
 	<div class="m-8">
 		<div class="mb-4 flex items-center justify-between">

holo-key-manager-extension/static/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.42",
+	"version": "0.0.43",
 	"manifest_version": 3,
 	"action": {
 		"default_title": "Holo key manager",

holo-key-manager-js-client/README.md

@@ -59,10 +59,9 @@ const handleSignUpError = (error) => {
 
 const getErrorMessage = (error) => {
 	const errorMessages = {
-		'permissions are not granted':
-			'Ensure the extension is installed and permissions are granted in Firefox.',
 		'not installed': 'Install the Holo Key Manager extension in Chrome/Edge to proceed.',
-		NeedsSetup: 'Instruct the user to set up the extension before proceeding.',
+		NeedsSetup:
+			'Instruct the user to set up the extension, grant necessary permissions, and then reload the page.',
 		NoKeyForHapp: 'No existing key found for this happ; initiate the signup flow.'
 	};
 

holo-key-manager-js-client/src/helpers.ts

@@ -43,13 +43,9 @@ export const sendMessage = (message: Message): Promise<MessageWithId> =>
 		}, 300000);
 	});
 
-const isFirefox = () => navigator.userAgent.indexOf('Firefox') !== -1;
-
 export const checkContentScriptAndBrowser = () => {
 	if (!document.getElementById(HOLO_KEY_MANAGER_EXTENSION_MARKER_ID)) {
-		const errorMessage =
-			'Holo Key Manager extension is not installed' +
-			(isFirefox() ? ' or permissions are not granted' : '');
+		const errorMessage = 'Holo Key Manager extension is not installed';
 		throw new Error(errorMessage);
 	}
 };

shared/helpers/other.ts

@@ -7,6 +7,12 @@ export const isChromeStorageSafe = () =>
 export const isChromeMessageSafe = () =>
 	isChromeDefined() && chrome.runtime && chrome.runtime.sendMessage;
 
+export const isChromePermissionsSafe = () =>
+	isChromeDefined() &&
+	chrome.permissions &&
+	typeof chrome.permissions.request === 'function' &&
+	typeof chrome.permissions.getAll === 'function';
+
 export const createQueryParams = (params: Record<string, string | boolean | undefined>) =>
 	new URLSearchParams(
 		Object.entries(params).reduce(