Use manifest v3 for Chrome, switch axios for ky

Author: lexesj

package.json

@@ -97,10 +97,11 @@
     "@babel/runtime": "^7.17.9",
     "@headlessui/react": "^1.6.1",
     "@reduxjs/toolkit": "^1.8.1",
-    "axios": "^0.27.2",
     "entities": "^4.3.0",
     "glob-to-regexp": "^0.4.1",
+    "ky": "^0.30.0",
     "lodash": "^4.17.21",
+    "qs": "^6.10.3",
     "react": "^18.1.0",
     "react-color": "^2.19.3",
     "react-device-detect": "^2.2.2",

src/api/anilist-http-client/anilist-http-client.ts

@@ -29,7 +29,7 @@ export class AnilistHttpClient extends BaseHttpClient {
       variables,
     };
 
-    const response = await this.request({ route, method: 'POST', data });
+    const response = await this.request({ route, method: 'POST', json: data });
 
     return response.data;
   }

src/api/aniskip-http-client/aniskip-http-client.ts

@@ -91,9 +91,11 @@ export class AniskipHttpClient extends BaseHttpClient {
       submitterId,
     };
 
-    const response = await this.request<typeof data, PostResponseFromSkipTimes>(
-      { route, method: 'POST', data }
-    );
+    const response = await this.request<PostResponseFromSkipTimes>({
+      route,
+      method: 'POST',
+      json: data,
+    });
     const json = response.data;
 
     if (response.ok) {
@@ -118,7 +120,7 @@ export class AniskipHttpClient extends BaseHttpClient {
       voteType: type,
     };
 
-    const response = await this.request({ route, method: 'POST', data });
+    const response = await this.request({ route, method: 'POST', json: data });
 
     if (response.status === 429) {
       throw new AniskipHttpClientError('Rate limited', 'vote/rate-limited');

src/api/base-http-client/base-http-client.ts

@@ -1,7 +1,9 @@
-import axios from 'axios';
+import ky from 'ky';
+import QueryString from 'qs';
 import { browser } from 'webextension-polyfill-ts';
 import { Response, HttpClient, Config } from './base-http-client.types';
 import { Message } from '../../scripts/background';
+import { parseResponse } from '../../utils/http';
 
 export abstract class BaseHttpClient implements HttpClient {
   baseUrl: string;
@@ -10,34 +12,39 @@ export abstract class BaseHttpClient implements HttpClient {
     this.baseUrl = baseUrl;
   }
 
-  async request<T = any, D = any>(
-    { route, ...rest }: Config<T>,
+  async request<D = any>(
+    { route, params, ...rest }: Config,
     isCallingBackgroundScript: boolean = true
   ): Promise<Response<D>> {
     const url = `${this.baseUrl}${route}`;
+    const config = {
+      ...(params && {
+        searchParams: QueryString.stringify(params, { encodeValuesOnly: true }),
+      }),
+      ...rest,
+    };
 
     if (isCallingBackgroundScript) {
       const response = await browser.runtime.sendMessage({
         type: 'fetch',
-        payload: { url, ...rest },
+        payload: { url, config },
       } as Message);
 
       return response;
     }
 
     let response;
-
     try {
-      const succesfulResponse = await axios({ url, ...rest });
+      const succesfulResponse = await ky(url, config);
 
       response = {
-        data: succesfulResponse.data,
+        data: await parseResponse<D>(succesfulResponse),
         status: succesfulResponse.status,
         ok: true,
       };
     } catch (err: any) {
       response = {
-        data: err.response.data,
+        data: await parseResponse<D>(err.response),
         status: err.response.status,
         ok: false,
       };

src/api/base-http-client/base-http-client.types.ts

@@ -1,4 +1,4 @@
-import { AxiosRequestConfig } from 'axios';
+import { Options } from 'ky';
 
 export type Response<D = any> = {
   data: D;
@@ -15,10 +15,10 @@ export type HttpClient = {
    * @param config Axios config.
    * @param isCallingBackgroundScript Proxy the HTTP request using the background script.
    */
-  request<T = any, D = any>(
-    config: Config<T>,
+  request<D = any>(
+    config: Config,
     isCallingBackgroundScript?: boolean
   ): Promise<Response<D>>;
 };
 
-export type Config<T = any> = AxiosRequestConfig<T> & { route: string };
+export type Config = Options & { route: string; params?: any };

src/api/crunchyroll-beta-http-client/crunchyroll-beta-http-client.ts

@@ -54,8 +54,8 @@ export class CrunchyrollBetaHttpClient extends BaseHttpClient {
       'Content-Type': 'application/x-www-form-urlencoded',
     };
 
-    const authV1Response = await super.request<string, PostResponseFromAuthV1>(
-      { route, method: 'POST', data, headers, withCredentials: true },
+    const authV1Response = await super.request<PostResponseFromAuthV1>(
+      { route, method: 'POST', body: data, headers, credentials: 'include' },
       false
     );
 
@@ -66,10 +66,10 @@ export class CrunchyrollBetaHttpClient extends BaseHttpClient {
       Authorization: `Bearer ${authV1Response.data.access_token}`,
     };
 
-    const authV2Response = await super.request<
-      undefined,
-      GetResponseFromIndexV2
-    >({ route, headers }, false);
+    const authV2Response = await super.request<GetResponseFromIndexV2>(
+      { route, headers },
+      false
+    );
 
     const { cms_beta: cmsBeta } = authV2Response.data;
 
@@ -80,11 +80,11 @@ export class CrunchyrollBetaHttpClient extends BaseHttpClient {
     this.isAuthenticated = true;
   }
 
-  async request<T = any, D = any>({
+  async request<D = any>({
     route,
     params,
     ...rest
-  }: Config<T>): Promise<Response<D>> {
+  }: Config): Promise<Response<D>> {
     await this.authenticate();
 
     const authenticatedRoute = `/cms/v2${this.bucket}${route}`;

src/scripts/background/script.ts

@@ -1,14 +1,14 @@
 import { browser, Runtime } from 'webextension-polyfill-ts';
 import { v4 as uuidv4 } from 'uuid';
-import axios from 'axios';
+import ky from 'ky';
 import {
   LocalOptions,
   Message,
   DEFAULT_LOCAL_OPTIONS,
   DEFAULT_SYNC_OPTIONS,
   SyncOptions,
 } from './types';
-import { waitForMessage } from '../../utils';
+import { parseResponse, waitForMessage } from '../../utils';
 
 /**
  * Relay messages between content scripts.
@@ -30,18 +30,19 @@ const messageHandler = (
     case 'fetch': {
       return (async (): Promise<any> => {
         try {
-          const response = await axios(message.payload);
+          const { url, config } = message.payload;
+          const response = await ky(url, config);
 
           return {
-            data: response.data,
+            data: await parseResponse(response),
             status: response.status,
-            ok: true,
+            ok: response.ok,
           };
         } catch (err: any) {
           return {
-            data: err.response.data,
+            data: await parseResponse(err.response),
             status: err.response.status,
-            ok: false,
+            ok: err.response.ok,
           };
         }
       })();

src/utils/http.ts

@@ -0,0 +1,12 @@
+/**
+ * Parses the HTTP response according to its type.
+ *
+ * @param response HTTP response object.
+ */
+export const parseResponse = async <T>(response: Response): Promise<T> => {
+  if (response.headers.get('content-type')?.includes('application/json')) {
+    return (await response.json()) as T;
+  }
+
+  return (await response.text()) as unknown as T;
+};

src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './http';
 export * from './keybinds';
 export * from './message';
 export * from './page';

webpack/manifest.js

@@ -1,38 +1,35 @@
-const { merge } = require('lodash');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { default: merge } = require('webpack-merge');
 const fs = require('fs');
 const path = require('path');
 const packageJson = require('../package.json');
 
 const manifestTemplate = {
-  manifest_version: 2,
   name: packageJson.extensionName,
   version: packageJson.version,
   description: packageJson.description,
   options_ui: {
     page: 'options.html',
     open_in_tab: true,
   },
-  browser_action: {
-    default_popup: 'popup.html',
-  },
-  background: {
-    scripts: ['background-script.js'],
-  },
-  web_accessible_resources: ['window-proxy-script.js'],
-  permissions: [
-    'storage',
-    '*://api.aniskip.com/*',
-    '*://api.malsync.moe/*',
-    '*://graphql.anilist.co/*',
-    '*://beta-api.crunchyroll.com/*',
-  ],
+  permissions: ['storage'],
   icons: {
     16: 'icon_16.png',
     48: 'icon_48.png',
     128: 'icon_128.png',
   },
 };
 
+const apiPermissions = [
+  '*://api.aniskip.com/*',
+  '*://api.malsync.moe/*',
+  '*://graphql.anilist.co/*',
+  '*://beta-api.crunchyroll.com/*',
+];
+
+const backgroundScript = 'background-script.js';
+const windowProxyScript = 'window-proxy-script.js';
+
 const browser = process.env.BROWSER;
 
 const getPageUrls = () => {
@@ -97,26 +94,42 @@ module.exports = () => {
   switch (browser) {
     case 'chromium':
       return merge(manifestTemplate, {
-        options_ui: {
-          chrome_style: false,
+        manifest_version: 3,
+        background: {
+          service_worker: backgroundScript,
         },
-        browser_action: {
+        action: {
+          default_popup: 'popup.html',
           chrome_style: false,
         },
+        host_permissions: apiPermissions,
+        web_accessible_resources: [
+          {
+            resources: [windowProxyScript],
+            matches: ['https://beta.crunchyroll.com/*'],
+          },
+        ],
       });
     case 'firefox':
       return merge(manifestTemplate, {
+        manifest_version: 2,
+        background: {
+          scripts: [backgroundScript],
+        },
         options_ui: {
           browser_style: false,
         },
         browser_action: {
+          default_popup: 'popup.html',
           browser_style: false,
         },
         browser_specific_settings: {
           gecko: {
             id: '{c67645fa-ad86-4b2f-ab7a-67fc5f3e9f5a}',
           },
         },
+        permissions: apiPermissions,
+        web_accessible_resources: [windowProxyScript],
       });
     default:
       throw new Error(`Invalid browser type '${browser}'`);