Refactor to support permission handling

scripts/makeManifest.js

@@ -44,12 +44,21 @@ const getMakeManifest =
 					strict_min_version: '109.0',
 				},
 			},
+			// Delete this in favor of optional_host_permissions when https://bugzilla.mozilla.org/show_bug.cgi?id=1766026
+			// is resolved
+			optional_permissions: [
+				'*://*/*'
+			]
 		};
 
 		const chromiumKeys = {
 			background: {
 				service_worker: 'dist/service-worker.js',
 			},
+			optional_host_permissions: [
+				// TODO: Move this to `manifestBase` when Firefox supports optional_host_permissions
+				'*://*/*'
+			]
 		};
 
 		const manifest = {

src/background.ts

@@ -1,10 +1,12 @@
 import type { WebNavigation } from 'webextension-polyfill';
-import { scripting, tabs, webNavigation } from 'webextension-polyfill';
+import { runtime, scripting , tabs, webNavigation } from 'webextension-polyfill';
 import { fetchUser } from './gkApi';
 import { injectionScope as inject_azureDevops } from './hosts/azureDevops';
 import { injectionScope as inject_bitbucket } from './hosts/bitbucket';
 import { injectionScope as inject_github } from './hosts/github';
 import { injectionScope as inject_gitlab } from './hosts/gitlab';
+import { refreshPermissions } from './permissions-helper';
+import { PopupInitMessage } from './shared';
 
 webNavigation.onDOMContentLoaded.addListener(injectScript, {
 	url: [
@@ -26,6 +28,14 @@ webNavigation.onHistoryStateUpdated.addListener(details => {
 	}
 });
 
+runtime.onMessage.addListener(async (msg) => {
+	if (msg === PopupInitMessage) {
+		return refreshPermissions();
+	}
+	console.error('Recevied unknown runtime message', msg);
+	return undefined;
+});
+
 function injectScript(details: WebNavigation.OnDOMContentLoadedDetailsType) {
 	void scripting.executeScript({
 		target: { tabId: details.tabId },
@@ -60,6 +70,9 @@ function getInjectionFn(url: string): (url: string) => void {
 const main = async () => {
 	// The fetchUser function also updates the extension icon if the user is logged in
 	await fetchUser();
+
+	// This removes unneded permissions
+	await refreshPermissions();
 };
 
 void main();

src/domUtils.ts

@@ -1,9 +1,12 @@
-export const createAnchor = (href: string, target?: string) => {
+export const createAnchor = (href: string, target?: string, callback?: () => void) => {
 	const a = document.createElement('a');
 	a.href = href;
 	if (target) {
 		a.target = target;
 	}
+	if (callback) {
+		a.addEventListener('click', callback);
+	}
 
 	return a;
 };

src/gkApi.ts

@@ -7,13 +7,22 @@ const gkDotDevUrl = 'https://gitkraken.dev';
 const accessTokenCookieName = 'accessToken';
 
 const getAccessToken = async () => {
-	// Attempt to get the access token cookie from GitKraken.dev
-	const cookie = await cookies.get({
-		url: gkDotDevUrl,
-		name: accessTokenCookieName,
-	});
+	try {
+		const cookie = await cookies.get({
+			url: gkDotDevUrl,
+			name: accessTokenCookieName,
+		});
 
-	return cookie?.value;
+		return cookie?.value;
+	} catch (e) {
+		if ((e as Error)?.message.includes('No host permissions for cookies at url')) {
+			// ignore as we are waiting for required permissions
+		} else {
+			// otherwise log error and continue as if logged out
+			console.error(e);
+		}
+	}
+	return undefined;
 };
 
 export const fetchUser = async () => {

src/permissions-helper.ts

@@ -0,0 +1,49 @@
+import type { Permissions } from 'webextension-polyfill';
+import { permissions } from 'webextension-polyfill';
+import { arrayDifference, CloudProviders } from './shared';
+
+function domainToMatchPattern(domain: string): string {
+	return `*://*.${domain}/*`;
+}
+
+const RequiredOriginPatterns = [
+	// Without this permission, the extension cannot login
+	'gitkraken.dev'
+].map(domainToMatchPattern);
+const CloudProviderOriginPatterns = CloudProviders.map(domainToMatchPattern);
+
+export type OriginTypes = 'required' | 'cloud';
+
+export interface PermissionsRequest {
+	request: Permissions.Permissions;
+	hasRequired: boolean;
+	hasCloud: boolean;
+}
+
+export async function refreshPermissions(): Promise<PermissionsRequest | undefined> {
+	const exitingPermissions = await permissions.getAll();
+
+	const newRequiredOrigins = arrayDifference(RequiredOriginPatterns, exitingPermissions.origins);
+	const newCloudOrigins = arrayDifference(CloudProviderOriginPatterns, exitingPermissions.origins);
+	const newOrigins = [...newRequiredOrigins, ...newCloudOrigins];
+	const unusedOrigins = arrayDifference(exitingPermissions.origins, [...RequiredOriginPatterns, ...CloudProviderOriginPatterns]);
+
+	if (!unusedOrigins.length) {
+		const unusedPermissions: Permissions.Permissions = {
+			origins: unusedOrigins
+		};
+		const result = await permissions.remove(unusedPermissions);
+		if (!result) {
+			console.warn('Failed to remove unnecessary permissions');
+		}
+	}
+	return newOrigins.length
+		? {
+			request: {
+				origins: newOrigins,
+			},
+			hasRequired: Boolean(newRequiredOrigins.length),
+			hasCloud: Boolean(newCloudOrigins.length)
+		}
+		: undefined;
+}

src/popup.ts

@@ -1,7 +1,10 @@
 // Note: This code runs every time the extension popup is opened.
 
+import { permissions, runtime } from 'webextension-polyfill';
 import { createAnchor, createFAIcon } from './domUtils';
 import { fetchUser, logoutUser } from './gkApi';
+import type { PermissionsRequest } from './permissions-helper';
+import { PopupInitMessage } from './shared';
 import type { User } from './types';
 
 // Source: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#basic_example
@@ -137,16 +140,64 @@ const renderLoggedOutContent = () => {
 	mainEl.append(signUpPromo);
 };
 
-const main = async () => {
+const syncWithBackground = async () => {
+	return await runtime.sendMessage(PopupInitMessage) as PermissionsRequest | undefined;
+};
+
+function reloadPopup() {
+	// This seems to work on Firefox and Chromium but I couldn't find any docs confirming this is the correct way
+	window.location.reload();
+}
+
+const renderPermissionRequest = (permissionsRequest: PermissionsRequest) => {
+	const mainEl = document.getElementById('main-content')!;
+
+	const permissionRequestLink = createAnchor('#', undefined, async () => {
+		await permissions.request(permissionsRequest.request);
+		reloadPopup();
+	});
+	permissionRequestLink.classList.add('menu-row');
+	if (permissionsRequest.hasRequired) {
+		permissionRequestLink.append(createFAIcon('fa-triangle-exclamation'), 'Allow required permissions to continue');
+		mainEl.append(permissionRequestLink);
+
+		const supportLink = createAnchor(
+			'https://help.gitkraken.com/browser-extension/gitkraken-browser-extension',
+			'_blank',
+		);
+		supportLink.append(createFAIcon('fa-question-circle'), 'Support');
+		supportLink.classList.add('menu-row');
+		mainEl.append(supportLink);
+	} else {
+		permissionRequestLink.append(createFAIcon('fa-exclamation'), `Allow permissions for cloud providers`);
+		mainEl.append(permissionRequestLink);
+	}
+};
+
+const finishLoading = () => {
+	const loadingIcon = document.getElementById('loading-icon');
+	loadingIcon?.remove();
+};
+
+async function main() {
+	const permissionsRequest = await syncWithBackground();
+	if (permissionsRequest) {
+		renderPermissionRequest(permissionsRequest);
+		if (permissionsRequest.hasRequired) {
+			// Only required permissions blocks the UI
+			finishLoading();
+			return;
+		}
+	}
+
 	const user = await fetchUser();
 	if (user) {
 		void renderLoggedInContent(user);
 	} else {
 		renderLoggedOutContent();
 	}
 
-	const loadingIcon = document.getElementById('loading-icon');
-	loadingIcon?.remove();
+	finishLoading();
 };
 
 void main();

src/shared.ts

@@ -1,5 +1,7 @@
 import { action } from 'webextension-polyfill';
 
+export const PopupInitMessage = 'popupInit';
+
 const IconPaths = {
 	Grey: {
 		16: '/icons/gk-grey-16.png',
@@ -15,5 +17,23 @@ const IconPaths = {
 	},
 };
 
+export const CloudProviders = [
+	'github.com',
+	'gitlab.com',
+	'bitbucket.org',
+	'dev.azure.com',
+];
+
 export const updateExtensionIcon = (isLoggedIn: boolean) =>
 	action.setIcon({ path: isLoggedIn ? IconPaths.Green : IconPaths.Grey });
+
+// Basically ramda's difference() function but it accepts undefined as empty arrays
+export function arrayDifference<T>(first: T[] | undefined, second: T[] | undefined): T[] {
+	if (!first) {
+		return [];
+	}
+	if (!second) {
+		return first;
+	}
+	return first.filter(x => !second.includes(x));
+}