fix: fix ESLint errors, reduce bundle size (#1002)

src/ts/background.ts

@@ -1,33 +1,33 @@
 import { ONBOARDING_PATH, RELEASE_NOTE_URL } from "./common/constants";
-import browser from "webextension-polyfill";
+import { type Runtime, i18n, runtime, tabs } from "webextension-polyfill";
 
 /**
  * This function is called when the extension is updated.
  * - If the extension is not under development, open the release note page.
  * @param details details of the update
  * @param isJapanese if the user's language is Japanese
  */
-const onUpdated = (details: browser.Runtime.OnInstalledDetailsType, isJapanese: boolean): void => {
+const onUpdated = (details: Runtime.OnInstalledDetailsType, isJapanese: boolean): void => {
     // Temporarily disable the release note page
     return;
     // Do nothing while development
-    if (details.previousVersion === browser.runtime.getManifest().version) return;
+    if (details.previousVersion === runtime.getManifest().version) return;
 
     const releaseNoteURL = isJapanese ? RELEASE_NOTE_URL.ja : RELEASE_NOTE_URL.en;
-    void browser.tabs.create({ url: releaseNoteURL });
+    void tabs.create({ url: releaseNoteURL });
 };
 
 /**
  * This function is called when the extension is installed.
  * This function opens the onboarding page.
  */
 const onInstalled = (): void => {
-    const url = browser.runtime.getURL(ONBOARDING_PATH);
-    void browser.tabs.create({ url });
+    const url = runtime.getURL(ONBOARDING_PATH);
+    void tabs.create({ url });
 };
 
-browser.runtime.onInstalled.addListener((details) => {
-    const isJapanese = browser.i18n.getUILanguage().toLowerCase().startsWith("ja");
+runtime.onInstalled.addListener((details) => {
+    const isJapanese = i18n.getUILanguage().toLowerCase().startsWith("ja");
 
     if (details.reason === "update") {
         onUpdated(details, isJapanese);

src/ts/browserAction/loadSettings.ts

@@ -4,6 +4,7 @@ import "../components/settingsItem";
 import "../components/settingsDescription";
 // eslint-disable-next-line import-x/no-unassigned-import
 import "../components/settingsSeparator";
+import { i18n, runtime, storage } from "webextension-polyfill";
 import { DEFAULT_SETTINGS } from "../common/defaultSettings";
 import { SETTINGS_ITEMS } from "./settingsItems";
 import type { Settings } from "../../types/common/settings";
@@ -15,15 +16,14 @@ import type { SettingsItem } from "../components/settingsItem";
 import type { SettingsSeparator } from "../components/settingsSeparator";
 import { TRANSLATION_ATTRIBUTE } from "../common/constants";
 import { Translator } from "../common/translator";
-import browser from "webextension-polyfill";
 import { isSettings } from "../../types/common/settings.guard";
 
 /**
  * Load settings from local storage.
  * @returns settings
  */
 const loadSettingsFromStorage = async (): Promise<Settings> => {
-    const settings = await browser.storage.local.get(DEFAULT_SETTINGS);
+    const settings = await storage.local.get(DEFAULT_SETTINGS);
     if (!isSettings(settings)) throw new Error("Failed to get settings from storage");
 
     return settings;
@@ -61,7 +61,7 @@ const createSettingsItem = (settingsName: string, translationKey: string, checke
     item.setAttribute(TRANSLATION_ATTRIBUTE, translationKey);
     item.checked = checked;
     item.addEventListener("change", () => {
-        void browser.storage.local.set({ [item.settingsName]: item.checked });
+        void storage.local.set({ [item.settingsName]: item.checked });
     });
 
     return item;
@@ -71,7 +71,7 @@ const createSettingsItem = (settingsName: string, translationKey: string, checke
  * Run translation.
  */
 const runTranslation = (): void => {
-    const translator = new Translator((key) => browser.i18n.getMessage(key), browser.runtime.getURL("image/"));
+    const translator = new Translator((key) => i18n.getMessage(key), runtime.getURL("image/"));
     translator.translateElements();
 };
 

src/ts/browserAction/loadVersion.ts

@@ -1,7 +1,7 @@
-import browser from "webextension-polyfill";
+import { runtime } from "webextension-polyfill";
 
 const loadVersion = (): void => {
-    const { version } = browser.runtime.getManifest();
+    const { version } = runtime.getManifest();
     const versionElement = document.getElementById("version-number");
     if (!versionElement) throw new Error("Failed to get #version-number element");
 

src/ts/contentScript.ts

@@ -1,17 +1,17 @@
 import { EVENT_GENERATOR_ID, EVENT_GENERATOR_SETTINGS_ATTRIBUTE } from "./common/constants";
+import { i18n, runtime, storage } from "webextension-polyfill";
 import { DEFAULT_SETTINGS } from "./common/defaultSettings";
 import { Translator } from "./common/translator";
-import browser from "webextension-polyfill";
 
 // eslint-disable-next-line max-statements
 const main = async (): Promise<void> => {
-    const settings = await browser.storage.local.get(DEFAULT_SETTINGS);
+    const settings = await storage.local.get(DEFAULT_SETTINGS);
 
     if (["pro.twitter.com", "pro.x.com"].includes(location.hostname) && !settings.enableOnXPro) return;
 
     const translator = new Translator(
-        (key, substitutions) => browser.i18n.getMessage(key, substitutions),
-        browser.runtime.getURL("image/")
+        (key, substitutions) => i18n.getMessage(key, substitutions),
+        runtime.getURL("image/")
     );
 
     const eventGenerator = document.createElement("div");
@@ -24,7 +24,7 @@ const main = async (): Promise<void> => {
     document.body.appendChild(eventGenerator);
 
     const pageScript = document.createElement("script");
-    pageScript.src = browser.runtime.getURL("js/pageScript.js");
+    pageScript.src = runtime.getURL("js/pageScript.js");
     document.body.appendChild(pageScript);
 };
 

src/ts/initialSetup.ts

@@ -1,7 +1,7 @@
 import { INSTRUCTION_URL, TRANSLATION_ATTRIBUTE } from "./common/constants";
+import { i18n, runtime, storage, tabs } from "webextension-polyfill";
 import type { Settings } from "../types/common/settings";
 import { Translator } from "./common/translator";
-import browser from "webextension-polyfill";
 
 interface InitialSetupItem {
     options: Array<{
@@ -125,10 +125,10 @@ const updateInstructionToCompletionMessage = (translator: Translator): void => {
 };
 
 const closeCurrentTab = async (): Promise<void> => {
-    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-    const [currentTab] = tabs;
+    const activeTabs = await tabs.query({ active: true, currentWindow: true });
+    const [currentTab] = activeTabs;
     if (!currentTab.id) throw new Error("no current tab");
-    void browser.tabs.remove(currentTab.id);
+    void tabs.remove(currentTab.id);
 };
 
 const showCompletionMessage = (buttonsOuter: Element, translator: Translator): void => {
@@ -138,8 +138,8 @@ const showCompletionMessage = (buttonsOuter: Element, translator: Translator): v
     const openUsagesPageButton = createButton("open", "../image/open_in_new.svg");
     openUsagesPageButton.addEventListener("click", () => {
         void closeCurrentTab();
-        const isJapanese = browser.i18n.getUILanguage().toLowerCase().startsWith("ja");
-        void browser.tabs.create({
+        const isJapanese = i18n.getUILanguage().toLowerCase().startsWith("ja");
+        void tabs.create({
             url: INSTRUCTION_URL[isJapanese ? "ja" : "en"]
         });
     });
@@ -164,8 +164,8 @@ const main = (): void => {
     if (!nextButton) throw new Error("no #next-button");
 
     const translator = new Translator(
-        (messageName, substitutions) => browser.i18n.getMessage(messageName, substitutions),
-        browser.runtime.getURL("image/")
+        (messageName, substitutions) => i18n.getMessage(messageName, substitutions),
+        runtime.getURL("image/")
     );
     translator.translateElements();
 
@@ -179,7 +179,7 @@ const main = (): void => {
         const { settingsKey } = selectedButton.dataset;
         const { settingsValue } = selectedButton.dataset;
         if (!settingsKey || !settingsValue) throw new Error("no settingsKey or settingsValue");
-        void browser.storage.local.set({ [settingsKey]: settingsValue === "true" });
+        void storage.local.set({ [settingsKey]: settingsValue === "true" });
 
         // eslint-disable-next-line no-magic-numbers
         if (setupItemIndex < INITIAL_SETUP_ITEMS.length - 1) {

src/ts/privacyPolicy.ts

@@ -1,5 +1,5 @@
+import { i18n, runtime } from "webextension-polyfill";
 import { Translator } from "./common/translator";
-import browser from "webextension-polyfill";
 
-const translator = new Translator((key) => browser.i18n.getMessage(key), browser.runtime.getURL("image/"));
+const translator = new Translator((key) => i18n.getMessage(key), runtime.getURL("image/"));
 translator.translateElements();