Modernize codebase

- Use ES modules
- Remove vendored libs and build them from npm using esbuild
- Switch from JSZip to zip.js

36 files changed, 171 insertions, 154 deletions

diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index c66dfece..0ad047aa 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -16,14 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * AnkiConnect
- * AnkiUtil
- * ObjectPropertyAccessor
- * SelectorObserver
- */
-
-class AnkiController {
+import {AnkiConnect} from '../../comm/anki-connect.js';
+import {EventListenerCollection, log} from '../../core.js';
+import {AnkiUtil} from '../../data/anki-util.js';
+import {SelectorObserver} from '../../dom/selector-observer.js';
+import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js';
+import {yomichan} from '../../yomichan.js';
+
+export class AnkiController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._ankiConnect = new AnkiConnect();
diff --git a/ext/js/pages/settings/anki-templates-controller.js b/ext/js/pages/settings/anki-templates-controller.js
index e66def9f..83b1b0bb 100644
--- a/ext/js/pages/settings/anki-templates-controller.js
+++ b/ext/js/pages/settings/anki-templates-controller.js
@@ -16,12 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * AnkiNoteBuilder
- * JapaneseUtil
- */
+import {isObject} from '../../core.js';
+import {AnkiNoteBuilder} from '../../data/anki-note-builder.js';
+import {JapaneseUtil} from '../../language/sandbox/japanese-util.js';
+import {yomichan} from '../../yomichan.js';
 
-class AnkiTemplatesController {
+export class AnkiTemplatesController {
     constructor(settingsController, modalController, ankiController) {
         this._settingsController = settingsController;
         this._modalController = modalController;
diff --git a/ext/js/pages/settings/audio-controller.js b/ext/js/pages/settings/audio-controller.js
index 82caff74..fb54ee6b 100644
--- a/ext/js/pages/settings/audio-controller.js
+++ b/ext/js/pages/settings/audio-controller.js
@@ -16,11 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * AudioSystem
- */
+import {EventDispatcher, EventListenerCollection} from '../../core.js';
+import {AudioSystem} from '../../media/audio-system.js';
 
-class AudioController extends EventDispatcher {
+export class AudioController extends EventDispatcher {
     constructor(settingsController, modalController) {
         super();
         this._settingsController = settingsController;
diff --git a/ext/js/pages/settings/backup-controller.js b/ext/js/pages/settings/backup-controller.js
index bd089fb1..e429f9c7 100644
--- a/ext/js/pages/settings/backup-controller.js
+++ b/ext/js/pages/settings/backup-controller.js
@@ -16,14 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * ArrayBufferUtil
- * Dexie
- * DictionaryController
- * OptionsUtil
- */
-
-class BackupController {
+import * as Dexie from '../../../lib/dexie.js';
+import {isObject, log} from '../../core.js';
+import {OptionsUtil} from '../../data/options-util.js';
+import {ArrayBufferUtil} from '../../data/sandbox/array-buffer-util.js';
+import {yomichan} from '../../yomichan.js';
+import {DictionaryController} from './dictionary-controller.js';
+
+export class BackupController {
     constructor(settingsController, modalController) {
         this._settingsController = settingsController;
         this._modalController = modalController;
diff --git a/ext/js/pages/settings/collapsible-dictionary-controller.js b/ext/js/pages/settings/collapsible-dictionary-controller.js
index 949df0de..37d5e6c9 100644
--- a/ext/js/pages/settings/collapsible-dictionary-controller.js
+++ b/ext/js/pages/settings/collapsible-dictionary-controller.js
@@ -16,7 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class CollapsibleDictionaryController {
+import {EventListenerCollection} from '../../core.js';
+import {yomichan} from '../../yomichan.js';
+
+export class CollapsibleDictionaryController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._getDictionaryInfoToken = null;
@@ -155,4 +158,4 @@ class CollapsibleDictionaryController {
             select.value = value;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js
index 3a70a614..a9403e39 100644
--- a/ext/js/pages/settings/dictionary-controller.js
+++ b/ext/js/pages/settings/dictionary-controller.js
@@ -16,6 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {EventListenerCollection, log} from '../../core.js';
+import {DictionaryWorker} from '../../language/dictionary-worker.js';
+import {yomichan} from '../../yomichan.js';
+
 /* global
  * DictionaryWorker
  */
@@ -245,7 +249,7 @@ class DictionaryExtraInfo {
     }
 }
 
-class DictionaryController {
+export class DictionaryController {
     constructor(settingsController, modalController, statusFooter) {
         this._settingsController = settingsController;
         this._modalController = modalController;
diff --git a/ext/js/pages/settings/dictionary-import-controller.js b/ext/js/pages/settings/dictionary-import-controller.js
index 4708ee5f..57fe1cd4 100644
--- a/ext/js/pages/settings/dictionary-import-controller.js
+++ b/ext/js/pages/settings/dictionary-import-controller.js
@@ -16,12 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * DictionaryController
- * DictionaryWorker
- */
+import {deserializeError, log} from '../../core.js';
+import {DictionaryWorker} from '../../language/dictionary-worker.js';
+import {yomichan} from '../../yomichan.js';
+import {DictionaryController} from './dictionary-controller.js';
 
-class DictionaryImportController {
+export class DictionaryImportController {
     constructor(settingsController, modalController, statusFooter) {
         this._settingsController = settingsController;
         this._modalController = modalController;
diff --git a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js
index 3ac036a3..6e84fa0e 100644
--- a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js
+++ b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js
@@ -16,12 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * HotkeyUtil
- * KeyboardMouseInputField
- */
+import {EventListenerCollection, isObject} from '../../core.js';
+import {HotkeyUtil} from '../../input/hotkey-util.js';
+import {yomichan} from '../../yomichan.js';
+import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
-class ExtensionKeyboardShortcutController {
+export class ExtensionKeyboardShortcutController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._resetButton = null;
diff --git a/ext/js/pages/settings/generic-setting-controller.js b/ext/js/pages/settings/generic-setting-controller.js
index c416d1a7..c4104874 100644
--- a/ext/js/pages/settings/generic-setting-controller.js
+++ b/ext/js/pages/settings/generic-setting-controller.js
@@ -16,12 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* globals
- * DOMDataBinder
- * DocumentUtil
- */
+import {deserializeError, isObject} from '../../core.js';
+import {DocumentUtil} from '../../dom/document-util.js';
+import {DOMDataBinder} from '../../dom/dom-data-binder.js';
 
-class GenericSettingController {
+export class GenericSettingController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._defaultScope = 'profile';
diff --git a/ext/js/pages/settings/keyboard-mouse-input-field.js b/ext/js/pages/settings/keyboard-mouse-input-field.js
index d4680eb1..aee01a36 100644
--- a/ext/js/pages/settings/keyboard-mouse-input-field.js
+++ b/ext/js/pages/settings/keyboard-mouse-input-field.js
@@ -16,12 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * DocumentUtil
- * HotkeyUtil
- */
+import {EventDispatcher, EventListenerCollection} from '../../core.js';
+import {DocumentUtil} from '../../dom/document-util.js';
+import {HotkeyUtil} from '../../input/hotkey-util.js';
 
-class KeyboardMouseInputField extends EventDispatcher {
+export class KeyboardMouseInputField extends EventDispatcher {
     constructor(inputNode, mouseButton, os, isPointerTypeSupported=null) {
         super();
         this._inputNode = inputNode;
diff --git a/ext/js/pages/settings/keyboard-shortcuts-controller.js b/ext/js/pages/settings/keyboard-shortcuts-controller.js
index e1c00080..3f91d2f9 100644
--- a/ext/js/pages/settings/keyboard-shortcuts-controller.js
+++ b/ext/js/pages/settings/keyboard-shortcuts-controller.js
@@ -16,13 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * DocumentUtil
- * KeyboardMouseInputField
- * ObjectPropertyAccessor
- */
+import {EventListenerCollection} from '../../core.js';
+import {DocumentUtil} from '../../dom/document-util.js';
+import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js';
+import {yomichan} from '../../yomichan.js';
+import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
-class KeyboardShortcutController {
+export class KeyboardShortcutController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._entries = [];
diff --git a/ext/js/pages/settings/mecab-controller.js b/ext/js/pages/settings/mecab-controller.js
index 8b00c72d..6f9f15ed 100644
--- a/ext/js/pages/settings/mecab-controller.js
+++ b/ext/js/pages/settings/mecab-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class MecabController {
+import {yomichan} from '../../yomichan.js';
+
+export class MecabController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._testButton = null;
diff --git a/ext/js/pages/settings/modal-controller.js b/ext/js/pages/settings/modal-controller.js
index 645485d5..517a19b3 100644
--- a/ext/js/pages/settings/modal-controller.js
+++ b/ext/js/pages/settings/modal-controller.js
@@ -16,11 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * Modal
- */
+import {Modal} from './modal.js';
 
-class ModalController {
+export class ModalController {
     constructor() {
         this._modals = [];
         this._modalMap = new Map();
diff --git a/ext/js/pages/settings/modal.js b/ext/js/pages/settings/modal.js
index 74e22fa4..4d1c098d 100644
--- a/ext/js/pages/settings/modal.js
+++ b/ext/js/pages/settings/modal.js
@@ -16,11 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * PanelElement
- */
+import {PanelElement} from '../../dom/panel-element.js';
 
-class Modal extends PanelElement {
+export class Modal extends PanelElement {
     constructor(node) {
         super({
             node,
diff --git a/ext/js/pages/settings/nested-popups-controller.js b/ext/js/pages/settings/nested-popups-controller.js
index a46c8f16..b9621ef0 100644
--- a/ext/js/pages/settings/nested-popups-controller.js
+++ b/ext/js/pages/settings/nested-popups-controller.js
@@ -16,11 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * DocumentUtil
- */
+import {DocumentUtil} from '../../dom/document-util.js';
 
-class NestedPopupsController {
+export class NestedPopupsController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._popupNestingMaxDepth = 0;
diff --git a/ext/js/pages/settings/permissions-origin-controller.js b/ext/js/pages/settings/permissions-origin-controller.js
index e31f75d1..d234faa0 100644
--- a/ext/js/pages/settings/permissions-origin-controller.js
+++ b/ext/js/pages/settings/permissions-origin-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class PermissionsOriginController {
+import {EventListenerCollection} from '../../core.js';
+
+export class PermissionsOriginController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._originContainer = null;
diff --git a/ext/js/pages/settings/permissions-toggle-controller.js b/ext/js/pages/settings/permissions-toggle-controller.js
index 8bf9dc18..0e486c1e 100644
--- a/ext/js/pages/settings/permissions-toggle-controller.js
+++ b/ext/js/pages/settings/permissions-toggle-controller.js
@@ -16,11 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * ObjectPropertyAccessor
- */
+import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js';
 
-class PermissionsToggleController {
+export class PermissionsToggleController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._toggles = null;
diff --git a/ext/js/pages/settings/persistent-storage-controller.js b/ext/js/pages/settings/persistent-storage-controller.js
index 45169240..1c3bc276 100644
--- a/ext/js/pages/settings/persistent-storage-controller.js
+++ b/ext/js/pages/settings/persistent-storage-controller.js
@@ -16,7 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class PersistentStorageController {
+import {isObject} from '../../core.js';
+import {yomichan} from '../../yomichan.js';
+
+export class PersistentStorageController {
     constructor() {
         this._persistentStorageCheckbox = false;
     }
diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js
index 6f52613b..a0cb696e 100644
--- a/ext/js/pages/settings/popup-preview-controller.js
+++ b/ext/js/pages/settings/popup-preview-controller.js
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class PopupPreviewController {
+export class PopupPreviewController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
diff --git a/ext/js/pages/settings/popup-preview-frame-main.js b/ext/js/pages/settings/popup-preview-frame-main.js
index 4a2e5fda..d10910fc 100644
--- a/ext/js/pages/settings/popup-preview-frame-main.js
+++ b/ext/js/pages/settings/popup-preview-frame-main.js
@@ -16,6 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {PopupFactory} from '../../app/popup-factory.js';
+import {log} from '../../core.js';
+import {HotkeyHandler} from '../../input/hotkey-handler.js';
+import {yomichan} from '../../yomichan.js';
+import {PopupPreviewFrame} from './popup-preview-frame.js';
+
 /* global
  * HotkeyHandler
  * PopupFactory
diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js
index f24e1485..c0d4358d 100644
--- a/ext/js/pages/settings/popup-preview-frame.js
+++ b/ext/js/pages/settings/popup-preview-frame.js
@@ -16,13 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * Frontend
- * TextSourceRange
- * wanakana
- */
+import * as wanakana from '../../../lib/wanakana.js';
+import {Frontend} from '../../app/frontend.js';
+import {TextSourceRange} from '../../dom/text-source-range.js';
+import {yomichan} from '../../yomichan.js';
 
-class PopupPreviewFrame {
+export class PopupPreviewFrame {
     constructor(tabId, frameId, popupFactory, hotkeyHandler) {
         this._tabId = tabId;
         this._frameId = frameId;
diff --git a/ext/js/pages/settings/popup-window-controller.js b/ext/js/pages/settings/popup-window-controller.js
index af74de4b..6f4d9ec3 100644
--- a/ext/js/pages/settings/popup-window-controller.js
+++ b/ext/js/pages/settings/popup-window-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class PopupWindowController {
+import {yomichan} from '../../yomichan.js';
+
+export class PopupWindowController {
     prepare() {
         const testLink = document.querySelector('#test-window-open-link');
         testLink.addEventListener('click', this._onTestWindowOpenLinkClick.bind(this), false);
diff --git a/ext/js/pages/settings/profile-conditions-ui.js b/ext/js/pages/settings/profile-conditions-ui.js
index 6865f27b..bd790b1b 100644
--- a/ext/js/pages/settings/profile-conditions-ui.js
+++ b/ext/js/pages/settings/profile-conditions-ui.js
@@ -16,11 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * KeyboardMouseInputField
- */
+import {EventDispatcher, EventListenerCollection} from '../../core.js';
+import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
-class ProfileConditionsUI extends EventDispatcher {
+export class ProfileConditionsUI extends EventDispatcher {
     constructor(settingsController) {
         super();
         this._settingsController = settingsController;
diff --git a/ext/js/pages/settings/profile-controller.js b/ext/js/pages/settings/profile-controller.js
index d9e25fcf..a4a64e60 100644
--- a/ext/js/pages/settings/profile-controller.js
+++ b/ext/js/pages/settings/profile-controller.js
@@ -16,11 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * ProfileConditionsUI
- */
+import {clone, EventListenerCollection} from '../../core.js';
+import {yomichan} from '../../yomichan.js';
+import {ProfileConditionsUI} from './profile-conditions-ui.js';
 
-class ProfileController {
+export class ProfileController {
     constructor(settingsController, modalController) {
         this._settingsController = settingsController;
         this._modalController = modalController;
diff --git a/ext/js/pages/settings/recommended-permissions-controller.js b/ext/js/pages/settings/recommended-permissions-controller.js
index 3d25d5eb..e04dbdf7 100644
--- a/ext/js/pages/settings/recommended-permissions-controller.js
+++ b/ext/js/pages/settings/recommended-permissions-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class RecommendedPermissionsController {
+import {EventListenerCollection} from '../../core.js';
+
+export class RecommendedPermissionsController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._originToggleNodes = null;
diff --git a/ext/js/pages/settings/scan-inputs-controller.js b/ext/js/pages/settings/scan-inputs-controller.js
index 3ee6aed0..ea8d500a 100644
--- a/ext/js/pages/settings/scan-inputs-controller.js
+++ b/ext/js/pages/settings/scan-inputs-controller.js
@@ -16,11 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * KeyboardMouseInputField
- */
+import {EventListenerCollection} from '../../core.js';
+import {yomichan} from '../../yomichan.js';
+import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
-class ScanInputsController {
+export class ScanInputsController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._os = null;
diff --git a/ext/js/pages/settings/scan-inputs-simple-controller.js b/ext/js/pages/settings/scan-inputs-simple-controller.js
index 8edb9a86..79ffb773 100644
--- a/ext/js/pages/settings/scan-inputs-simple-controller.js
+++ b/ext/js/pages/settings/scan-inputs-simple-controller.js
@@ -16,12 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * HotkeyUtil
- * ScanInputsController
- */
+import {HotkeyUtil} from '../../input/hotkey-util.js';
+import {yomichan} from '../../yomichan.js';
+import {ScanInputsController} from './scan-inputs-controller.js';
 
-class ScanInputsSimpleController {
+export class ScanInputsSimpleController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._middleMouseButtonScan = null;
@@ -244,4 +243,4 @@ class ScanInputsSimpleController {
         this._mainScanModifierKeyInputHasOther = !hasMainScanInput;
         this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther);
     }
-}
\ No newline at end of file
+}
diff --git a/ext/js/pages/settings/secondary-search-dictionary-controller.js b/ext/js/pages/settings/secondary-search-dictionary-controller.js
index f8e2fb78..30575526 100644
--- a/ext/js/pages/settings/secondary-search-dictionary-controller.js
+++ b/ext/js/pages/settings/secondary-search-dictionary-controller.js
@@ -16,7 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class SecondarySearchDictionaryController {
+import {EventListenerCollection} from '../../core.js';
+import {yomichan} from '../../yomichan.js';
+
+export class SecondarySearchDictionaryController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._getDictionaryInfoToken = null;
@@ -91,4 +94,4 @@ class SecondarySearchDictionaryController {
         const options = await this._settingsController.getOptions();
         this._onOptionsChanged({options});
     }
-}
\ No newline at end of file
+}
diff --git a/ext/js/pages/settings/sentence-termination-characters-controller.js b/ext/js/pages/settings/sentence-termination-characters-controller.js
index a243d2f8..f901b82c 100644
--- a/ext/js/pages/settings/sentence-termination-characters-controller.js
+++ b/ext/js/pages/settings/sentence-termination-characters-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class SentenceTerminationCharactersController {
+import {EventListenerCollection} from '../../core.js';
+
+export class SentenceTerminationCharactersController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._entries = [];
diff --git a/ext/js/pages/settings/settings-controller.js b/ext/js/pages/settings/settings-controller.js
index f27135c4..6f83c4c0 100644
--- a/ext/js/pages/settings/settings-controller.js
+++ b/ext/js/pages/settings/settings-controller.js
@@ -16,13 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * HtmlTemplateCollection
- * OptionsUtil
- * PermissionsUtil
- */
+import {EventDispatcher, EventListenerCollection, generateId, isObject} from '../../core.js';
+import {OptionsUtil} from '../../data/options-util.js';
+import {PermissionsUtil} from '../../data/permissions-util.js';
+import {HtmlTemplateCollection} from '../../dom/html-template-collection.js';
+import {yomichan} from '../../yomichan.js';
 
-class SettingsController extends EventDispatcher {
+export class SettingsController extends EventDispatcher {
     constructor() {
         super();
         this._profileIndex = 0;
diff --git a/ext/js/pages/settings/settings-display-controller.js b/ext/js/pages/settings/settings-display-controller.js
index 3f1f6b6b..e23e355d 100644
--- a/ext/js/pages/settings/settings-display-controller.js
+++ b/ext/js/pages/settings/settings-display-controller.js
@@ -16,13 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * DocumentUtil
- * PopupMenu
- * SelectorObserver
- */
+import {DocumentUtil} from '../../dom/document-util.js';
+import {PopupMenu} from '../../dom/popup-menu.js';
+import {SelectorObserver} from '../../dom/selector-observer.js';
 
-class SettingsDisplayController {
+export class SettingsDisplayController {
     constructor(settingsController, modalController) {
         this._settingsController = settingsController;
         this._modalController = modalController;
diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js
index a4832220..1cd0b0a9 100644
--- a/ext/js/pages/settings/settings-main.js
+++ b/ext/js/pages/settings/settings-main.js
@@ -16,38 +16,38 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * AnkiController
- * AnkiTemplatesController
- * AudioController
- * BackupController
- * CollapsibleDictionaryController
- * DictionaryController
- * DictionaryImportController
- * DocumentFocusController
- * ExtensionContentController
- * ExtensionKeyboardShortcutController
- * GenericSettingController
- * KeyboardShortcutController
- * MecabController
- * ModalController
- * NestedPopupsController
- * PermissionsToggleController
- * PersistentStorageController
- * PopupPreviewController
- * PopupWindowController
- * ProfileController
- * ScanInputsController
- * ScanInputsSimpleController
- * SecondarySearchDictionaryController
- * SentenceTerminationCharactersController
- * SettingsController
- * SettingsDisplayController
- * SortFrequencyDictionaryController
- * StatusFooter
- * StorageController
- * TranslationTextReplacementsController
- */
+import {log} from '../../core.js';
+import {DocumentFocusController} from '../../dom/document-focus-controller.js';
+import {yomichan} from '../../yomichan.js';
+import {ExtensionContentController} from '../common/extension-content-controller.js';
+import {AnkiController} from './anki-controller.js';
+import {AnkiTemplatesController} from './anki-templates-controller.js';
+import {AudioController} from './audio-controller.js';
+import {BackupController} from './backup-controller.js';
+import {CollapsibleDictionaryController} from './collapsible-dictionary-controller.js';
+import {DictionaryController} from './dictionary-controller.js';
+import {DictionaryImportController} from './dictionary-import-controller.js';
+import {ExtensionKeyboardShortcutController} from './extension-keyboard-shortcuts-controller.js';
+import {GenericSettingController} from './generic-setting-controller.js';
+import {KeyboardShortcutController} from './keyboard-shortcuts-controller.js';
+import {MecabController} from './mecab-controller.js';
+import {ModalController} from './modal-controller.js';
+import {NestedPopupsController} from './nested-popups-controller.js';
+import {PermissionsToggleController} from './permissions-toggle-controller.js';
+import {PersistentStorageController} from './persistent-storage-controller.js';
+import {PopupPreviewController} from './popup-preview-controller.js';
+import {PopupWindowController} from './popup-window-controller.js';
+import {ProfileController} from './profile-controller.js';
+import {ScanInputsController} from './scan-inputs-controller.js';
+import {ScanInputsSimpleController} from './scan-inputs-simple-controller.js';
+import {SecondarySearchDictionaryController} from './secondary-search-dictionary-controller.js';
+import {SentenceTerminationCharactersController} from './sentence-termination-characters-controller.js';
+import {SettingsController} from './settings-controller.js';
+import {SettingsDisplayController} from './settings-display-controller.js';
+import {SortFrequencyDictionaryController} from './sort-frequency-dictionary-controller.js';
+import {StatusFooter} from './status-footer.js';
+import {StorageController} from './storage-controller.js';
+import {TranslationTextReplacementsController} from './translation-text-replacements-controller.js';
 
 async function setupGenericSettingsController(genericSettingController) {
     await genericSettingController.prepare();
diff --git a/ext/js/pages/settings/sort-frequency-dictionary-controller.js b/ext/js/pages/settings/sort-frequency-dictionary-controller.js
index 9a3fc237..c946400f 100644
--- a/ext/js/pages/settings/sort-frequency-dictionary-controller.js
+++ b/ext/js/pages/settings/sort-frequency-dictionary-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class SortFrequencyDictionaryController {
+import {yomichan} from '../../yomichan.js';
+
+export class SortFrequencyDictionaryController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._sortFrequencyDictionarySelect = null;
diff --git a/ext/js/pages/settings/status-footer.js b/ext/js/pages/settings/status-footer.js
index 5c6ecbc8..6c64794f 100644
--- a/ext/js/pages/settings/status-footer.js
+++ b/ext/js/pages/settings/status-footer.js
@@ -16,11 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * PanelElement
- */
+import {PanelElement} from '../../dom/panel-element.js';
 
-class StatusFooter extends PanelElement {
+export class StatusFooter extends PanelElement {
     constructor(node) {
         super({
             node,
diff --git a/ext/js/pages/settings/storage-controller.js b/ext/js/pages/settings/storage-controller.js
index 49ee7361..8bc63725 100644
--- a/ext/js/pages/settings/storage-controller.js
+++ b/ext/js/pages/settings/storage-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class StorageController {
+import {yomichan} from '../../yomichan.js';
+
+export class StorageController {
     constructor(persistentStorageController) {
         this._persistentStorageController = persistentStorageController;
         this._mostRecentStorageEstimate = null;
diff --git a/ext/js/pages/settings/translation-text-replacements-controller.js b/ext/js/pages/settings/translation-text-replacements-controller.js
index 1a98c406..4a860b52 100644
--- a/ext/js/pages/settings/translation-text-replacements-controller.js
+++ b/ext/js/pages/settings/translation-text-replacements-controller.js
@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-class TranslationTextReplacementsController {
+import {EventListenerCollection} from '../../core.js';
+
+export class TranslationTextReplacementsController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._entryContainer = null;