Add permission request to settings

src/_locales/en/messages.json

@@ -12,6 +12,10 @@
         "message": "General",
         "description": "'General' section"
     },
+    "optionsPermissionsLabel": {
+        "message": "You have not granted Web Scrobbler the permission to access all sites, which means you have to click the extension icon to start scrobbling every time. Click here to grant the permission. Note that in safari the permission will not automatically be granted, but the next time you visit a supported site you will be able to click \"Always Allow on Every Website...\" to grant the permission.",
+        "description": "Label for permissions button"
+    },
     "optionUseNotifications": {
         "message": "Use now playing notifications",
         "description": "Option label"

src/ui/options/components/components.module.scss

@@ -385,3 +385,19 @@ summary {
 	margin-left: 0.5em;
 	padding: 0.25em 0.5em;
 }
+
+.permissionsPopup {
+	background-color: var(--sidebar-bg);
+	color: var(--text);
+	margin: 0;
+	text-align: center;
+
+	button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		font-size: 1.25em;
+		margin: 0;
+		padding: 1em 15vw;
+	}
+}

src/ui/options/components/permissions.tsx

@@ -0,0 +1,35 @@
+import { Setter, Show, createSignal } from 'solid-js';
+import browser from 'webextension-polyfill';
+import styles from './components.module.scss';
+import { t } from '@/util/i18n';
+
+const desiredPermissions = {
+	origins: ['http://*/', 'https://*/'],
+};
+
+export default function Permissions() {
+	const [perms, setPerms] = createSignal(true);
+	hasPermissions(setPerms);
+
+	return (
+		<Show when={!perms()}>
+			<div class={styles.permissionsPopup}>
+				<button
+					type="button"
+					onClick={() => {
+						// This is inline and not async, as when it was not there were some issues with safari isTrusted
+						browser.permissions
+							.request(desiredPermissions)
+							.then(setPerms);
+					}}
+				>
+					{t('optionsPermissionsLabel')}
+				</button>
+			</div>
+		</Show>
+	);
+}
+
+async function hasPermissions(setPerms: Setter<boolean>) {
+	setPerms(await browser.permissions.contains(desiredPermissions));
+}

src/ui/options/main.tsx

@@ -18,6 +18,7 @@ import ContactComponent from './components/contact';
 import OptionsComponent from './components/options/options';
 import Accounts from './components/accounts';
 import { EditsModal } from './components/options/edited-tracks';
+import Permissions from './components/permissions';
 
 /**
  * All the different options pages, their sidebar labels, and icons.
@@ -93,6 +94,7 @@ function Options() {
 
 	return (
 		<>
+			<Permissions />
 			<div class={styles.settings}>
 				<Sidebar
 					items={settings}

src/ui/options/settings.module.scss

@@ -1,13 +1,18 @@
 body {
 	background-color: var(--background);
 	color: var(--text);
-	font-family: Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	margin: 0;
 	padding: 0;
 	width: 100%;
 }
 
+body,
+button,
+input {
+	font-family: Helvetica, Arial, sans-serif;
+}
+
 a {
 	color: var(--last-fm);
 	text-decoration: none;