Make compatible with Manifest v3 (#256)

* fix: browser storage version types * fix: auth flow on firefox * fix: scrobbling details do not update if scrobbling from a different tab * fix: scrobbling item image does not appear in popup * fix: history requests are not canceled * fix: canceled requests do not throw error * feat: change manifest version * feat: add helper to check manifest version * feat: change background script to service worker * feat: separate permissions from host permissions * feat: remove content security policy * feat: rename browser action to action * feat: remove web accessible resources * feat: use scripting api to inject content scripts * feat: use scripting api to inject functions * feat: remove ports * feat: remove axios * feat: remove window/document references from background logic
trakt-tools · May 7, 2023 · 397c195 · 397c195
1 parent c3c1449
commit 397c195
Show file tree

Hide file tree

Showing 35 changed files with 452 additions and 405 deletions.
diff --git a/package.json b/package.json
@@ -41,8 +41,6 @@
 		"@mui/material": "^5.10.16",
 		"@mui/system": "^5.10.16",
 		"@mui/x-date-pickers": "^5.0.9",
-		"@rafaelgomesxyz/axios-rate-limit": "^1.3.1",
-		"axios": "^0.26.1",
 		"date-fns": "^2.29.3",
 		"deepmerge": "^4.2.2",
 		"history": "^4.10.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apis/ServiceApi.ts b/src/apis/ServiceApi.ts
@@ -136,7 +136,8 @@ export abstract class ServiceApi {
 	async loadHistory(
 		itemsToLoad: number,
 		lastSync: number,
-		lastSyncId: string
+		lastSyncId: string,
+		cancelKey = 'default'
 	): Promise<ScrobbleItem[]> {
 		let items: ScrobbleItem[] = [];
 		try {
@@ -156,7 +157,7 @@ export abstract class ServiceApi {
 					responseItems = this.leftoverHistoryItems;
 					this.leftoverHistoryItems = [];
 				} else if (!this.hasReachedHistoryEnd) {
-					responseItems = await this.loadHistoryItems();
+					responseItems = await this.loadHistoryItems(cancelKey);
 					if (!this.hasCheckedHistoryCache) {
 						let firstItem: ScrobbleItemValues | null = null;
 						if (historyCache.items.length > 0) {
@@ -282,7 +283,7 @@ export abstract class ServiceApi {
 	 *
 	 * Should be overridden in the child class.
 	 */
-	loadHistoryItems(): Promise<unknown[]> {
+	loadHistoryItems(cancelKey = 'default'): Promise<unknown[]> {
 		Shared.errors.error('loadHistoryItems() is not implemented in this service!', new Error());
 		return Promise.resolve([]);
 	}

diff --git a/src/apis/TraktApi.ts b/src/apis/TraktApi.ts
@@ -1,4 +1,4 @@
-import { withHeaders, withRateLimit } from '@common/Requests';
+import { Requests, withHeaders } from '@common/Requests';
 import { Shared } from '@common/Shared';
 
 export class TraktApi {
@@ -15,17 +15,7 @@ export class TraktApi {
 	SYNC_URL: string;
 	SETTINGS_URL: string;
 
-	requests = withRateLimit({
-		id: 'trakt-api',
-
-		/**
-		 * @see https://trakt.docs.apiary.io/#introduction/rate-limiting
-		 */
-		maxRPS: {
-			'*': 1,
-			GET: 3,
-		},
-	});
+	requests = Requests;
 
 	isActivated = false;
 

diff --git a/src/apis/TraktAuth.ts b/src/apis/TraktAuth.ts
@@ -30,15 +30,18 @@ class _TraktAuth extends TraktApi {
 		this.manualAuth = {};
 	}
 
+	requiresCookies(): boolean {
+		return Shared.browser === 'firefox' ? !!Shared.storage.options.grantCookies : false;
+	}
+
 	getAuthorizeUrl(): string {
 		return `${this.AUTHORIZE_URL}?response_type=code&client_id=${
 			Shared.clientId
 		}&redirect_uri=${this.getRedirectUrl()}`;
 	}
 
 	getRedirectUrl(): string {
-		const requiresCookies = !!Shared.storage.options.grantCookies;
-		return this.isIdentityAvailable && !requiresCookies
+		return this.isIdentityAvailable && !this.requiresCookies()
 			? browser.identity.getRedirectURL()
 			: this.REDIRECT_URL;
 	}
@@ -54,11 +57,7 @@ class _TraktAuth extends TraktApi {
 
 	authorize(): Promise<TraktAuthDetails> {
 		let promise: Promise<TraktAuthDetails>;
-		let requiresCookies = false;
-		if (Shared.browser === 'firefox') {
-			requiresCookies = !!Shared.storage.options.grantCookies;
-		}
-		if (this.isIdentityAvailable && !requiresCookies) {
+		if (this.isIdentityAvailable && !this.requiresCookies()) {
 			promise = this.startIdentityAuth();
 		} else {
 			promise = new Promise<TraktAuthDetails>((resolve) => void this.startManualAuth(resolve));

diff --git a/src/apis/TraktScrobble.ts b/src/apis/TraktScrobble.ts
@@ -44,7 +44,7 @@ class _TraktScrobble extends TraktApi {
 		}
 		await this.send(item.trakt, this.START);
 		let { scrobblingDetails } = await Shared.storage.get('scrobblingDetails');
-		if (scrobblingDetails) {
+		if (scrobblingDetails?.tabId === Shared.tabId) {
 			scrobblingDetails.isPaused = false;
 		} else {
 			scrobblingDetails = {

diff --git a/src/apis/TraktSync.ts b/src/apis/TraktSync.ts
@@ -1,6 +1,5 @@
 import { TraktApi } from '@apis/TraktApi';
 import { Cache, CacheItem } from '@common/Cache';
-import { RequestPriority } from '@common/Requests';
 import { Shared } from '@common/Shared';
 import { Utils } from '@common/Utils';
 import { ScrobbleItem } from '@models/Item';
@@ -56,7 +55,6 @@ class _TraktSync extends TraktApi {
 				url: this.getUrl(item),
 				method: 'GET',
 				cancelKey,
-				priority: RequestPriority.HIGH,
 			});
 			historyItems = JSON.parse(responseText) as TraktHistoryItem[];
 			traktHistoryItemsCache.set(databaseId, historyItems);

diff --git a/src/common/AutoSync.ts b/src/common/AutoSync.ts
@@ -93,7 +93,7 @@ class _AutoSync {
 			await store.resetData();
 
 			try {
-				await api.loadHistory(Infinity, serviceValue.lastSync, serviceValue.lastSyncId);
+				await api.loadHistory(Infinity, serviceValue.lastSync, serviceValue.lastSyncId, 'autoSync');
 
 				items = store.data.items.filter(
 					(item) => item.progress >= Shared.storage.syncOptions.minPercentageWatched

diff --git a/src/common/BrowserAction.ts b/src/common/BrowserAction.ts
@@ -1,16 +1,18 @@
 import { Messaging } from '@common/Messaging';
+import { Requests } from '@common/Requests';
 import { Shared } from '@common/Shared';
 import browser, { Action as WebExtAction } from 'webextension-polyfill';
 
 export interface BrowserActionRotating {
-	image: HTMLImageElement | null;
-	canvas: HTMLCanvasElement | null;
-	context: CanvasRenderingContext2D | null;
+	image: ImageBitmap | null;
+	canvas: OffscreenCanvas | null;
+	context: OffscreenCanvasRenderingContext2D | null;
 	degrees: number;
 	canceled: boolean;
 }
 
 class _BrowserAction {
+	instance = Shared.manifestVersion === 3 ? browser.action : browser.browserAction;
 	currentIcon = browser.runtime.getURL('images/uts-icon-38.png');
 	rotating: BrowserActionRotating | null = null;
 
@@ -30,7 +32,7 @@ class _BrowserAction {
 
 	async setTitle(title = 'Universal Trakt Scrobbler'): Promise<void> {
 		if (Shared.pageType === 'background') {
-			await browser.browserAction.setTitle({ title });
+			await this.instance.setTitle({ title });
 		} else {
 			await Messaging.toExtension({ action: 'set-title', title });
 		}
@@ -43,7 +45,7 @@ class _BrowserAction {
 				await this.setStaticIcon();
 				await this.setRotatingIcon();
 			} else {
-				await browser.browserAction.setIcon({
+				await this.instance.setIcon({
 					path: this.currentIcon,
 				});
 			}
@@ -59,7 +61,7 @@ class _BrowserAction {
 				await this.setStaticIcon();
 				await this.setRotatingIcon();
 			} else {
-				await browser.browserAction.setIcon({
+				await this.instance.setIcon({
 					path: this.currentIcon,
 				});
 			}
@@ -70,18 +72,24 @@ class _BrowserAction {
 
 	async setRotatingIcon(): Promise<void> {
 		if (Shared.pageType === 'background') {
-			const image = document.createElement('img');
-			const canvas = document.createElement('canvas');
-			const context = canvas.getContext('2d');
+			const imageResponse = await Requests.fetch({
+				method: 'GET',
+				url: this.currentIcon,
+			});
+			const imageBlob = await imageResponse.blob();
+			const image = await createImageBitmap(imageBlob);
+			const canvas = new OffscreenCanvas(image.width, image.height);
+			const context = canvas.getContext('2d', {
+				willReadFrequently: true,
+			}) as OffscreenCanvasRenderingContext2D;
 			this.rotating = {
 				image,
 				canvas,
 				context,
 				degrees: 0,
 				canceled: false,
 			};
-			image.onload = () => void this.rotateIcon();
-			image.src = this.currentIcon;
+			await this.rotateIcon();
 		} else {
 			await Messaging.toExtension({ action: 'set-rotating-icon' });
 		}
@@ -114,7 +122,7 @@ class _BrowserAction {
 		context.rotate((degrees * Math.PI) / 180);
 		context.drawImage(image, -(image.width / 2), -(image.height / 2));
 
-		await browser.browserAction.setIcon({
+		await this.instance.setIcon({
 			imageData: context.getImageData(
 				0,
 				0,
@@ -133,7 +141,7 @@ class _BrowserAction {
 			this.rotating.degrees = 0;
 		}
 
-		window.setTimeout(() => void this.rotateIcon(), 30);
+		setTimeout(() => void this.rotateIcon(), 30);
 	}
 }
 

diff --git a/src/common/BrowserStorage.ts b/src/common/BrowserStorage.ts
@@ -22,7 +22,7 @@ export type StorageValuesV11 = Omit<StorageValuesV10, 'version'> & {
 	version?: 11;
 };
 
-export type StorageValuesV10 = Omit<StorageValuesV8, 'version' | 'options'> & {
+export type StorageValuesV10 = Omit<StorageValuesV9, 'version' | 'options'> & {
 	version?: 10;
 	options?: StorageValuesOptionsV4;
 };

diff --git a/src/common/Errors.ts b/src/common/Errors.ts
@@ -39,10 +39,14 @@ class _Errors {
 					environment: Shared.environment,
 				},
 			});
-			window.Rollbar = this.rollbar;
+			if (window) {
+				window.Rollbar = this.rollbar;
+			}
 		} else if (!allowRollbar && this.rollbar) {
 			delete this.rollbar;
-			delete window.Rollbar;
+			if (window) {
+				delete window.Rollbar;
+			}
 		}
 	}