Merge pull request #339 from toasted-nutbread/type-annotations

Type annotations

36 files changed, 3610 insertions, 781 deletions

diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index 8164b8f6..05bfdadc 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -18,15 +18,22 @@
 
 import {AnkiConnect} from '../../comm/anki-connect.js';
 import {EventListenerCollection, log} from '../../core.js';
+import {ExtensionError} from '../../core/extension-error.js';
 import {AnkiUtil} from '../../data/anki-util.js';
 import {SelectorObserver} from '../../dom/selector-observer.js';
 import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js';
 import {yomitan} from '../../yomitan.js';
 
 export class AnkiController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {AnkiConnect} */
         this._ankiConnect = new AnkiConnect();
+        /** @type {SelectorObserver<AnkiCardController>} */
         this._selectorObserver = new SelectorObserver({
             selector: '.anki-card',
             ignoreSelector: null,
@@ -34,52 +41,74 @@ export class AnkiController {
             onRemoved: this._removeCardController.bind(this),
             isStale: this._isCardControllerStale.bind(this)
         });
+        /** @type {Intl.Collator} */
         this._stringComparer = new Intl.Collator(); // Locale does not matter
+        /** @type {?Promise<import('anki-controller').AnkiData>} */
         this._getAnkiDataPromise = null;
+        /** @type {?HTMLElement} */
         this._ankiErrorContainer = null;
+        /** @type {?HTMLElement} */
         this._ankiErrorMessageNode = null;
+        /** @type {string} */
         this._ankiErrorMessageNodeDefaultContent = '';
+        /** @type {?HTMLElement} */
         this._ankiErrorMessageDetailsNode = null;
+        /** @type {?HTMLElement} */
         this._ankiErrorMessageDetailsContainer = null;
+        /** @type {?HTMLElement} */
         this._ankiErrorMessageDetailsToggle = null;
+        /** @type {?HTMLElement} */
         this._ankiErrorInvalidResponseInfo = null;
+        /** @type {?HTMLElement} */
         this._ankiCardPrimary = null;
+        /** @type {?Error} */
         this._ankiError = null;
+        /** @type {?import('core').TokenObject} */
         this._validateFieldsToken = null;
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._settingsController;
     }
 
+    /** */
     async prepare() {
-        this._ankiErrorContainer = document.querySelector('#anki-error');
-        this._ankiErrorMessageNode = document.querySelector('#anki-error-message');
-        this._ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent;
-        this._ankiErrorMessageDetailsNode = document.querySelector('#anki-error-message-details');
-        this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details-container');
-        this._ankiErrorMessageDetailsToggle = document.querySelector('#anki-error-message-details-toggle');
-        this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info');
-        this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]');
-        this._ankiCardPrimary = document.querySelector('#anki-card-primary');
-        const ankiApiKeyInput = document.querySelector('#anki-api-key-input');
-        const ankiCardPrimaryTypeRadios = document.querySelectorAll('input[type=radio][name=anki-card-primary-type]');
+        this._ankiErrorContainer = /** @type {HTMLElement} */ (document.querySelector('#anki-error'));
+        this._ankiErrorMessageNode = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message'));
+        const ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent;
+        this._ankiErrorMessageNodeDefaultContent = typeof ankiErrorMessageNodeDefaultContent === 'string' ? ankiErrorMessageNodeDefaultContent : '';
+        this._ankiErrorMessageDetailsNode = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message-details'));
+        this._ankiErrorMessageDetailsContainer = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message-details-container'));
+        this._ankiErrorMessageDetailsToggle = /** @type {HTMLElement} */ (document.querySelector('#anki-error-message-details-toggle'));
+        this._ankiErrorInvalidResponseInfo = /** @type {HTMLElement} */ (document.querySelector('#anki-error-invalid-response-info'));
+        this._ankiEnableCheckbox = /** @type {?HTMLInputElement} */ (document.querySelector('[data-setting="anki.enable"]'));
+        this._ankiCardPrimary = /** @type {HTMLElement} */ (document.querySelector('#anki-card-primary'));
+        const ankiApiKeyInput = /** @type {HTMLElement} */ (document.querySelector('#anki-api-key-input'));
+        const ankiCardPrimaryTypeRadios = /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('input[type=radio][name=anki-card-primary-type]'));
+        const ankiErrorLog = /** @type {HTMLElement} */ (document.querySelector('#anki-error-log'));
 
         this._setupFieldMenus();
 
         this._ankiErrorMessageDetailsToggle.addEventListener('click', this._onAnkiErrorMessageDetailsToggleClick.bind(this), false);
-        if (this._ankiEnableCheckbox !== null) { this._ankiEnableCheckbox.addEventListener('settingChanged', this._onAnkiEnableChanged.bind(this), false); }
+        if (this._ankiEnableCheckbox !== null) {
+            this._ankiEnableCheckbox.addEventListener(
+                /** @type {string} */ ('settingChanged'),
+                /** @type {EventListener} */ (this._onAnkiEnableChanged.bind(this)),
+                false
+            );
+        }
         for (const input of ankiCardPrimaryTypeRadios) {
             input.addEventListener('change', this._onAnkiCardPrimaryTypeRadioChange.bind(this), false);
         }
 
-        const testAnkiNoteViewerButtons = document.querySelectorAll('.test-anki-note-viewer-button');
+        const testAnkiNoteViewerButtons = /** @type {NodeListOf<HTMLButtonElement>} */ (document.querySelectorAll('.test-anki-note-viewer-button'));
         const onTestAnkiNoteViewerButtonClick = this._onTestAnkiNoteViewerButtonClick.bind(this);
         for (const button of testAnkiNoteViewerButtons) {
             button.addEventListener('click', onTestAnkiNoteViewerButtonClick, false);
         }
 
-        document.querySelector('#anki-error-log').addEventListener('click', this._onAnkiErrorLogLinkClick.bind(this));
+        ankiErrorLog.addEventListener('click', this._onAnkiErrorLogLinkClick.bind(this));
 
         ankiApiKeyInput.addEventListener('focus', this._onApiKeyInputFocus.bind(this));
         ankiApiKeyInput.addEventListener('blur', this._onApiKeyInputBlur.bind(this));
@@ -94,6 +123,10 @@ export class AnkiController {
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
     }
 
+    /**
+     * @param {string} type
+     * @returns {string[]}
+     */
     getFieldMarkers(type) {
         switch (type) {
             case 'terms':
@@ -154,6 +187,9 @@ export class AnkiController {
         }
     }
 
+    /**
+     * @returns {Promise<import('anki-controller').AnkiData>}
+     */
     async getAnkiData() {
         let promise = this._getAnkiDataPromise;
         if (promise === null) {
@@ -164,23 +200,37 @@ export class AnkiController {
         return promise;
     }
 
+    /**
+     * @param {string} model
+     * @returns {Promise<string[]>}
+     */
     async getModelFieldNames(model) {
         return await this._ankiConnect.getModelFieldNames(model);
     }
 
+    /**
+     * @param {string} fieldValue
+     * @returns {string[]}
+     */
     getRequiredPermissions(fieldValue) {
         return this._settingsController.permissionsUtil.getRequiredPermissionsForAnkiFieldValue(fieldValue);
     }
 
     // Private
 
+    /** */
     async _updateOptions() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     async _onOptionsChanged({options: {anki}}) {
-        let {apiKey} = anki;
+        /** @type {?string} */
+        let apiKey = anki.apiKey;
         if (apiKey === '') { apiKey = null; }
         this._ankiConnect.server = anki.server;
         this._ankiConnect.enabled = anki.enable;
@@ -190,44 +240,73 @@ export class AnkiController {
         this._selectorObserver.observe(document.documentElement, true);
     }
 
+    /** */
     _onAnkiErrorMessageDetailsToggleClick() {
-        const node = this._ankiErrorMessageDetailsContainer;
+        const node = /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsContainer);
         node.hidden = !node.hidden;
     }
 
+    /**
+     * @param {import('dom-data-binder').SettingChangedEvent} event
+     */
     _onAnkiEnableChanged({detail: {value}}) {
         if (this._ankiConnect.server === null) { return; }
-        this._ankiConnect.enabled = value;
+        this._ankiConnect.enabled = typeof value === 'boolean' && value;
 
         for (const cardController of this._selectorObserver.datas()) {
             cardController.updateAnkiState();
         }
     }
 
+    /**
+     * @param {Event} e
+     */
     _onAnkiCardPrimaryTypeRadioChange(e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         if (!node.checked) { return; }
-
-        this._setAnkiCardPrimaryType(node.dataset.value, node.dataset.ankiCardMenu);
+        const {value, ankiCardMenu} = node.dataset;
+        if (typeof value !== 'string') { return; }
+        this._setAnkiCardPrimaryType(value, ankiCardMenu);
     }
 
+    /** */
     _onAnkiErrorLogLinkClick() {
         if (this._ankiError === null) { return; }
         console.log({error: this._ankiError});
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onTestAnkiNoteViewerButtonClick(e) {
-        this._testAnkiNoteViewerSafe(e.currentTarget.dataset.mode);
+        const element = /** @type {HTMLElement} */ (e.currentTarget);
+        const {mode} = element.dataset;
+        if (typeof mode !== 'string') { return; }
+        const mode2 = this._normalizeAnkiNoteGuiMode(mode);
+        if (mode2 === null) { return; }
+        this._testAnkiNoteViewerSafe(mode2);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onApiKeyInputFocus(e) {
-        e.currentTarget.type = 'text';
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        element.type = 'text';
     }
 
+    /**
+     * @param {Event} e
+     */
     _onApiKeyInputBlur(e) {
-        e.currentTarget.type = 'password';
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        element.type = 'password';
     }
 
+    /**
+     * @param {string} ankiCardType
+     * @param {string} [ankiCardMenu]
+     */
     _setAnkiCardPrimaryType(ankiCardType, ankiCardMenu) {
         if (this._ankiCardPrimary === null) { return; }
         this._ankiCardPrimary.dataset.ankiCardType = ankiCardType;
@@ -238,28 +317,43 @@ export class AnkiController {
         }
     }
 
+    /**
+     * @param {Element} node
+     * @returns {AnkiCardController}
+     */
     _createCardController(node) {
-        const cardController = new AnkiCardController(this._settingsController, this, node);
+        const cardController = new AnkiCardController(this._settingsController, this, /** @type {HTMLElement} */ (node));
         cardController.prepare();
         return cardController;
     }
 
-    _removeCardController(node, cardController) {
+    /**
+     * @param {Element} _node
+     * @param {AnkiCardController} cardController
+     */
+    _removeCardController(_node, cardController) {
         cardController.cleanup();
     }
 
-    _isCardControllerStale(node, cardController) {
+    /**
+     * @param {Element} _node
+     * @param {AnkiCardController} cardController
+     * @returns {boolean}
+     */
+    _isCardControllerStale(_node, cardController) {
         return cardController.isStale();
     }
 
+    /** */
     _setupFieldMenus() {
+        /** @type {[types: string[], selector: string][]} */
         const fieldMenuTargets = [
             [['terms'], '#anki-card-terms-field-menu-template'],
             [['kanji'], '#anki-card-kanji-field-menu-template'],
             [['terms', 'kanji'], '#anki-card-all-field-menu-template']
         ];
         for (const [types, selector] of fieldMenuTargets) {
-            const element = document.querySelector(selector);
+            const element = /** @type {HTMLTemplateElement} */ (document.querySelector(selector));
             if (element === null) { continue; }
 
             let markers = [];
@@ -284,6 +378,9 @@ export class AnkiController {
         }
     }
 
+    /**
+     * @returns {Promise<import('anki-controller').AnkiData>}
+     */
     async _getAnkiData() {
         this._setAnkiStatusChanging();
         const [
@@ -305,85 +402,108 @@ export class AnkiController {
         return {deckNames, modelNames};
     }
 
+    /**
+     * @returns {Promise<[deckNames: string[], error: ?Error]>}
+     */
     async _getDeckNames() {
         try {
             const result = await this._ankiConnect.getDeckNames();
             this._sortStringArray(result);
             return [result, null];
         } catch (e) {
-            return [[], e];
+            return [[], e instanceof Error ? e : new Error(`${e}`)];
         }
     }
 
+    /**
+     * @returns {Promise<[modelNames: string[], error: ?Error]>}
+     */
     async _getModelNames() {
         try {
             const result = await this._ankiConnect.getModelNames();
             this._sortStringArray(result);
             return [result, null];
         } catch (e) {
-            return [[], e];
+            return [[], e instanceof Error ? e : new Error(`${e}`)];
         }
     }
 
+    /** */
     _setAnkiStatusChanging() {
-        this._ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent;
-        this._ankiErrorMessageNode.classList.remove('danger-text');
+        const ankiErrorMessageNode = /** @type {HTMLElement} */ (this._ankiErrorMessageNode);
+        ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent;
+        ankiErrorMessageNode.classList.remove('danger-text');
     }
 
+    /** */
     _hideAnkiError() {
+        const ankiErrorMessageNode = /** @type {HTMLElement} */ (this._ankiErrorMessageNode);
         if (this._ankiErrorContainer !== null) {
             this._ankiErrorContainer.hidden = true;
         }
-        this._ankiErrorMessageDetailsContainer.hidden = true;
-        this._ankiErrorMessageDetailsToggle.hidden = true;
-        this._ankiErrorInvalidResponseInfo.hidden = true;
-        this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled');
-        this._ankiErrorMessageNode.classList.remove('danger-text');
-        this._ankiErrorMessageDetailsNode.textContent = '';
+        /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsContainer).hidden = true;
+        /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsToggle).hidden = true;
+        /** @type {HTMLElement} */ (this._ankiErrorInvalidResponseInfo).hidden = true;
+        ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled');
+        ankiErrorMessageNode.classList.remove('danger-text');
+        /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsNode).textContent = '';
         this._ankiError = null;
     }
 
+    /**
+     * @param {Error} error
+     */
     _showAnkiError(error) {
+        const ankiErrorMessageNode = /** @type {HTMLElement} */ (this._ankiErrorMessageNode);
         this._ankiError = error;
 
         let errorString = typeof error === 'object' && error !== null ? error.message : null;
         if (!errorString) { errorString = `${error}`; }
         if (!/[.!?]$/.test(errorString)) { errorString += '.'; }
-        this._ankiErrorMessageNode.textContent = errorString;
-        this._ankiErrorMessageNode.classList.add('danger-text');
+        ankiErrorMessageNode.textContent = errorString;
+        ankiErrorMessageNode.classList.add('danger-text');
 
-        const data = error.data;
+        const data = error instanceof ExtensionError ? error.data : void 0;
         let details = '';
         if (typeof data !== 'undefined') {
             details += `${JSON.stringify(data, null, 4)}\n\n`;
         }
         details += `${error.stack}`.trimRight();
-        this._ankiErrorMessageDetailsNode.textContent = details;
+        /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsNode).textContent = details;
 
         if (this._ankiErrorContainer !== null) {
             this._ankiErrorContainer.hidden = false;
         }
-        this._ankiErrorMessageDetailsContainer.hidden = true;
-        this._ankiErrorInvalidResponseInfo.hidden = (errorString.indexOf('Invalid response') < 0);
-        this._ankiErrorMessageDetailsToggle.hidden = false;
+        /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsContainer).hidden = true;
+        /** @type {HTMLElement} */ (this._ankiErrorInvalidResponseInfo).hidden = (errorString.indexOf('Invalid response') < 0);
+        /** @type {HTMLElement} */ (this._ankiErrorMessageDetailsToggle).hidden = false;
     }
 
+    /**
+     * @param {string[]} array
+     */
     _sortStringArray(array) {
         const stringComparer = this._stringComparer;
         array.sort((a, b) => stringComparer.compare(a, b));
     }
 
+    /**
+     * @param {import('settings').AnkiNoteGuiMode} mode
+     */
     async _testAnkiNoteViewerSafe(mode) {
         this._setAnkiNoteViewerStatus(false, null);
         try {
             await this._testAnkiNoteViewer(mode);
         } catch (e) {
-            this._setAnkiNoteViewerStatus(true, e);
+            this._setAnkiNoteViewerStatus(true, e instanceof Error ? e : new Error(`${e}`));
             return;
         }
         this._setAnkiNoteViewerStatus(true, null);
     }
 
+    /**
+     * @param {import('settings').AnkiNoteGuiMode} mode
+     */
     async _testAnkiNoteViewer(mode) {
         const queries = [
             '"よむ" deck:current',
@@ -408,8 +528,12 @@ export class AnkiController {
         await yomitan.api.noteView(noteId, mode, false);
     }
 
+    /**
+     * @param {boolean} visible
+     * @param {?Error} error
+     */
     _setAnkiNoteViewerStatus(visible, error) {
-        const node = document.querySelector('#test-anki-note-viewer-results');
+        const node = /** @type {HTMLElement} */ (document.querySelector('#test-anki-note-viewer-results'));
         if (visible) {
             const success = (error === null);
             node.textContent = success ? 'Success!' : error.message;
@@ -420,26 +544,61 @@ export class AnkiController {
         }
         node.hidden = !visible;
     }
+
+    /**
+     * @param {string} value
+     * @returns {?import('settings').AnkiNoteGuiMode}
+     */
+    _normalizeAnkiNoteGuiMode(value) {
+        switch (value) {
+            case 'browse':
+            case 'edit':
+                return value;
+            default:
+                return null;
+        }
+    }
 }
 
 class AnkiCardController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {AnkiController} ankiController
+     * @param {HTMLElement} node
+     */
     constructor(settingsController, ankiController, node) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {AnkiController} */
         this._ankiController = ankiController;
+        /** @type {HTMLElement} */
         this._node = node;
-        this._cardType = node.dataset.ankiCardType;
+        const {ankiCardType} = node.dataset;
+        /** @type {string} */
+        this._cardType = typeof ankiCardType === 'string' ? ankiCardType : 'terms';
+        /** @type {string|undefined} */
         this._cardMenu = node.dataset.ankiCardMenu;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {EventListenerCollection} */
         this._fieldEventListeners = new EventListenerCollection();
-        this._fields = null;
+        /** @type {import('settings').AnkiNoteFields} */
+        this._fields = {};
+        /** @type {?string} */
         this._modelChangingTo = null;
+        /** @type {?Element} */
         this._ankiCardFieldsContainer = null;
+        /** @type {boolean} */
         this._cleaned = false;
+        /** @type {import('anki-controller').FieldEntry[]} */
         this._fieldEntries = [];
+        /** @type {AnkiCardSelectController} */
         this._deckController = new AnkiCardSelectController();
+        /** @type {AnkiCardSelectController} */
         this._modelController = new AnkiCardSelectController();
     }
 
+    /** */
     async prepare() {
         const options = await this._settingsController.getOptions();
         const ankiOptions = options.anki;
@@ -448,8 +607,8 @@ class AnkiCardController {
         const cardOptions = this._getCardOptions(ankiOptions, this._cardType);
         if (cardOptions === null) { return; }
         const {deck, model, fields} = cardOptions;
-        this._deckController.prepare(this._node.querySelector('.anki-card-deck'), deck);
-        this._modelController.prepare(this._node.querySelector('.anki-card-model'), model);
+        this._deckController.prepare(/** @type {HTMLSelectElement} */ (this._node.querySelector('.anki-card-deck')), deck);
+        this._modelController.prepare(/** @type {HTMLSelectElement} */ (this._node.querySelector('.anki-card-model')), model);
         this._fields = fields;
 
         this._ankiCardFieldsContainer = this._node.querySelector('.anki-card-fields');
@@ -463,12 +622,14 @@ class AnkiCardController {
         await this.updateAnkiState();
     }
 
+    /** */
     cleanup() {
         this._cleaned = true;
         this._fieldEntries = [];
         this._eventListeners.removeAllEventListeners();
     }
 
+    /** */
     async updateAnkiState() {
         if (this._fields === null) { return; }
         const {deckNames, modelNames} = await this._ankiController.getAnkiData();
@@ -477,41 +638,70 @@ class AnkiCardController {
         this._modelController.setOptionValues(modelNames);
     }
 
+    /**
+     * @returns {boolean}
+     */
     isStale() {
         return (this._cardType !== this._node.dataset.ankiCardType);
     }
 
     // Private
 
+    /**
+     * @param {Event} e
+     */
     _onCardDeckChange(e) {
-        this._setDeck(e.currentTarget.value);
+        const node = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        this._setDeck(node.value);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onCardModelChange(e) {
-        this._setModel(e.currentTarget.value);
+        const node = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        this._setModel(node.value);
     }
 
+    /**
+     * @param {number} index
+     * @param {Event} e
+     */
     _onFieldChange(index, e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         this._validateFieldPermissions(node, index, true);
         this._validateField(node, index);
     }
 
+    /**
+     * @param {number} index
+     * @param {Event} e
+     */
     _onFieldInput(index, e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         this._validateField(node, index);
     }
 
+    /**
+     * @param {number} index
+     * @param {import('dom-data-binder').SettingChangedEvent} e
+     */
     _onFieldSettingChanged(index, e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         this._validateFieldPermissions(node, index, false);
     }
 
-    _onFieldMenuOpen({currentTarget: button, detail: {menu}}) {
-        let {index, fieldName} = button.dataset;
-        index = Number.parseInt(index, 10);
-
-        const defaultValue = this._getDefaultFieldValue(fieldName, index, this._cardType, null);
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} event
+     */
+    _onFieldMenuOpen(event) {
+        const button = /** @type {HTMLElement} */ (event.currentTarget);
+        const {menu} = event.detail;
+        const {index, fieldName} = button.dataset;
+        const indexNumber = typeof index === 'string' ? Number.parseInt(index, 10) : 0;
+        if (typeof fieldName !== 'string') { return; }
+
+        const defaultValue = this._getDefaultFieldValue(fieldName, indexNumber, this._cardType, null);
         if (defaultValue === '') { return; }
 
         const match = /^\{([\w\W]+)\}$/.exec(defaultValue);
@@ -524,14 +714,28 @@ class AnkiCardController {
         item.classList.add('popup-menu-item-bold');
     }
 
-    _onFieldMenuClose({currentTarget: button, detail: {action, item}}) {
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} event
+     */
+    _onFieldMenuClose(event) {
+        const button = /** @type {HTMLElement} */ (event.currentTarget);
+        const {action, item} = event.detail;
         switch (action) {
             case 'setFieldMarker':
-                this._setFieldMarker(button, item.dataset.marker);
+                if (item !== null) {
+                    const {marker} = item.dataset;
+                    if (typeof marker === 'string') {
+                        this._setFieldMarker(button, marker);
+                    }
+                }
                 break;
         }
     }
 
+    /**
+     * @param {HTMLInputElement} node
+     * @param {number} index
+     */
     _validateField(node, index) {
         let valid = (node.dataset.hasPermissions !== 'false');
         if (valid && index === 0 && !AnkiUtil.stringContainsAnyFieldMarker(node.value)) {
@@ -540,12 +744,23 @@ class AnkiCardController {
         node.dataset.invalid = `${!valid}`;
     }
 
+    /**
+     * @param {Element} element
+     * @param {string} marker
+     */
     _setFieldMarker(element, marker) {
-        const input = element.closest('.anki-card-field-value-container').querySelector('.anki-card-field-value');
+        const container = element.closest('.anki-card-field-value-container');
+        if (container === null) { return; }
+        const input = /** @type {HTMLInputElement} */ (container.querySelector('.anki-card-field-value'));
         input.value = `{${marker}}`;
         input.dispatchEvent(new Event('change'));
     }
 
+    /**
+     * @param {import('settings').AnkiOptions} ankiOptions
+     * @param {string} cardType
+     * @returns {?import('settings').AnkiNoteOptions}
+     */
     _getCardOptions(ankiOptions, cardType) {
         switch (cardType) {
             case 'terms': return ankiOptions.terms;
@@ -554,6 +769,7 @@ class AnkiCardController {
         }
     }
 
+    /** */
     _setupFields() {
         this._fieldEventListeners.removeAllEventListeners();
 
@@ -563,15 +779,15 @@ class AnkiCardController {
         for (const [fieldName, fieldValue] of Object.entries(this._fields)) {
             const content = this._settingsController.instantiateTemplateFragment('anki-card-field');
 
-            const fieldNameContainerNode = content.querySelector('.anki-card-field-name-container');
+            const fieldNameContainerNode = /** @type {HTMLElement} */ (content.querySelector('.anki-card-field-name-container'));
             fieldNameContainerNode.dataset.index = `${index}`;
-            const fieldNameNode = content.querySelector('.anki-card-field-name');
+            const fieldNameNode = /** @type {HTMLElement} */ (content.querySelector('.anki-card-field-name'));
             fieldNameNode.textContent = fieldName;
 
-            const valueContainer = content.querySelector('.anki-card-field-value-container');
+            const valueContainer = /** @type {HTMLElement} */ (content.querySelector('.anki-card-field-value-container'));
             valueContainer.dataset.index = `${index}`;
 
-            const inputField = content.querySelector('.anki-card-field-value');
+            const inputField = /** @type {HTMLInputElement} */ (content.querySelector('.anki-card-field-value'));
             inputField.value = fieldValue;
             inputField.dataset.setting = ObjectPropertyAccessor.getPathString(['anki', this._cardType, 'fields', fieldName]);
             this._validateFieldPermissions(inputField, index, false);
@@ -581,7 +797,7 @@ class AnkiCardController {
             this._fieldEventListeners.addEventListener(inputField, 'settingChanged', this._onFieldSettingChanged.bind(this, index), false);
             this._validateField(inputField, index);
 
-            const menuButton = content.querySelector('.anki-card-field-value-menu-button');
+            const menuButton = /** @type {?HTMLElement} */ (content.querySelector('.anki-card-field-value-menu-button'));
             if (menuButton !== null) {
                 if (typeof this._cardMenu !== 'undefined') {
                     menuButton.dataset.menu = this._cardMenu;
@@ -602,15 +818,18 @@ class AnkiCardController {
 
         const ELEMENT_NODE = Node.ELEMENT_NODE;
         const container = this._ankiCardFieldsContainer;
-        for (const node of [...container.childNodes]) {
-            if (node.nodeType === ELEMENT_NODE && node.dataset.persistent === 'true') { continue; }
-            container.removeChild(node);
+        if (container !== null) {
+            for (const node of [...container.childNodes]) {
+                if (node.nodeType === ELEMENT_NODE && node instanceof HTMLElement && node.dataset.persistent === 'true') { continue; }
+                container.removeChild(node);
+            }
+            container.appendChild(totalFragment);
         }
-        container.appendChild(totalFragment);
 
         this._validateFields();
     }
 
+    /** */
     async _validateFields() {
         const token = {};
         this._validateFieldsToken = token;
@@ -633,6 +852,9 @@ class AnkiCardController {
         }
     }
 
+    /**
+     * @param {string} value
+     */
     async _setDeck(value) {
         if (this._deckController.value === value) { return; }
         this._deckController.value = value;
@@ -644,6 +866,9 @@ class AnkiCardController {
         }]);
     }
 
+    /**
+     * @param {string} value
+     */
     async _setModel(value) {
         const select = this._modelController.select;
         if (this._modelChangingTo !== null) {
@@ -671,12 +896,14 @@ class AnkiCardController {
         const cardOptions = this._getCardOptions(options.anki, cardType);
         const oldFields = cardOptions !== null ? cardOptions.fields : null;
 
+        /** @type {import('settings').AnkiNoteFields} */
         const fields = {};
         for (let i = 0, ii = fieldNames.length; i < ii; ++i) {
             const fieldName = fieldNames[i];
             fields[fieldName] = this._getDefaultFieldValue(fieldName, i, cardType, oldFields);
         }
 
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [
             {
                 action: 'set',
@@ -698,6 +925,9 @@ class AnkiCardController {
         this._setupFields();
     }
 
+    /**
+     * @param {string[]} permissions
+     */
     async _requestPermissions(permissions) {
         try {
             await this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, true);
@@ -706,6 +936,11 @@ class AnkiCardController {
         }
     }
 
+    /**
+     * @param {HTMLInputElement} node
+     * @param {number} index
+     * @param {boolean} request
+     */
     async _validateFieldPermissions(node, index, request) {
         const fieldValue = node.value;
         const permissions = this._ankiController.getRequiredPermissions(fieldValue);
@@ -725,16 +960,19 @@ class AnkiCardController {
         this._validateField(node, index);
     }
 
+    /**
+     * @param {import('settings-controller').PermissionsChangedEvent} details
+     */
     _onPermissionsChanged({permissions: {permissions}}) {
         const permissionsSet = new Set(permissions);
         for (let i = 0, ii = this._fieldEntries.length; i < ii; ++i) {
             const {inputField} = this._fieldEntries[i];
-            let {requiredPermission} = inputField.dataset;
+            const {requiredPermission} = inputField.dataset;
             if (typeof requiredPermission !== 'string') { continue; }
-            requiredPermission = (requiredPermission.length === 0 ? [] : requiredPermission.split(' '));
+            const requiredPermissionArray = (requiredPermission.length === 0 ? [] : requiredPermission.split(' '));
 
             let hasPermissions = true;
-            for (const permission of requiredPermission) {
+            for (const permission of requiredPermissionArray) {
                 if (!permissionsSet.has(permission)) {
                     hasPermissions = false;
                     break;
@@ -746,6 +984,13 @@ class AnkiCardController {
         }
     }
 
+    /**
+     * @param {string} fieldName
+     * @param {number} index
+     * @param {string} cardType
+     * @param {?import('settings').AnkiNoteFields} oldFields
+     * @returns {string}
+     */
     _getDefaultFieldValue(fieldName, index, cardType, oldFields) {
         if (
             typeof oldFields === 'object' &&
@@ -783,9 +1028,9 @@ class AnkiCardController {
                 pattern += name.replace(hyphenPattern, '[-_ ]*');
             }
             pattern += ')$';
-            pattern = new RegExp(pattern, 'i');
+            const patternRegExp = new RegExp(pattern, 'i');
 
-            if (pattern.test(fieldName)) {
+            if (patternRegExp.test(fieldName)) {
                 return `{${marker}}`;
             }
         }
@@ -796,14 +1041,21 @@ class AnkiCardController {
 
 class AnkiCardSelectController {
     constructor() {
+        /** @type {?string} */
         this._value = null;
+        /** @type {?HTMLSelectElement} */
         this._select = null;
-        this._optionValues = null;
+        /** @type {string[]} */
+        this._optionValues = [];
+        /** @type {boolean} */
         this._hasExtraOption = false;
+        /** @type {boolean} */
         this._selectNeedsUpdate = false;
     }
 
+    /** @type {string} */
     get value() {
+        if (this._value === null) { throw new Error('Invalid value'); }
         return this._value;
     }
 
@@ -812,16 +1064,25 @@ class AnkiCardSelectController {
         this._updateSelect();
     }
 
+    /** @type {HTMLSelectElement} */
     get select() {
+        if (this._select === null) { throw new Error('Invalid value'); }
         return this._select;
     }
 
+    /**
+     * @param {HTMLSelectElement} select
+     * @param {string} value
+     */
     prepare(select, value) {
         this._select = select;
         this._value = value;
         this._updateSelect();
     }
 
+    /**
+     * @param {string[]} optionValues
+     */
     setOptionValues(optionValues) {
         this._optionValues = optionValues;
         this._selectNeedsUpdate = true;
@@ -830,8 +1091,11 @@ class AnkiCardSelectController {
 
     // Private
 
+    /** */
     _updateSelect() {
+        const select = this._select;
         const value = this._value;
+        if (select === null || value === null) { return; }
         let optionValues = this._optionValues;
         const hasOptionValues = Array.isArray(optionValues) && optionValues.length > 0;
 
@@ -844,7 +1108,6 @@ class AnkiCardSelectController {
             optionValues = [...optionValues, value];
         }
 
-        const select = this._select;
         if (this._selectNeedsUpdate || hasExtraOption !== this._hasExtraOption) {
             this._setSelectOptions(select, optionValues);
             select.value = value;
@@ -859,6 +1122,10 @@ class AnkiCardSelectController {
         }
     }
 
+    /**
+     * @param {HTMLSelectElement} select
+     * @param {string[]} optionValues
+     */
     _setSelectOptions(select, optionValues) {
         const fragment = document.createDocumentFragment();
         for (const optionValue of optionValues) {
diff --git a/ext/js/pages/settings/anki-templates-controller.js b/ext/js/pages/settings/anki-templates-controller.js
index ac8a0205..89848ef3 100644
--- a/ext/js/pages/settings/anki-templates-controller.js
+++ b/ext/js/pages/settings/anki-templates-controller.js
@@ -16,39 +16,57 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {isObject} from '../../core.js';
+import {ExtensionError} from '../../core/extension-error.js';
 import {AnkiNoteBuilder} from '../../data/anki-note-builder.js';
 import {JapaneseUtil} from '../../language/sandbox/japanese-util.js';
 import {yomitan} from '../../yomitan.js';
 
 export class AnkiTemplatesController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('./modal-controller.js').ModalController} modalController
+     * @param {import('./anki-controller.js').AnkiController} ankiController
+     */
     constructor(settingsController, modalController, ankiController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {import('./anki-controller.js').AnkiController} */
         this._ankiController = ankiController;
+        /** @type {?import('dictionary').TermDictionaryEntry} */
         this._cachedDictionaryEntryValue = null;
+        /** @type {?string} */
         this._cachedDictionaryEntryText = null;
+        /** @type {?string} */
         this._defaultFieldTemplates = null;
+        /** @type {?HTMLTextAreaElement} */
         this._fieldTemplatesTextarea = null;
+        /** @type {?HTMLElement} */
         this._compileResultInfo = null;
+        /** @type {?HTMLInputElement} */
         this._renderFieldInput = null;
+        /** @type {?HTMLElement} */
         this._renderResult = null;
+        /** @type {?import('./modal.js').Modal} */
         this._fieldTemplateResetModal = null;
+        /** @type {AnkiNoteBuilder} */
         this._ankiNoteBuilder = new AnkiNoteBuilder({japaneseUtil: new JapaneseUtil(null)});
     }
 
+    /** */
     async prepare() {
         this._defaultFieldTemplates = await yomitan.api.getDefaultAnkiFieldTemplates();
 
-        this._fieldTemplatesTextarea = document.querySelector('#anki-card-templates-textarea');
-        this._compileResultInfo = document.querySelector('#anki-card-templates-compile-result');
-        this._renderFieldInput = document.querySelector('#anki-card-templates-test-field-input');
-        this._renderTextInput = document.querySelector('#anki-card-templates-test-text-input');
-        this._renderResult = document.querySelector('#anki-card-templates-render-result');
-        const menuButton = document.querySelector('#anki-card-templates-test-field-menu-button');
-        const testRenderButton = document.querySelector('#anki-card-templates-test-render-button');
-        const resetButton = document.querySelector('#anki-card-templates-reset-button');
-        const resetConfirmButton = document.querySelector('#anki-card-templates-reset-button-confirm');
+        this._fieldTemplatesTextarea = /** @type {HTMLTextAreaElement} */ (document.querySelector('#anki-card-templates-textarea'));
+        this._compileResultInfo = /** @type {HTMLElement} */ (document.querySelector('#anki-card-templates-compile-result'));
+        this._renderFieldInput = /** @type {HTMLInputElement} */ (document.querySelector('#anki-card-templates-test-field-input'));
+        this._renderTextInput = /** @type {HTMLInputElement} */ (document.querySelector('#anki-card-templates-test-text-input'));
+        this._renderResult = /** @type {HTMLElement} */ (document.querySelector('#anki-card-templates-render-result'));
+        const menuButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-test-field-menu-button'));
+        const testRenderButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-test-render-button'));
+        const resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-reset-button'));
+        const resetConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#anki-card-templates-reset-button-confirm'));
         this._fieldTemplateResetModal = this._modalController.getModal('anki-card-templates-reset');
 
         this._fieldTemplatesTextarea.addEventListener('change', this._onChanged.bind(this), false);
@@ -56,44 +74,71 @@ export class AnkiTemplatesController {
         resetButton.addEventListener('click', this._onReset.bind(this), false);
         resetConfirmButton.addEventListener('click', this._onResetConfirm.bind(this), false);
         if (menuButton !== null) {
-            menuButton.addEventListener('menuClose', this._onFieldMenuClose.bind(this), false);
+            menuButton.addEventListener(
+                /** @type {string} */ ('menuClose'),
+                /** @type {EventListener} */ (this._onFieldMenuClose.bind(this)),
+                false
+            );
         }
 
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
 
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         let templates = options.anki.fieldTemplates;
-        if (typeof templates !== 'string') { templates = this._defaultFieldTemplates; }
-        this._fieldTemplatesTextarea.value = templates;
+        if (typeof templates !== 'string') {
+            templates = this._defaultFieldTemplates;
+            if (typeof templates !== 'string') { templates = ''; }
+        }
+        /** @type {HTMLTextAreaElement} */ (this._fieldTemplatesTextarea).value = templates;
 
         this._onValidateCompile();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onReset(e) {
         e.preventDefault();
-        this._fieldTemplateResetModal.setVisible(true);
+        if (this._fieldTemplateResetModal !== null) {
+            this._fieldTemplateResetModal.setVisible(true);
+        }
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onResetConfirm(e) {
         e.preventDefault();
 
-        this._fieldTemplateResetModal.setVisible(false);
+        if (this._fieldTemplateResetModal !== null) {
+            this._fieldTemplateResetModal.setVisible(false);
+        }
 
         const value = this._defaultFieldTemplates;
 
-        this._fieldTemplatesTextarea.value = value;
-        this._fieldTemplatesTextarea.dispatchEvent(new Event('change'));
+        const textarea = /** @type {HTMLTextAreaElement} */ (this._fieldTemplatesTextarea);
+        textarea.value = typeof value === 'string' ? value : '';
+        textarea.dispatchEvent(new Event('change'));
     }
 
+    /**
+     * @param {Event} e
+     */
     async _onChanged(e) {
         // Get value
-        let templates = e.currentTarget.value;
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        /** @type {?string} */
+        let templates = element.value;
         if (templates === this._defaultFieldTemplates) {
             // Default
             templates = null;
@@ -106,34 +151,55 @@ export class AnkiTemplatesController {
         this._onValidateCompile();
     }
 
+    /** */
     _onValidateCompile() {
+        if (this._compileResultInfo === null) { return; }
         this._validate(this._compileResultInfo, '{expression}', 'term-kanji', false, true);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onRender(e) {
         e.preventDefault();
 
-        const field = this._renderFieldInput.value;
-        const infoNode = this._renderResult;
+        const field = /** @type {HTMLInputElement} */ (this._renderFieldInput).value;
+        const infoNode = /** @type {HTMLElement} */ (this._renderResult);
         infoNode.hidden = true;
         this._cachedDictionaryEntryText = null;
         this._validate(infoNode, field, 'term-kanji', true, false);
     }
 
-    _onFieldMenuClose({currentTarget: button, detail: {action, item}}) {
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} event
+     */
+    _onFieldMenuClose({detail: {action, item}}) {
         switch (action) {
             case 'setFieldMarker':
-                this._setFieldMarker(button, item.dataset.marker);
+                {
+                    const {marker} = /** @type {HTMLElement} */ (item).dataset;
+                    if (typeof marker === 'string') {
+                        this._setFieldMarker(marker);
+                    }
+                }
                 break;
         }
     }
 
-    _setFieldMarker(element, marker) {
-        const input = this._renderFieldInput;
+    /**
+     * @param {string} marker
+     */
+    _setFieldMarker(marker) {
+        const input = /** @type {HTMLInputElement} */ (this._renderFieldInput);
         input.value = `{${marker}}`;
         input.dispatchEvent(new Event('change'));
     }
 
+    /**
+     * @param {string} text
+     * @param {import('settings').OptionsContext} optionsContext
+     * @returns {Promise<?{dictionaryEntry: import('dictionary').TermDictionaryEntry, text: string}>}
+     */
     async _getDictionaryEntry(text, optionsContext) {
         if (this._cachedDictionaryEntryText !== text) {
             const {dictionaryEntries} = await yomitan.api.termsFind(text, {}, optionsContext);
@@ -143,19 +209,28 @@ export class AnkiTemplatesController {
             this._cachedDictionaryEntryText = text;
         }
         return {
-            dictionaryEntry: this._cachedDictionaryEntryValue,
+            dictionaryEntry: /** @type {import('dictionary').TermDictionaryEntry} */ (this._cachedDictionaryEntryValue),
             text: this._cachedDictionaryEntryText
         };
     }
 
+    /**
+     * @param {HTMLElement} infoNode
+     * @param {string} field
+     * @param {import('anki-templates-internal').CreateModeNoTest} mode
+     * @param {boolean} showSuccessResult
+     * @param {boolean} invalidateInput
+     */
     async _validate(infoNode, field, mode, showSuccessResult, invalidateInput) {
+        /** @type {Error[]} */
         const allErrors = [];
-        const text = this._renderTextInput.value || '';
+        const text = /** @type {HTMLInputElement} */ (this._renderTextInput).value;
         let result = `No definition found for ${text}`;
         try {
             const optionsContext = this._settingsController.getOptionsContext();
-            const {dictionaryEntry, text: sentenceText} = await this._getDictionaryEntry(text, optionsContext);
-            if (dictionaryEntry !== null) {
+            const data = await this._getDictionaryEntry(text, optionsContext);
+            if (data !== null) {
+                const {dictionaryEntry, text: sentenceText} = data;
                 const options = await this._settingsController.getOptions();
                 const context = {
                     url: window.location.href,
@@ -170,7 +245,7 @@ export class AnkiTemplatesController {
                 let template = options.anki.fieldTemplates;
                 if (typeof template !== 'string') { template = this._defaultFieldTemplates; }
                 const {general: {resultOutputMode, glossaryLayoutMode, compactTags}} = options;
-                const {note, errors} = await this._ankiNoteBuilder.createNote({
+                const {note, errors} = await this._ankiNoteBuilder.createNote(/** @type {import('anki-note-builder').CreateNoteDetails} */ ({
                     dictionaryEntry,
                     mode,
                     context,
@@ -183,28 +258,29 @@ export class AnkiTemplatesController {
                     resultOutputMode,
                     glossaryLayoutMode,
                     compactTags
-                });
+                }));
                 result = note.fields.field;
                 allErrors.push(...errors);
             }
         } catch (e) {
-            allErrors.push(e);
+            allErrors.push(e instanceof Error ? e : new Error(`${e}`));
         }
 
+        /**
+         * @param {Error} e
+         * @returns {string}
+         */
         const errorToMessageString = (e) => {
-            if (isObject(e)) {
-                let v = e.data;
-                if (isObject(v)) {
-                    v = v.error;
-                    if (isObject(v)) {
-                        e = v;
+            if (e instanceof ExtensionError) {
+                const v = e.data;
+                if (typeof v === 'object' && v !== null) {
+                    const v2 = /** @type {import('core').UnknownObject} */ (v).error;
+                    if (v2 instanceof Error) {
+                        return v2.message;
                     }
                 }
-
-                v = e.message;
-                if (typeof v === 'string') { return v; }
             }
-            return `${e}`;
+            return e.message;
         };
 
         const hasError = allErrors.length > 0;
@@ -212,7 +288,7 @@ export class AnkiTemplatesController {
         infoNode.textContent = hasError ? allErrors.map(errorToMessageString).join('\n') : (showSuccessResult ? result : '');
         infoNode.classList.toggle('text-danger', hasError);
         if (invalidateInput) {
-            this._fieldTemplatesTextarea.dataset.invalid = `${hasError}`;
+            /** @type {HTMLTextAreaElement} */ (this._fieldTemplatesTextarea).dataset.invalid = `${hasError}`;
         }
     }
 }
diff --git a/ext/js/pages/settings/audio-controller.js b/ext/js/pages/settings/audio-controller.js
index fb54ee6b..0a3f9454 100644
--- a/ext/js/pages/settings/audio-controller.js
+++ b/ext/js/pages/settings/audio-controller.js
@@ -19,48 +19,71 @@
 import {EventDispatcher, EventListenerCollection} from '../../core.js';
 import {AudioSystem} from '../../media/audio-system.js';
 
+/**
+ * @augments EventDispatcher<import('audio-controller').EventType>
+ */
 export class AudioController extends EventDispatcher {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('./modal-controller.js').ModalController} modalController
+     */
     constructor(settingsController, modalController) {
         super();
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {AudioSystem} */
         this._audioSystem = new AudioSystem();
+        /** @type {?HTMLElement} */
         this._audioSourceContainer = null;
+        /** @type {?HTMLButtonElement} */
         this._audioSourceAddButton = null;
+        /** @type {AudioSourceEntry[]} */
         this._audioSourceEntries = [];
+        /** @type {?HTMLInputElement} */
         this._voiceTestTextInput = null;
+        /** @type {import('audio-controller').VoiceInfo[]} */
         this._voices = [];
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._settingsController;
     }
 
+    /** @type {import('./modal-controller.js').ModalController} */
     get modalController() {
         return this._modalController;
     }
 
+    /** */
     async prepare() {
         this._audioSystem.prepare();
 
-        this._voiceTestTextInput = document.querySelector('#text-to-speech-voice-test-text');
-        this._audioSourceContainer = document.querySelector('#audio-source-list');
-        this._audioSourceAddButton = document.querySelector('#audio-source-add');
+        this._voiceTestTextInput = /** @type {HTMLInputElement} */ (document.querySelector('#text-to-speech-voice-test-text'));
+        this._audioSourceContainer = /** @type {HTMLElement} */ (document.querySelector('#audio-source-list'));
+        this._audioSourceAddButton = /** @type {HTMLButtonElement} */ (document.querySelector('#audio-source-add'));
         this._audioSourceContainer.textContent = '';
+        const testButton = /** @type {HTMLButtonElement} */ (document.querySelector('#text-to-speech-voice-test'));
 
         this._audioSourceAddButton.addEventListener('click', this._onAddAudioSource.bind(this), false);
 
-        this._audioSystem.on('voiceschanged', this._updateTextToSpeechVoices.bind(this), false);
+        this._audioSystem.on('voiceschanged', this._updateTextToSpeechVoices.bind(this));
         this._updateTextToSpeechVoices();
 
-        document.querySelector('#text-to-speech-voice-test').addEventListener('click', this._onTestTextToSpeech.bind(this), false);
+        testButton.addEventListener('click', this._onTestTextToSpeech.bind(this), false);
 
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
 
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /**
+     * @param {AudioSourceEntry} entry
+     */
     async removeSource(entry) {
         const {index} = entry;
         this._audioSourceEntries.splice(index, 1);
@@ -78,16 +101,25 @@ export class AudioController extends EventDispatcher {
         }]);
     }
 
+    /**
+     * @returns {import('audio-controller').VoiceInfo[]}
+     */
     getVoices() {
         return this._voices;
     }
 
+    /**
+     * @param {string} voice
+     */
     setTestVoice(voice) {
-        this._voiceTestTextInput.dataset.voice = voice;
+        /** @type {HTMLInputElement} */ (this._voiceTestTextInput).dataset.voice = voice;
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         for (const entry of this._audioSourceEntries) {
             entry.cleanup();
@@ -100,15 +132,18 @@ export class AudioController extends EventDispatcher {
         }
     }
 
+    /** */
     _onAddAudioSource() {
         this._addAudioSource();
     }
 
+    /** */
     _onTestTextToSpeech() {
         try {
-            const text = this._voiceTestTextInput.value || '';
-            const voiceUri = this._voiceTestTextInput.dataset.voice;
-            const audio = this._audioSystem.createTextToSpeechAudio(text, voiceUri);
+            const input = /** @type {HTMLInputElement} */ (this._voiceTestTextInput);
+            const text = input.value || '';
+            const voiceUri = input.dataset.voice;
+            const audio = this._audioSystem.createTextToSpeechAudio(text, typeof voiceUri === 'string' ? voiceUri : '');
             audio.volume = 1.0;
             audio.play();
         } catch (e) {
@@ -116,6 +151,7 @@ export class AudioController extends EventDispatcher {
         }
     }
 
+    /** */
     _updateTextToSpeechVoices() {
         const voices = (
             typeof speechSynthesis !== 'undefined' ?
@@ -131,6 +167,11 @@ export class AudioController extends EventDispatcher {
         this.trigger('voicesUpdated');
     }
 
+    /**
+     * @param {import('audio-controller').VoiceInfo} a
+     * @param {import('audio-controller').VoiceInfo} b
+     * @returns {number}
+     */
     _textToSpeechVoiceCompare(a, b) {
         if (a.isJapanese) {
             if (!b.isJapanese) { return -1; }
@@ -147,6 +188,10 @@ export class AudioController extends EventDispatcher {
         return a.index - b.index;
     }
 
+    /**
+     * @param {string} languageTag
+     * @returns {boolean}
+     */
     _languageTagIsJapanese(languageTag) {
         return (
             languageTag.startsWith('ja_') ||
@@ -155,15 +200,23 @@ export class AudioController extends EventDispatcher {
         );
     }
 
+    /**
+     * @param {number} index
+     * @param {import('settings').AudioSourceOptions} source
+     */
     _createAudioSourceEntry(index, source) {
-        const node = this._settingsController.instantiateTemplate('audio-source');
+        const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('audio-source'));
         const entry = new AudioSourceEntry(this, index, source, node);
         this._audioSourceEntries.push(entry);
-        this._audioSourceContainer.appendChild(node);
+        /** @type {HTMLElement} */ (this._audioSourceContainer).appendChild(node);
         entry.prepare();
     }
 
+    /**
+     * @returns {import('settings').AudioSourceType}
+     */
     _getUnusedAudioSourceType() {
+        /** @type {import('settings').AudioSourceType[]} */
         const typesAvailable = [
             'jpod101',
             'jpod101-alternate',
@@ -178,8 +231,10 @@ export class AudioController extends EventDispatcher {
         return typesAvailable[0];
     }
 
+    /** */
     async _addAudioSource() {
         const type = this._getUnusedAudioSourceType();
+        /** @type {import('settings').AudioSourceOptions} */
         const source = {type, url: '', voice: ''};
         const index = this._audioSourceEntries.length;
         this._createAudioSourceEntry(index, source);
@@ -194,19 +249,36 @@ export class AudioController extends EventDispatcher {
 }
 
 class AudioSourceEntry {
+    /**
+     * @param {AudioController} parent
+     * @param {number} index
+     * @param {import('settings').AudioSourceOptions} source
+     * @param {HTMLElement} node
+     */
     constructor(parent, index, source, node) {
+        /** @type {AudioController} */
         this._parent = parent;
+        /** @type {number} */
         this._index = index;
+        /** @type {import('settings').AudioSourceType} */
         this._type = source.type;
+        /** @type {string} */
         this._url = source.url;
+        /** @type {string} */
         this._voice = source.voice;
+        /** @type {HTMLElement} */
         this._node = node;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?HTMLSelectElement} */
         this._typeSelect = null;
+        /** @type {?HTMLInputElement} */
         this._urlInput = null;
+        /** @type {?HTMLSelectElement} */
         this._voiceSelect = null;
     }
 
+    /** @type {number} */
     get index() {
         return this._index;
     }
@@ -215,17 +287,19 @@ class AudioSourceEntry {
         this._index = value;
     }
 
+    /** @type {import('settings').AudioSourceType} */
     get type() {
         return this._type;
     }
 
+    /** */
     prepare() {
         this._updateTypeParameter();
 
-        const menuButton = this._node.querySelector('.audio-source-menu-button');
-        this._typeSelect = this._node.querySelector('.audio-source-type-select');
-        this._urlInput = this._node.querySelector('.audio-source-parameter-container[data-field=url] .audio-source-parameter');
-        this._voiceSelect = this._node.querySelector('.audio-source-parameter-container[data-field=voice] .audio-source-parameter');
+        const menuButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.audio-source-menu-button'));
+        this._typeSelect = /** @type {HTMLSelectElement} */ (this._node.querySelector('.audio-source-type-select'));
+        this._urlInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.audio-source-parameter-container[data-field=url] .audio-source-parameter'));
+        this._voiceSelect = /** @type {HTMLSelectElement} */ (this._node.querySelector('.audio-source-parameter-container[data-field=voice] .audio-source-parameter'));
 
         this._typeSelect.value = this._type;
         this._urlInput.value = this._url;
@@ -239,6 +313,7 @@ class AudioSourceEntry {
         this._onVoicesUpdated();
     }
 
+    /** */
     cleanup() {
         if (this._node.parentNode !== null) {
             this._node.parentNode.removeChild(this._node);
@@ -248,7 +323,9 @@ class AudioSourceEntry {
 
     // Private
 
+    /** */
     _onVoicesUpdated() {
+        if (this._voiceSelect === null) { return; }
         const voices = this._parent.getVoices();
 
         const fragment = document.createDocumentFragment();
@@ -270,18 +347,35 @@ class AudioSourceEntry {
         this._voiceSelect.value = this._voice;
     }
 
+    /**
+     * @param {Event} e
+     */
     _onTypeSelectChange(e) {
-        this._setType(e.currentTarget.value);
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const value = this._normalizeAudioSourceType(element.value);
+        if (value === null) { return; }
+        this._setType(value);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onUrlInputChange(e) {
-        this._setUrl(e.currentTarget.value);
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        this._setUrl(element.value);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onVoiceSelectChange(e) {
-        this._setVoice(e.currentTarget.value);
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        this._setVoice(element.value);
     }
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const {menu} = e.detail;
 
@@ -295,9 +389,15 @@ class AudioSourceEntry {
                 break;
         }
 
-        menu.bodyNode.querySelector('.popup-menu-item[data-menu-action=help]').hidden = !hasHelp;
+        const helpNode = /** @type {?HTMLElement} */ (menu.bodyNode.querySelector('.popup-menu-item[data-menu-action=help]'));
+        if (helpNode !== null) {
+            helpNode.hidden = !hasHelp;
+        }
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'help':
@@ -309,22 +409,32 @@ class AudioSourceEntry {
         }
     }
 
+    /**
+     * @param {import('settings').AudioSourceType} value
+     */
     async _setType(value) {
         this._type = value;
         this._updateTypeParameter();
         await this._parent.settingsController.setProfileSetting(`audio.sources[${this._index}].type`, value);
     }
 
+    /**
+     * @param {string} value
+     */
     async _setUrl(value) {
         this._url = value;
         await this._parent.settingsController.setProfileSetting(`audio.sources[${this._index}].url`, value);
     }
 
+    /**
+     * @param {string} value
+     */
     async _setVoice(value) {
         this._voice = value;
         await this._parent.settingsController.setProfileSetting(`audio.sources[${this._index}].voice`, value);
     }
 
+    /** */
     _updateTypeParameter() {
         let field = null;
         switch (this._type) {
@@ -337,11 +447,14 @@ class AudioSourceEntry {
                 field = 'voice';
                 break;
         }
-        for (const node of this._node.querySelectorAll('.audio-source-parameter-container')) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._node.querySelectorAll('.audio-source-parameter-container'))) {
             node.hidden = (field === null || node.dataset.field !== field);
         }
     }
 
+    /**
+     * @param {import('settings').AudioSourceType} type
+     */
     _showHelp(type) {
         switch (type) {
             case 'custom':
@@ -358,7 +471,31 @@ class AudioSourceEntry {
         }
     }
 
+    /**
+     * @param {string} name
+     */
     _showModal(name) {
-        this._parent.modalController.getModal(name).setVisible(true);
+        const modal = this._parent.modalController.getModal(name);
+        if (modal === null) { return; }
+        modal.setVisible(true);
+    }
+
+    /**
+     * @param {string} value
+     * @returns {?import('settings').AudioSourceType}
+     */
+    _normalizeAudioSourceType(value) {
+        switch (value) {
+            case 'jpod101':
+            case 'jpod101-alternate':
+            case 'jisho':
+            case 'text-to-speech':
+            case 'text-to-speech-reading':
+            case 'custom':
+            case 'custom-json':
+                return value;
+            default:
+                return null;
+        }
     }
 }
diff --git a/ext/js/pages/settings/backup-controller.js b/ext/js/pages/settings/backup-controller.js
index 2863c505..bf44bb90 100644
--- a/ext/js/pages/settings/backup-controller.js
+++ b/ext/js/pages/settings/backup-controller.js
@@ -24,18 +24,37 @@ import {yomitan} from '../../yomitan.js';
 import {DictionaryController} from './dictionary-controller.js';
 
 export class BackupController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {?import('./modal-controller.js').ModalController} modalController
+     */
     constructor(settingsController, modalController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {?import('core').TokenObject} */
         this._settingsExportToken = null;
+        /** @type {?() => void} */
         this._settingsExportRevoke = null;
+        /** @type {number} */
         this._currentVersion = 0;
+        /** @type {?import('./modal.js').Modal} */
         this._settingsResetModal = null;
+        /** @type {?import('./modal.js').Modal} */
         this._settingsImportErrorModal = null;
+        /** @type {?import('./modal.js').Modal} */
         this._settingsImportWarningModal = null;
+        /** @type {?OptionsUtil} */
         this._optionsUtil = null;
 
+        /**
+         *
+         */
         this._dictionariesDatabaseName = 'dict';
+        /**
+         *
+         */
         this._settingsExportDatabaseToken = null;
 
         try {
@@ -45,6 +64,7 @@ export class BackupController {
         }
     }
 
+    /** */
     async prepare() {
         if (this._optionsUtil !== null) {
             await this._optionsUtil.prepare();
@@ -69,13 +89,27 @@ export class BackupController {
 
     // Private
 
-    _addNodeEventListener(selector, ...args) {
+    /**
+     * @param {string} selector
+     * @param {string} eventName
+     * @param {(event: Event) => void} callback
+     * @param {boolean} capture
+     */
+    _addNodeEventListener(selector, eventName, callback, capture) {
         const node = document.querySelector(selector);
         if (node === null) { return; }
 
-        node.addEventListener(...args);
+        node.addEventListener(eventName, callback, capture);
     }
 
+    /**
+     * @param {Date} date
+     * @param {string} dateSeparator
+     * @param {string} dateTimeSeparator
+     * @param {string} timeSeparator
+     * @param {number} resolution
+     * @returns {string}
+     */
     _getSettingsExportDateString(date, dateSeparator, dateTimeSeparator, timeSeparator, resolution) {
         const values = [
             date.getUTCFullYear().toString(),
@@ -93,6 +127,10 @@ export class BackupController {
         return values.slice(0, resolution * 2 - 1).join('');
     }
 
+    /**
+     * @param {Date} date
+     * @returns {Promise<import('backup-controller').BackupData>}
+     */
     async _getSettingsExportData(date) {
         const optionsFull = await this._settingsController.getOptionsFull();
         const environment = await yomitan.api.getEnvironmentInfo();
@@ -120,11 +158,19 @@ export class BackupController {
         return data;
     }
 
+    /**
+     * @param {Blob} blob
+     * @param {string} fileName
+     */
     _saveBlob(blob, fileName) {
-        if (typeof navigator === 'object' && typeof navigator.msSaveBlob === 'function') {
-            if (navigator.msSaveBlob(blob)) {
-                return;
-            }
+        if (
+            typeof navigator === 'object' && navigator !== null &&
+            // @ts-expect-error - call for legacy Edge
+            typeof navigator.msSaveBlob === 'function' &&
+            // @ts-expect-error - call for legacy Edge
+            navigator.msSaveBlob(blob)
+        ) {
+            return;
         }
 
         const blobUrl = URL.createObjectURL(blob);
@@ -146,6 +192,7 @@ export class BackupController {
         setTimeout(revoke, 60000);
     }
 
+    /** */
     async _onSettingsExportClick() {
         if (this._settingsExportRevoke !== null) {
             this._settingsExportRevoke();
@@ -154,6 +201,7 @@ export class BackupController {
 
         const date = new Date(Date.now());
 
+        /** @type {?import('core').TokenObject} */
         const token = {};
         this._settingsExportToken = token;
         const data = await this._getSettingsExportData(date);
@@ -168,10 +216,14 @@ export class BackupController {
         this._saveBlob(blob, fileName);
     }
 
+    /**
+     * @param {File} file
+     * @returns {Promise<ArrayBuffer>}
+     */
     _readFileArrayBuffer(file) {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
+            reader.onload = () => resolve(/** @type {ArrayBuffer} */ (reader.result));
             reader.onerror = () => reject(reader.error);
             reader.readAsArrayBuffer(file);
         });
@@ -179,19 +231,33 @@ export class BackupController {
 
     // Importing
 
+    /**
+     * @param {import('settings').Options} optionsFull
+     */
     async _settingsImportSetOptionsFull(optionsFull) {
         await this._settingsController.setAllSettings(optionsFull);
     }
 
+    /**
+     * @param {Error} error
+     */
     _showSettingsImportError(error) {
         log.error(error);
-        document.querySelector('#settings-import-error-message').textContent = `${error}`;
-        this._settingsImportErrorModal.setVisible(true);
+        const element = /** @type {HTMLElement} */ (document.querySelector('#settings-import-error-message'));
+        element.textContent = `${error}`;
+        if (this._settingsImportErrorModal !== null) {
+            this._settingsImportErrorModal.setVisible(true);
+        }
     }
 
+    /**
+     * @param {Set<string>} warnings
+     * @returns {Promise<import('backup-controller').ShowSettingsImportWarningsResult>}
+     */
     async _showSettingsImportWarnings(warnings) {
         const modal = this._settingsImportWarningModal;
-        const buttons = document.querySelectorAll('.settings-import-warning-import-button');
+        if (modal === null) { return {result: false}; }
+        const buttons = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.settings-import-warning-import-button'));
         const messageContainer = document.querySelector('#settings-import-warning-message');
         if (buttons.length === 0 || messageContainer === null) {
             return {result: false};
@@ -212,20 +278,30 @@ export class BackupController {
 
         // Wait for modal to close
         return new Promise((resolve) => {
+            /**
+             * @param {MouseEvent} e
+             */
             const onButtonClick = (e) => {
+                const element = /** @type {HTMLElement} */ (e.currentTarget);
                 e.preventDefault();
                 complete({
                     result: true,
-                    sanitize: e.currentTarget.dataset.importSanitize === 'true'
+                    sanitize: element.dataset.importSanitize === 'true'
                 });
                 modal.setVisible(false);
             };
+            /**
+             * @param {import('panel-element').VisibilityChangedEvent} details
+             */
             const onModalVisibilityChanged = ({visible}) => {
                 if (visible) { return; }
                 complete({result: false});
             };
 
             let completed = false;
+            /**
+             * @param {import('backup-controller').ShowSettingsImportWarningsResult} result
+             */
             const complete = (result) => {
                 if (completed) { return; }
                 completed = true;
@@ -246,6 +322,10 @@ export class BackupController {
         });
     }
 
+    /**
+     * @param {string} urlString
+     * @returns {boolean}
+     */
     _isLocalhostUrl(urlString) {
         try {
             const url = new URL(urlString);
@@ -266,6 +346,11 @@ export class BackupController {
         return false;
     }
 
+    /**
+     * @param {import('settings').ProfileOptions} options
+     * @param {boolean} dryRun
+     * @returns {string[]}
+     */
     _settingsImportSanitizeProfileOptions(options, dryRun) {
         const warnings = [];
 
@@ -308,6 +393,11 @@ export class BackupController {
         return warnings;
     }
 
+    /**
+     * @param {import('settings').Options} optionsFull
+     * @param {boolean} dryRun
+     * @returns {Set<string>}
+     */
     _settingsImportSanitizeOptions(optionsFull, dryRun) {
         const warnings = new Set();
 
@@ -328,7 +418,12 @@ export class BackupController {
         return warnings;
     }
 
+    /**
+     * @param {File} file
+     */
     async _importSettingsFile(file) {
+        if (this._optionsUtil === null) { throw new Error('OptionsUtil invalid'); }
+
         const dataString = ArrayBufferUtil.arrayBufferUtf8Decode(await this._readFileArrayBuffer(file));
         const data = JSON.parse(dataString);
 
@@ -383,31 +478,44 @@ export class BackupController {
         await this._settingsImportSetOptionsFull(optionsFull);
     }
 
+    /** */
     _onSettingsImportClick() {
-        document.querySelector('#settings-import-file').click();
+        const element = /** @type {HTMLElement} */ (document.querySelector('#settings-import-file'));
+        element.click();
     }
 
+    /**
+     * @param {Event} e
+     */
     async _onSettingsImportFileChange(e) {
-        const files = e.target.files;
-        if (files.length === 0) { return; }
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const files = element.files;
+        if (files === null || files.length === 0) { return; }
 
         const file = files[0];
-        e.target.value = null;
+        element.value = '';
         try {
             await this._importSettingsFile(file);
         } catch (error) {
-            this._showSettingsImportError(error);
+            this._showSettingsImportError(error instanceof Error ? error : new Error(`${error}`));
         }
     }
 
     // Resetting
 
+    /** */
     _onSettingsResetClick() {
+        if (this._settingsResetModal === null) { return; }
         this._settingsResetModal.setVisible(true);
     }
 
+    /** */
     async _onSettingsResetConfirmClick() {
-        this._settingsResetModal.setVisible(false);
+        if (this._optionsUtil === null) { throw new Error('OptionsUtil invalid'); }
+
+        if (this._settingsResetModal !== null) {
+            this._settingsResetModal.setVisible(false);
+        }
 
         // Get default options
         const optionsFull = this._optionsUtil.getDefault();
@@ -425,8 +533,12 @@ export class BackupController {
 
     // Exporting Dictionaries Database
 
+    /**
+     * @param {string} message
+     * @param {boolean} [isWarning]
+     */
     _databaseExportImportErrorMessage(message, isWarning=false) {
-        const errorMessageContainer = document.querySelector('#db-ops-error-report');
+        const errorMessageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-error-report'));
         errorMessageContainer.style.display = 'block';
         errorMessageContainer.textContent = message;
 
@@ -439,9 +551,12 @@ export class BackupController {
         }
     }
 
+    /**
+     * @param {{totalRows: number, completedRows: number, done: boolean}} details
+     */
     _databaseExportProgressCallback({totalRows, completedRows, done}) {
         console.log(`Progress: ${completedRows} of ${totalRows} rows completed`);
-        const messageContainer = document.querySelector('#db-ops-progress-report');
+        const messageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-progress-report'));
         messageContainer.style.display = 'block';
         messageContainer.textContent = `Export Progress: ${completedRows} of ${totalRows} rows completed`;
 
@@ -451,6 +566,10 @@ export class BackupController {
         }
     }
 
+    /**
+     * @param {string} databaseName
+     * @returns {Promise<Blob>}
+     */
     async _exportDatabase(databaseName) {
         const db = await new Dexie(databaseName).open();
         const blob = await db.export({progressCallback: this._databaseExportProgressCallback});
@@ -458,6 +577,9 @@ export class BackupController {
         return blob;
     }
 
+    /**
+     *
+     */
     async _onSettingsExportDatabaseClick() {
         if (this._settingsExportDatabaseToken !== null) {
             // An existing import or export is in progress.
@@ -465,7 +587,7 @@ export class BackupController {
             return;
         }
 
-        const errorMessageContainer = document.querySelector('#db-ops-error-report');
+        const errorMessageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-error-report'));
         errorMessageContainer.style.display = 'none';
 
         const date = new Date(Date.now());
@@ -488,9 +610,12 @@ export class BackupController {
 
     // Importing Dictionaries Database
 
+    /**
+     * @param {{totalRows: number, completedRows: number, done: boolean}} details
+     */
     _databaseImportProgressCallback({totalRows, completedRows, done}) {
         console.log(`Progress: ${completedRows} of ${totalRows} rows completed`);
-        const messageContainer = document.querySelector('#db-ops-progress-report');
+        const messageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-progress-report'));
         messageContainer.style.display = 'block';
         messageContainer.style.color = '#4169e1';
         messageContainer.textContent = `Import Progress: ${completedRows} of ${totalRows} rows completed`;
@@ -502,6 +627,10 @@ export class BackupController {
         }
     }
 
+    /**
+     * @param {string} databaseName
+     * @param {File} file
+     */
     async _importDatabase(databaseName, file) {
         await yomitan.api.purgeDatabase();
         await Dexie.import(file, {progressCallback: this._databaseImportProgressCallback});
@@ -509,10 +638,14 @@ export class BackupController {
         yomitan.trigger('storageChanged');
     }
 
+    /** */
     _onSettingsImportDatabaseClick() {
-        document.querySelector('#settings-import-db').click();
+        /** @type {HTMLElement} */ (document.querySelector('#settings-import-db')).click();
     }
 
+    /**
+     * @param {Event} e
+     */
     async _onSettingsImportDatabaseChange(e) {
         if (this._settingsExportDatabaseToken !== null) {
             // An existing import or export is in progress.
@@ -520,22 +653,23 @@ export class BackupController {
             return;
         }
 
-        const errorMessageContainer = document.querySelector('#db-ops-error-report');
+        const errorMessageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-error-report'));
         errorMessageContainer.style.display = 'none';
 
-        const files = e.target.files;
-        if (files.length === 0) { return; }
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const files = element.files;
+        if (files === null || files.length === 0) { return; }
 
         const pageExitPrevention = this._settingsController.preventPageExit();
         const file = files[0];
-        e.target.value = null;
+        element.value = '';
         try {
             const token = {};
             this._settingsExportDatabaseToken = token;
             await this._importDatabase(this._dictionariesDatabaseName, file);
         } catch (error) {
             console.log(error);
-            const messageContainer = document.querySelector('#db-ops-progress-report');
+            const messageContainer = /** @type {HTMLElement} */ (document.querySelector('#db-ops-progress-report'));
             messageContainer.style.color = 'red';
             this._databaseExportImportErrorMessage('Encountered errors when importing. Please restart the browser and try again. If it continues to fail, reinstall Yomitan and import dictionaries one-by-one.');
         } finally {
diff --git a/ext/js/pages/settings/collapsible-dictionary-controller.js b/ext/js/pages/settings/collapsible-dictionary-controller.js
index c8ce5e4f..355292ad 100644
--- a/ext/js/pages/settings/collapsible-dictionary-controller.js
+++ b/ext/js/pages/settings/collapsible-dictionary-controller.js
@@ -20,18 +20,29 @@ import {EventListenerCollection} from '../../core.js';
 import {yomitan} from '../../yomitan.js';
 
 export class CollapsibleDictionaryController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?import('core').TokenObject} */
         this._getDictionaryInfoToken = null;
+        /** @type {Map<string, import('dictionary-importer').Summary>} */
         this._dictionaryInfoMap = new Map();
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?HTMLElement} */
         this._container = null;
+        /** @type {HTMLSelectElement[]} */
         this._selects = [];
+        /** @type {?HTMLSelectElement} */
         this._allSelect = null;
     }
 
+    /** */
     async prepare() {
-        this._container = document.querySelector('#collapsible-dictionary-list');
+        this._container = /** @type {HTMLElement} */ (document.querySelector('#collapsible-dictionary-list'));
 
         await this._onDatabaseUpdated();
 
@@ -42,7 +53,9 @@ export class CollapsibleDictionaryController {
 
     // Private
 
+    /** */
     async _onDatabaseUpdated() {
+        /** @type {?import('core').TokenObject} */
         const token = {};
         this._getDictionaryInfoToken = token;
         const dictionaries = await this._settingsController.getDictionaryInfo();
@@ -54,10 +67,12 @@ export class CollapsibleDictionaryController {
             this._dictionaryInfoMap.set(entry.title, entry);
         }
 
-        const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        await this._onDictionarySettingsReordered();
     }
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         this._eventListeners.removeAllEventListeners();
         this._selects = [];
@@ -79,25 +94,37 @@ export class CollapsibleDictionaryController {
             this._selects.push(select);
         }
 
-        this._container.textContent = '';
-        this._container.appendChild(fragment);
+        const container = /** @type {HTMLElement} */ (this._container);
+        container.textContent = '';
+        container.appendChild(fragment);
     }
 
+    /** */
     _onDefinitionsCollapsibleChange() {
         this._updateAllSelectFresh();
     }
 
+    /**
+     * @param {Event} e
+     */
     _onAllSelectChange(e) {
-        const {value} = e.currentTarget;
-        if (value === 'varies') { return; }
-        this._setDefinitionsCollapsibleAll(value);
+        const {value} = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const value2 = this._normalizeDictionaryDefinitionsCollapsible(value);
+        if (value2 === null) { return; }
+        this._setDefinitionsCollapsibleAll(value2);
     }
 
+    /** */
     async _onDictionarySettingsReordered() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /**
+     * @param {DocumentFragment} fragment
+     * @param {import('settings').ProfileOptions} options
+     */
     _setupAllSelect(fragment, options) {
         const select = this._addSelect(fragment, 'All', '');
 
@@ -113,23 +140,33 @@ export class CollapsibleDictionaryController {
         this._updateAllSelect(options);
     }
 
+    /**
+     * @param {DocumentFragment} fragment
+     * @param {string} dictionary
+     * @param {string} version
+     * @returns {HTMLSelectElement}
+     */
     _addSelect(fragment, dictionary, version) {
         const node = this._settingsController.instantiateTemplate('collapsible-dictionary-item');
         fragment.appendChild(node);
 
-        const nameNode = node.querySelector('.dictionary-title');
+        const nameNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-title'));
         nameNode.textContent = dictionary;
 
-        const versionNode = node.querySelector('.dictionary-version');
+        const versionNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-version'));
         versionNode.textContent = version;
 
-        return node.querySelector('.definitions-collapsible');
+        return /** @type {HTMLSelectElement} */ (node.querySelector('.definitions-collapsible'));
     }
 
+    /** */
     async _updateAllSelectFresh() {
         this._updateAllSelect(await this._settingsController.getOptions());
     }
 
+    /**
+     * @param {import('settings').ProfileOptions} options
+     */
     _updateAllSelect(options) {
         let value = null;
         let varies = false;
@@ -142,11 +179,17 @@ export class CollapsibleDictionaryController {
             }
         }
 
-        this._allSelect.value = (varies || value === null ? 'varies' : value);
+        if (this._allSelect !== null) {
+            this._allSelect.value = (varies || value === null ? 'varies' : value);
+        }
     }
 
+    /**
+     * @param {import('settings').DictionaryDefinitionsCollapsible} value
+     */
     async _setDefinitionsCollapsibleAll(value) {
         const options = await this._settingsController.getOptions();
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [];
         const {dictionaries} = options;
         for (let i = 0, ii = dictionaries.length; i < ii; ++i) {
@@ -158,4 +201,21 @@ export class CollapsibleDictionaryController {
             select.value = value;
         }
     }
+
+    /**
+     * @param {string} value
+     * @returns {?import('settings').DictionaryDefinitionsCollapsible}
+     */
+    _normalizeDictionaryDefinitionsCollapsible(value) {
+        switch (value) {
+            case 'not-collapsible':
+            case 'expanded':
+            case 'collapsed':
+            case 'force-collapsed':
+            case 'force-expanded':
+                return value;
+            default:
+                return null;
+        }
+    }
 }
diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js
index 155ce55e..de63b200 100644
--- a/ext/js/pages/settings/dictionary-controller.js
+++ b/ext/js/pages/settings/dictionary-controller.js
@@ -21,27 +21,49 @@ import {DictionaryWorker} from '../../language/dictionary-worker.js';
 import {yomitan} from '../../yomitan.js';
 
 class DictionaryEntry {
+    /**
+     * @param {DictionaryController} dictionaryController
+     * @param {DocumentFragment} fragment
+     * @param {number} index
+     * @param {import('dictionary-importer').Summary} dictionaryInfo
+     */
     constructor(dictionaryController, fragment, index, dictionaryInfo) {
+        /** @type {DictionaryController} */
         this._dictionaryController = dictionaryController;
+        /** @type {number} */
         this._index = index;
+        /** @type {import('dictionary-importer').Summary} */
         this._dictionaryInfo = dictionaryInfo;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?import('dictionary-database').DictionaryCountGroup} */
         this._counts = null;
+        /** @type {ChildNode[]} */
         this._nodes = [...fragment.childNodes];
-        this._enabledCheckbox = fragment.querySelector('.dictionary-enabled');
-        this._priorityInput = fragment.querySelector('.dictionary-priority');
-        this._menuButton = fragment.querySelector('.dictionary-menu-button');
-        this._outdatedButton = fragment.querySelector('.dictionary-outdated-button');
-        this._integrityButton = fragment.querySelector('.dictionary-integrity-button');
-        this._titleNode = fragment.querySelector('.dictionary-title');
-        this._versionNode = fragment.querySelector('.dictionary-version');
-        this._titleContainer = fragment.querySelector('.dictionary-item-title-container');
-    }
-
+        /** @type {HTMLInputElement} */
+        this._enabledCheckbox = /** @type {HTMLInputElement} */ (fragment.querySelector('.dictionary-enabled'));
+        /** @type {HTMLInputElement} */
+        this._priorityInput = /** @type {HTMLInputElement} */ (fragment.querySelector('.dictionary-priority'));
+        /** @type {HTMLButtonElement} */
+        this._menuButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-menu-button'));
+        /** @type {HTMLButtonElement} */
+        this._outdatedButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-outdated-button'));
+        /** @type {HTMLButtonElement} */
+        this._integrityButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-integrity-button'));
+        /** @type {HTMLElement} */
+        this._titleNode = /** @type {HTMLElement} */ (fragment.querySelector('.dictionary-title'));
+        /** @type {HTMLElement} */
+        this._versionNode = /** @type {HTMLElement} */ (fragment.querySelector('.dictionary-version'));
+        /** @type {HTMLElement} */
+        this._titleContainer = /** @type {HTMLElement} */ (fragment.querySelector('.dictionary-item-title-container'));
+    }
+
+    /** @type {string} */
     get dictionaryTitle() {
         return this._dictionaryInfo.title;
     }
 
+    /** */
     prepare() {
         const index = this._index;
         const {title, revision, version} = this._dictionaryInfo;
@@ -58,6 +80,7 @@ class DictionaryEntry {
         this._eventListeners.addEventListener(this._integrityButton, 'click', this._onIntegrityButtonClick.bind(this), false);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         for (const node of this._nodes) {
@@ -68,17 +91,26 @@ class DictionaryEntry {
         this._nodes = [];
     }
 
+    /**
+     * @param {import('dictionary-database').DictionaryCountGroup} counts
+     */
     setCounts(counts) {
         this._counts = counts;
         this._integrityButton.hidden = false;
     }
 
+    /**
+     * @param {boolean} value
+     */
     setEnabled(value) {
         this._enabledCheckbox.checked = value;
     }
 
     // Private
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const bodyNode = e.detail.menu.bodyNode;
         const count = this._dictionaryController.dictionaryOptionCount;
@@ -87,6 +119,9 @@ class DictionaryEntry {
         this._setMenuActionEnabled(bodyNode, 'moveTo', count > 1);
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'delete':
@@ -107,36 +142,48 @@ class DictionaryEntry {
         }
     }
 
+    /**
+     * @param {import('dom-data-binder').SettingChangedEvent} e
+     */
     _onEnabledChanged(e) {
         const {detail: {value}} = e;
         this._titleContainer.dataset.enabled = `${value}`;
         this._dictionaryController.updateDictionariesEnabled();
     }
 
+    /** */
     _onOutdatedButtonClick() {
         this._showDetails();
     }
 
+    /** */
     _onIntegrityButtonClick() {
         this._showDetails();
     }
 
+    /** */
     _showDetails() {
         const {title, revision, version, prefixWildcardsSupported} = this._dictionaryInfo;
 
         const modal = this._dictionaryController.modalController.getModal('dictionary-details');
+        if (modal === null) { return; }
 
-        modal.node.querySelector('.dictionary-title').textContent = title;
-        modal.node.querySelector('.dictionary-version').textContent = `rev.${revision}`;
-        modal.node.querySelector('.dictionary-outdated-notification').hidden = (version >= 3);
-        modal.node.querySelector('.dictionary-counts').textContent = this._counts !== null ? JSON.stringify(this._counts, null, 4) : '';
-        modal.node.querySelector('.dictionary-prefix-wildcard-searches-supported').checked = prefixWildcardsSupported;
-        this._setupDetails(modal.node.querySelector('.dictionary-details-table'));
+        /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-title')).textContent = title;
+        /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-version')).textContent = `rev.${revision}`;
+        /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-outdated-notification')).hidden = (version >= 3);
+        /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-counts')).textContent = this._counts !== null ? JSON.stringify(this._counts, null, 4) : '';
+        /** @type {HTMLInputElement} */ (modal.node.querySelector('.dictionary-prefix-wildcard-searches-supported')).checked = prefixWildcardsSupported;
+        this._setupDetails(/** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-details-table')));
 
         modal.setVisible(true);
     }
 
+    /**
+     * @param {Element} detailsTable
+     * @returns {boolean}
+     */
     _setupDetails(detailsTable) {
+        /** @type {[label: string, key: 'author'|'url'|'description'|'attribution'][]} */
         const targets = [
             ['Author', 'author'],
             ['URL', 'url'],
@@ -151,10 +198,10 @@ class DictionaryEntry {
             const info = dictionaryInfo[key];
             if (typeof info !== 'string') { continue; }
 
-            const details = this._dictionaryController.instantiateTemplate('dictionary-details-entry');
+            const details = /** @type {HTMLElement} */ (this._dictionaryController.instantiateTemplate('dictionary-details-entry'));
             details.dataset.type = key;
-            details.querySelector('.dictionary-details-entry-label').textContent = `${label}:`;
-            details.querySelector('.dictionary-details-entry-info').textContent = info;
+            /** @type {HTMLElement} */ (details.querySelector('.dictionary-details-entry-label')).textContent = `${label}:`;
+            /** @type {HTMLElement} */ (details.querySelector('.dictionary-details-entry-info')).textContent = info;
             fragment.appendChild(details);
 
             any = true;
@@ -165,28 +212,40 @@ class DictionaryEntry {
         return any;
     }
 
+    /** */
     _delete() {
         this._dictionaryController.deleteDictionary(this.dictionaryTitle);
     }
 
+    /**
+     * @param {number} offset
+     */
     _move(offset) {
         this._dictionaryController.moveDictionaryOptions(this._index, this._index + offset);
     }
 
+    /**
+     * @param {Element} menu
+     * @param {string} action
+     * @param {boolean} enabled
+     */
     _setMenuActionEnabled(menu, action, enabled) {
-        const element = menu.querySelector(`[data-menu-action="${action}"]`);
+        const element = /** @type {?HTMLButtonElement} */ (menu.querySelector(`[data-menu-action="${action}"]`));
         if (element === null) { return; }
         element.disabled = !enabled;
     }
 
+    /** */
     _showMoveToModal() {
         const {title} = this._dictionaryInfo;
         const count = this._dictionaryController.dictionaryOptionCount;
         const modal = this._dictionaryController.modalController.getModal('dictionary-move-location');
-        const input = modal.node.querySelector('#dictionary-move-location');
+        if (modal === null) { return; }
+        const input = /** @type {HTMLInputElement} */ (modal.node.querySelector('#dictionary-move-location'));
+        const titleNode = /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-title'));
 
         modal.node.dataset.index = `${this._index}`;
-        modal.node.querySelector('.dictionary-title').textContent = title;
+        titleNode.textContent = title;
         input.value = `${this._index + 1}`;
         input.max = `${count}`;
 
@@ -195,25 +254,45 @@ class DictionaryEntry {
 }
 
 class DictionaryExtraInfo {
+    /**
+     * @param {DictionaryController} parent
+     * @param {import('dictionary-database').DictionaryCountGroup} totalCounts
+     * @param {import('dictionary-database').DictionaryCountGroup} remainders
+     * @param {number} totalRemainder
+     */
     constructor(parent, totalCounts, remainders, totalRemainder) {
+        /** @type {DictionaryController} */
         this._parent = parent;
+        /** @type {import('dictionary-database').DictionaryCountGroup} */
         this._totalCounts = totalCounts;
+        /** @type {import('dictionary-database').DictionaryCountGroup} */
         this._remainders = remainders;
+        /** @type {number} */
         this._totalRemainder = totalRemainder;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
-        this._nodes = null;
+        /** @type {ChildNode[]} */
+        this._nodes = [];
     }
 
+    /**
+     * @param {HTMLElement} container
+     */
     prepare(container) {
         const fragment = this._parent.instantiateTemplateFragment('dictionary-extra');
-        this._nodes = [...fragment.childNodes];
+        for (const node of fragment.childNodes) {
+            this._nodes.push(node);
+        }
+
+        const dictionaryIntegrityButton = /** @type {HTMLButtonElement} */ (fragment.querySelector('.dictionary-integrity-button'));
 
         this._setTitle(fragment.querySelector('.dictionary-total-count'));
-        this._eventListeners.addEventListener(fragment.querySelector('.dictionary-integrity-button'), 'click', this._onIntegrityButtonClick.bind(this), false);
+        this._eventListeners.addEventListener(dictionaryIntegrityButton, 'click', this._onIntegrityButtonClick.bind(this), false);
 
         container.appendChild(fragment);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         for (const node of this._nodes) {
@@ -221,74 +300,110 @@ class DictionaryExtraInfo {
                 node.parentNode.removeChild(node);
             }
         }
-        this._nodes = [];
+        this._nodes.length =0;
     }
 
     // Private
 
+    /** */
     _onIntegrityButtonClick() {
         this._showDetails();
     }
 
+    /** */
     _showDetails() {
         const modal = this._parent.modalController.getModal('dictionary-extra-data');
+        if (modal === null) { return; }
+
+        const dictionaryCounts = /** @type {HTMLElement} */ (modal.node.querySelector('.dictionary-counts'));
 
         const info = {counts: this._totalCounts, remainders: this._remainders};
-        modal.node.querySelector('.dictionary-counts').textContent = JSON.stringify(info, null, 4);
+        dictionaryCounts.textContent = JSON.stringify(info, null, 4);
         this._setTitle(modal.node.querySelector('.dictionary-total-count'));
 
         modal.setVisible(true);
     }
 
+    /**
+     * @param {?Element} node
+     */
     _setTitle(node) {
+        if (node === null) { return; }
         node.textContent = `${this._totalRemainder} item${this._totalRemainder !== 1 ? 's' : ''}`;
     }
 }
 
 export class DictionaryController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('./modal-controller.js').ModalController} modalController
+     * @param {import('./status-footer.js').StatusFooter} statusFooter
+     */
     constructor(settingsController, modalController, statusFooter) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {import('./status-footer.js').StatusFooter} */
         this._statusFooter = statusFooter;
+        /** @type {?import('dictionary-importer').Summary[]} */
         this._dictionaries = null;
+        /** @type {DictionaryEntry[]} */
         this._dictionaryEntries = [];
+        /** @type {?import('core').TokenObject} */
         this._databaseStateToken = null;
+        /** @type {boolean} */
         this._checkingIntegrity = false;
+        /** @type {?HTMLButtonElement} */
         this._checkIntegrityButton = null;
+        /** @type {?HTMLElement} */
         this._dictionaryEntryContainer = null;
+        /** @type {?HTMLElement} */
         this._dictionaryInstallCountNode = null;
+        /** @type {?HTMLElement} */
         this._dictionaryEnabledCountNode = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._noDictionariesInstalledWarnings = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._noDictionariesEnabledWarnings = null;
+        /** @type {?import('./modal.js').Modal} */
         this._deleteDictionaryModal = null;
+        /** @type {?HTMLInputElement} */
         this._allCheckbox = null;
+        /** @type {?DictionaryExtraInfo} */
         this._extraInfo = null;
+        /** @type {boolean} */
         this._isDeleting = false;
     }
 
+    /** @type {import('./modal-controller.js').ModalController} */
     get modalController() {
         return this._modalController;
     }
 
+    /** @type {number} */
     get dictionaryOptionCount() {
         return this._dictionaryEntries.length;
     }
 
+    /** */
     async prepare() {
-        this._checkIntegrityButton = document.querySelector('#dictionary-check-integrity');
-        this._dictionaryEntryContainer = document.querySelector('#dictionary-list');
-        this._dictionaryInstallCountNode = document.querySelector('#dictionary-install-count');
-        this._dictionaryEnabledCountNode = document.querySelector('#dictionary-enabled-count');
-        this._noDictionariesInstalledWarnings = document.querySelectorAll('.no-dictionaries-installed-warning');
-        this._noDictionariesEnabledWarnings = document.querySelectorAll('.no-dictionaries-enabled-warning');
+        this._checkIntegrityButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-check-integrity'));
+        this._dictionaryEntryContainer = /** @type {HTMLElement} */ (document.querySelector('#dictionary-list'));
+        this._dictionaryInstallCountNode = /** @type {HTMLElement} */ (document.querySelector('#dictionary-install-count'));
+        this._dictionaryEnabledCountNode = /** @type {HTMLElement} */ (document.querySelector('#dictionary-enabled-count'));
+        this._noDictionariesInstalledWarnings = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.no-dictionaries-installed-warning'));
+        this._noDictionariesEnabledWarnings = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.no-dictionaries-enabled-warning'));
         this._deleteDictionaryModal = this._modalController.getModal('dictionary-confirm-delete');
-        this._allCheckbox = document.querySelector('#all-dictionaries-enabled');
+        this._allCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#all-dictionaries-enabled'));
+        const dictionaryDeleteButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-confirm-delete-button'));
+        const dictionaryMoveButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-move-button'));
 
         yomitan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
         this._allCheckbox.addEventListener('change', this._onAllCheckboxChange.bind(this), false);
-        document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
-        document.querySelector('#dictionary-move-button').addEventListener('click', this._onDictionaryMoveButtonClick.bind(this), false);
+        dictionaryDeleteButton.addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
+        dictionaryMoveButton.addEventListener('click', this._onDictionaryMoveButtonClick.bind(this), false);
         if (this._checkIntegrityButton !== null) {
             this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false);
         }
@@ -298,14 +413,22 @@ export class DictionaryController {
         await this._onDatabaseUpdated();
     }
 
+    /**
+     * @param {string} dictionaryTitle
+     */
     deleteDictionary(dictionaryTitle) {
         if (this._isDeleting) { return; }
-        const modal = this._deleteDictionaryModal;
+        const modal = /** @type {import('./modal.js').Modal} */ (this._deleteDictionaryModal);
         modal.node.dataset.dictionaryTitle = dictionaryTitle;
-        modal.node.querySelector('#dictionary-confirm-delete-name').textContent = dictionaryTitle;
+        const nameElement = /** @type {Element} */ (modal.node.querySelector('#dictionary-confirm-delete-name'));
+        nameElement.textContent = dictionaryTitle;
         modal.setVisible(true);
     }
 
+    /**
+     * @param {number} currentIndex
+     * @param {number} targetIndex
+     */
     async moveDictionaryOptions(currentIndex, targetIndex) {
         const options = await this._settingsController.getOptions();
         const {dictionaries} = options;
@@ -326,24 +449,40 @@ export class DictionaryController {
             value: dictionaries
         }]);
 
-        this._settingsController.trigger('dictionarySettingsReordered', {source: this});
+        /** @type {import('settings-controller').DictionarySettingsReorderedEvent} */
+        const event = {source: this};
+        this._settingsController.trigger('dictionarySettingsReordered', event);
 
         await this._updateEntries();
     }
 
+    /**
+     * @param {string} name
+     * @returns {Element}
+     */
     instantiateTemplate(name) {
         return this._settingsController.instantiateTemplate(name);
     }
 
+    /**
+     * @param {string} name
+     * @returns {DocumentFragment}
+     */
     instantiateTemplateFragment(name) {
         return this._settingsController.instantiateTemplateFragment(name);
     }
 
+    /** */
     async updateDictionariesEnabled() {
         const options = await this._settingsController.getOptions();
         this._updateDictionariesEnabledWarnings(options);
     }
 
+    /**
+     * @param {string} name
+     * @param {boolean} enabled
+     * @returns {import('settings').DictionaryOptions}
+     */
     static createDefaultDictionarySettings(name, enabled) {
         return {
             name,
@@ -354,6 +493,13 @@ export class DictionaryController {
         };
     }
 
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('dictionary-importer').Summary[]|undefined} dictionaries
+     * @param {import('settings').Options|undefined} optionsFull
+     * @param {boolean} modifyGlobalSettings
+     * @param {boolean} newDictionariesEnabled
+     */
     static async ensureDictionarySettings(settingsController, dictionaries, optionsFull, modifyGlobalSettings, newDictionariesEnabled) {
         if (typeof dictionaries === 'undefined') {
             dictionaries = await settingsController.getDictionaryInfo();
@@ -367,6 +513,7 @@ export class DictionaryController {
             installedDictionaries.add(title);
         }
 
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [];
         const {profiles} = optionsFull;
         for (let i = 0, ii = profiles.length; i < ii; ++i) {
@@ -405,6 +552,9 @@ export class DictionaryController {
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         this._updateDictionariesEnabledWarnings(options);
         if (this._dictionaries !== null) {
@@ -412,7 +562,9 @@ export class DictionaryController {
         }
     }
 
+    /** */
     async _onDatabaseUpdated() {
+        /** @type {?import('core').TokenObject} */
         const token = {};
         this._databaseStateToken = token;
         this._dictionaries = null;
@@ -423,14 +575,18 @@ export class DictionaryController {
         await this._updateEntries();
     }
 
+    /** */
     _onAllCheckboxChange() {
-        const value = this._allCheckbox.checked;
-        this._allCheckbox.checked = !value;
+        const allCheckbox = /** @type {HTMLInputElement} */ (this._allCheckbox);
+        const value = allCheckbox.checked;
+        allCheckbox.checked = !value;
         this._setAllDictionariesEnabled(value);
     }
 
+    /** */
     async _updateEntries() {
         const dictionaries = this._dictionaries;
+        if (dictionaries === null) { return; }
         this._updateMainDictionarySelectOptions(dictionaries);
 
         for (const entry of this._dictionaryEntries) {
@@ -444,7 +600,7 @@ export class DictionaryController {
         }
 
         const hasDictionary = (dictionaries.length > 0);
-        for (const node of this._noDictionariesInstalledWarnings) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._noDictionariesInstalledWarnings)) {
             node.hidden = hasDictionary;
         }
 
@@ -453,8 +609,9 @@ export class DictionaryController {
         const options = await this._settingsController.getOptions();
         this._updateDictionariesEnabledWarnings(options);
 
+        /** @type {Map<string, import('dictionary-importer').Summary>} */
         const dictionaryInfoMap = new Map();
-        for (const dictionary of this._dictionaries) {
+        for (const dictionary of dictionaries) {
             dictionaryInfoMap.set(dictionary.title, dictionary);
         }
 
@@ -467,6 +624,9 @@ export class DictionaryController {
         }
     }
 
+    /**
+     * @param {import('settings').ProfileOptions} options
+     */
     _updateDictionariesEnabledWarnings(options) {
         const {dictionaries} = options;
         let enabledDictionaryCountValid = 0;
@@ -489,7 +649,7 @@ export class DictionaryController {
         }
 
         const hasEnabledDictionary = (enabledDictionaryCountValid > 0);
-        for (const node of this._noDictionariesEnabledWarnings) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._noDictionariesEnabledWarnings)) {
             node.hidden = hasEnabledDictionary;
         }
 
@@ -497,7 +657,7 @@ export class DictionaryController {
             this._dictionaryEnabledCountNode.textContent = `${enabledDictionaryCountValid}`;
         }
 
-        this._allCheckbox.checked = (enabledDictionaryCount >= dictionaryCount);
+        /** @type {HTMLInputElement} */ (this._allCheckbox).checked = (enabledDictionaryCount >= dictionaryCount);
 
         const entries = this._dictionaryEntries;
         for (let i = 0, ii = Math.min(entries.length, dictionaryCount); i < ii; ++i) {
@@ -505,10 +665,13 @@ export class DictionaryController {
         }
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onDictionaryConfirmDelete(e) {
         e.preventDefault();
 
-        const modal = this._deleteDictionaryModal;
+        const modal = /** @type {import('./modal.js').Modal} */ (this._deleteDictionaryModal);
         modal.setVisible(false);
 
         const title = modal.node.dataset.dictionaryTitle;
@@ -518,24 +681,32 @@ export class DictionaryController {
         this._deleteDictionary(title);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onCheckIntegrityButtonClick(e) {
         e.preventDefault();
         this._checkIntegrity();
     }
 
+    /** */
     _onDictionaryMoveButtonClick() {
-        const modal = this._modalController.getModal('dictionary-move-location');
-        let {index} = modal.node.dataset;
-        index = Number.parseInt(index, 10);
+        const modal = /** @type {import('./modal.js').Modal} */ (this._modalController.getModal('dictionary-move-location'));
+        const {index} = modal.node.dataset;
+        if (typeof index !== 'number') { return; }
+        const indexNumber = Number.parseInt(index, 10);
 
-        let target = document.querySelector('#dictionary-move-location').value;
-        target = Number.parseInt(target, 10) - 1;
+        const targetString = /** @type {HTMLInputElement} */ (document.querySelector('#dictionary-move-location')).value;
+        const target = Number.parseInt(targetString, 10) - 1;
 
-        if (!Number.isFinite(target) || !Number.isFinite(index) || index === target) { return; }
+        if (!Number.isFinite(target) || !Number.isFinite(indexNumber) || indexNumber === target) { return; }
 
-        this.moveDictionaryOptions(index, target);
+        this.moveDictionaryOptions(indexNumber, target);
     }
 
+    /**
+     * @param {import('dictionary-importer').Summary[]} dictionaries
+     */
     _updateMainDictionarySelectOptions(dictionaries) {
         for (const select of document.querySelectorAll('[data-setting="general.mainDictionary"]')) {
             const fragment = document.createDocumentFragment();
@@ -559,6 +730,7 @@ export class DictionaryController {
         }
     }
 
+    /** */
     async _checkIntegrity() {
         if (this._dictionaries === null || this._checkingIntegrity || this._isDeleting) { return; }
 
@@ -576,13 +748,17 @@ export class DictionaryController {
                 entry.setCounts(counts[i]);
             }
 
-            this._setCounts(counts, total);
+            this._setCounts(counts, /** @type {import('dictionary-database').DictionaryCountGroup} */ (total));
         } finally {
             this._setButtonsEnabled(true);
             this._checkingIntegrity = false;
         }
     }
 
+    /**
+     * @param {import('dictionary-database').DictionaryCountGroup[]} dictionaryCounts
+     * @param {import('dictionary-database').DictionaryCountGroup} totalCounts
+     */
     _setCounts(dictionaryCounts, totalCounts) {
         const remainders = Object.assign({}, totalCounts);
         const keys = Object.keys(remainders);
@@ -603,12 +779,16 @@ export class DictionaryController {
             this._extraInfo = null;
         }
 
-        if (totalRemainder > 0) {
+        if (totalRemainder > 0 && this._dictionaryEntryContainer !== null) {
             this._extraInfo = new DictionaryExtraInfo(this, totalCounts, remainders, totalRemainder);
             this._extraInfo.prepare(this._dictionaryEntryContainer);
         }
     }
 
+    /**
+     * @param {number} index
+     * @param {import('dictionary-importer').Summary} dictionaryInfo
+     */
     _createDictionaryEntry(index, dictionaryInfo) {
         const fragment = this.instantiateTemplateFragment('dictionary');
 
@@ -616,13 +796,16 @@ export class DictionaryController {
         this._dictionaryEntries.push(entry);
         entry.prepare();
 
-        const container = this._dictionaryEntryContainer;
+        const container = /** @type {HTMLElement} */ (this._dictionaryEntryContainer);
         const relative = container.querySelector('.dictionary-item-bottom');
         container.insertBefore(fragment, relative);
 
         this._updateDictionaryEntryCount();
     }
 
+    /**
+     * @param {string} dictionaryTitle
+     */
     async _deleteDictionary(dictionaryTitle) {
         if (this._isDeleting || this._checkingIntegrity) { return; }
 
@@ -631,15 +814,18 @@ export class DictionaryController {
 
         const statusFooter = this._statusFooter;
         const progressSelector = '.dictionary-delete-progress';
-        const progressContainers = document.querySelectorAll(`#dictionaries-modal ${progressSelector}`);
-        const progressBars = document.querySelectorAll(`${progressSelector} .progress-bar`);
-        const infoLabels = document.querySelectorAll(`${progressSelector} .progress-info`);
-        const statusLabels = document.querySelectorAll(`${progressSelector} .progress-status`);
+        const progressContainers = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`#dictionaries-modal ${progressSelector}`));
+        const progressBars = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-bar`));
+        const infoLabels = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-info`));
+        const statusLabels = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-status`));
         const prevention = this._settingsController.preventPageExit();
         try {
             this._isDeleting = true;
             this._setButtonsEnabled(false);
 
+            /**
+             * @param {import('dictionary-database').DeleteDictionaryProgressData} details
+             */
             const onProgress = ({processed, count, storeCount, storesProcesed}) => {
                 const percent = (
                     (count > 0 && storesProcesed > 0) ?
@@ -672,21 +858,32 @@ export class DictionaryController {
         }
     }
 
+    /**
+     * @param {boolean} value
+     */
     _setButtonsEnabled(value) {
         value = !value;
-        for (const node of document.querySelectorAll('.dictionary-database-mutating-input')) {
+        for (const node of /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('.dictionary-database-mutating-input'))) {
             node.disabled = value;
         }
     }
 
+    /**
+     * @param {string} dictionaryTitle
+     * @param {import('dictionary-worker').DeleteProgressCallback} onProgress
+     */
     async _deleteDictionaryInternal(dictionaryTitle, onProgress) {
         await new DictionaryWorker().deleteDictionary(dictionaryTitle, onProgress);
         yomitan.api.triggerDatabaseUpdated('dictionary', 'delete');
     }
 
+    /**
+     * @param {string} dictionaryTitle
+     */
     async _deleteDictionarySettings(dictionaryTitle) {
         const optionsFull = await this._settingsController.getOptionsFull();
         const {profiles} = optionsFull;
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [];
         for (let i = 0, ii = profiles.length; i < ii; ++i) {
             const {options: {dictionaries}} = profiles[i];
@@ -705,18 +902,24 @@ export class DictionaryController {
         await this._settingsController.modifyGlobalSettings(targets);
     }
 
+    /** */
     _triggerStorageChanged() {
         yomitan.trigger('storageChanged');
     }
 
+    /** */
     _updateDictionaryEntryCount() {
-        this._dictionaryEntryContainer.dataset.count = `${this._dictionaryEntries.length}`;
+        /** @type {HTMLElement} */ (this._dictionaryEntryContainer).dataset.count = `${this._dictionaryEntries.length}`;
     }
 
+    /**
+     * @param {boolean} value
+     */
     async _setAllDictionariesEnabled(value) {
         const options = await this._settingsController.getOptions();
         const {dictionaries} = options;
 
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [];
         for (let i = 0, ii = dictionaries.length; i < ii; ++i) {
             targets.push({
diff --git a/ext/js/pages/settings/dictionary-import-controller.js b/ext/js/pages/settings/dictionary-import-controller.js
index 12d29a6f..d1255e11 100644
--- a/ext/js/pages/settings/dictionary-import-controller.js
+++ b/ext/js/pages/settings/dictionary-import-controller.js
@@ -16,25 +16,44 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {deserializeError, log} from '../../core.js';
+import {log} from '../../core.js';
+import {ExtensionError} from '../../core/extension-error.js';
 import {DictionaryWorker} from '../../language/dictionary-worker.js';
 import {yomitan} from '../../yomitan.js';
 import {DictionaryController} from './dictionary-controller.js';
 
 export class DictionaryImportController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('./modal-controller.js').ModalController} modalController
+     * @param {import('./status-footer.js').StatusFooter} statusFooter
+     */
     constructor(settingsController, modalController, statusFooter) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {import('./status-footer.js').StatusFooter} */
         this._statusFooter = statusFooter;
+        /** @type {boolean} */
         this._modifying = false;
+        /** @type {?HTMLButtonElement} */
         this._purgeButton = null;
+        /** @type {?HTMLButtonElement} */
         this._purgeConfirmButton = null;
+        /** @type {?HTMLButtonElement} */
         this._importFileButton = null;
+        /** @type {?HTMLInputElement} */
         this._importFileInput = null;
+        /** @type {?import('./modal.js').Modal} */
         this._purgeConfirmModal = null;
+        /** @type {?HTMLElement} */
         this._errorContainer = null;
+        /** @type {?HTMLElement} */
         this._spinner = null;
+        /** @type {?HTMLElement} */
         this._purgeNotification = null;
+        /** @type {[originalMessage: string, newMessage: string][]} */
         this._errorToStringOverrides = [
             [
                 'A mutation operation was attempted on a database that did not allow mutations.',
@@ -47,15 +66,16 @@ export class DictionaryImportController {
         ];
     }
 
+    /** */
     async prepare() {
-        this._purgeButton = document.querySelector('#dictionary-delete-all-button');
-        this._purgeConfirmButton = document.querySelector('#dictionary-confirm-delete-all-button');
-        this._importFileButton = document.querySelector('#dictionary-import-file-button');
-        this._importFileInput = document.querySelector('#dictionary-import-file-input');
+        this._purgeButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-delete-all-button'));
+        this._purgeConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-confirm-delete-all-button'));
+        this._importFileButton = /** @type {HTMLButtonElement} */ (document.querySelector('#dictionary-import-file-button'));
+        this._importFileInput = /** @type {HTMLInputElement} */ (document.querySelector('#dictionary-import-file-input'));
         this._purgeConfirmModal = this._modalController.getModal('dictionary-confirm-delete-all');
-        this._errorContainer = document.querySelector('#dictionary-error');
-        this._spinner = document.querySelector('#dictionary-spinner');
-        this._purgeNotification = document.querySelector('#dictionary-delete-all-status');
+        this._errorContainer = /** @type {HTMLElement} */ (document.querySelector('#dictionary-error'));
+        this._spinner = /** @type {HTMLElement} */ (document.querySelector('#dictionary-spinner'));
+        this._purgeNotification = /** @type {HTMLElement} */ (document.querySelector('#dictionary-delete-all-status'));
 
         this._purgeButton.addEventListener('click', this._onPurgeButtonClick.bind(this), false);
         this._purgeConfirmButton.addEventListener('click', this._onPurgeConfirmButtonClick.bind(this), false);
@@ -65,28 +85,41 @@ export class DictionaryImportController {
 
     // Private
 
+    /** */
     _onImportButtonClick() {
-        this._importFileInput.click();
+        /** @type {HTMLInputElement} */ (this._importFileInput).click();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onPurgeButtonClick(e) {
         e.preventDefault();
-        this._purgeConfirmModal.setVisible(true);
+        /** @type {import('./modal.js').Modal} */ (this._purgeConfirmModal).setVisible(true);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onPurgeConfirmButtonClick(e) {
         e.preventDefault();
-        this._purgeConfirmModal.setVisible(false);
+        /** @type {import('./modal.js').Modal} */ (this._purgeConfirmModal).setVisible(false);
         this._purgeDatabase();
     }
 
+    /**
+     * @param {Event} e
+     */
     _onImportFileChange(e) {
-        const node = e.currentTarget;
-        const files = [...node.files];
-        node.value = null;
-        this._importDictionaries(files);
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const {files} = node;
+        if (files === null) { return; }
+        const files2 = [...files];
+        node.value = '';
+        this._importDictionaries(files2);
     }
 
+    /** */
     async _purgeDatabase() {
         if (this._modifying) { return; }
 
@@ -106,7 +139,7 @@ export class DictionaryImportController {
                 this._showErrors(errors);
             }
         } catch (error) {
-            this._showErrors([error]);
+            this._showErrors([error instanceof Error ? error : new Error(`${error}`)]);
         } finally {
             prevention.end();
             if (purgeNotification !== null) { purgeNotification.hidden = true; }
@@ -116,16 +149,19 @@ export class DictionaryImportController {
         }
     }
 
+    /**
+     * @param {File[]} files
+     */
     async _importDictionaries(files) {
         if (this._modifying) { return; }
 
         const statusFooter = this._statusFooter;
-        const importInfo = document.querySelector('#dictionary-import-info');
+        const importInfo = /** @type {HTMLElement} */ (document.querySelector('#dictionary-import-info'));
         const progressSelector = '.dictionary-import-progress';
-        const progressContainers = document.querySelectorAll(`#dictionaries-modal ${progressSelector}`);
-        const progressBars = document.querySelectorAll(`${progressSelector} .progress-bar`);
-        const infoLabels = document.querySelectorAll(`${progressSelector} .progress-info`);
-        const statusLabels = document.querySelectorAll(`${progressSelector} .progress-status`);
+        const progressContainers = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`#dictionaries-modal ${progressSelector}`));
+        const progressBars = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-bar`));
+        const infoLabels = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-info`));
+        const statusLabels = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-status`));
 
         const prevention = this._preventPageExit();
 
@@ -143,6 +179,7 @@ export class DictionaryImportController {
 
             let statusPrefix = '';
             let stepIndex = -2;
+            /** @type {import('dictionary-worker').ImportProgressCallback} */
             const onProgress = (data) => {
                 const {stepIndex: stepIndex2, index, count} = data;
                 if (stepIndex !== stepIndex2) {
@@ -184,7 +221,7 @@ export class DictionaryImportController {
                 await this._importDictionary(files[i], importDetails, onProgress);
             }
         } catch (err) {
-            this._showErrors([err]);
+            this._showErrors([err instanceof Error ? err : new Error(`${err}`)]);
         } finally {
             prevention.end();
             for (const progress of progressContainers) { progress.hidden = true; }
@@ -199,6 +236,10 @@ export class DictionaryImportController {
         }
     }
 
+    /**
+     * @param {number} stepIndex
+     * @returns {string}
+     */
     _getImportLabel(stepIndex) {
         switch (stepIndex) {
             case -1:
@@ -212,6 +253,11 @@ export class DictionaryImportController {
         }
     }
 
+    /**
+     * @param {File} file
+     * @param {import('dictionary-importer').ImportDetails} importDetails
+     * @param {import('dictionary-worker').ImportProgressCallback} onProgress
+     */
     async _importDictionary(file, importDetails, onProgress) {
         const archiveContent = await this._readFile(file);
         const {result, errors} = await new DictionaryWorker().importDictionary(archiveContent, importDetails, onProgress);
@@ -225,8 +271,14 @@ export class DictionaryImportController {
         }
     }
 
+    /**
+     * @param {boolean} sequenced
+     * @param {string} title
+     * @returns {Promise<Error[]>}
+     */
     async _addDictionarySettings(sequenced, title) {
         const optionsFull = await this._settingsController.getOptionsFull();
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [];
         const profileCount = optionsFull.profiles.length;
         for (let i = 0; i < profileCount; ++i) {
@@ -243,8 +295,12 @@ export class DictionaryImportController {
         return await this._modifyGlobalSettings(targets);
     }
 
+    /**
+     * @returns {Promise<Error[]>}
+     */
     async _clearDictionarySettings() {
         const optionsFull = await this._settingsController.getOptionsFull();
+        /** @type {import('settings-modifications').Modification[]} */
         const targets = [];
         const profileCount = optionsFull.profiles.length;
         for (let i = 0; i < profileCount; ++i) {
@@ -256,16 +312,25 @@ export class DictionaryImportController {
         return await this._modifyGlobalSettings(targets);
     }
 
+    /**
+     * @param {boolean} visible
+     */
     _setSpinnerVisible(visible) {
         if (this._spinner !== null) {
             this._spinner.hidden = !visible;
         }
     }
 
+    /**
+     * @returns {import('settings-controller').PageExitPrevention}
+     */
     _preventPageExit() {
         return this._settingsController.preventPageExit();
     }
 
+    /**
+     * @param {Error[]} errors
+     */
     _showErrors(errors) {
         const uniqueErrors = new Map();
         for (const error of errors) {
@@ -292,59 +357,81 @@ export class DictionaryImportController {
             fragment.appendChild(div);
         }
 
-        this._errorContainer.appendChild(fragment);
-        this._errorContainer.hidden = false;
+        const errorContainer = /** @type {HTMLElement} */ (this._errorContainer);
+        errorContainer.appendChild(fragment);
+        errorContainer.hidden = false;
     }
 
+    /** */
     _hideErrors() {
-        this._errorContainer.textContent = '';
-        this._errorContainer.hidden = true;
+        const errorContainer = /** @type {HTMLElement} */ (this._errorContainer);
+        errorContainer.textContent = '';
+        errorContainer.hidden = true;
     }
 
+    /**
+     * @param {File} file
+     * @returns {Promise<ArrayBuffer>}
+     */
     _readFile(file) {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
+            reader.onload = () => resolve(/** @type {ArrayBuffer} */ (reader.result));
             reader.onerror = () => reject(reader.error);
             reader.readAsArrayBuffer(file);
         });
     }
 
+    /**
+     * @param {Error} error
+     * @returns {string}
+     */
     _errorToString(error) {
-        error = (typeof error.toString === 'function' ? error.toString() : `${error}`);
+        const errorMessage = error.toString();
 
         for (const [match, newErrorString] of this._errorToStringOverrides) {
-            if (error.includes(match)) {
+            if (errorMessage.includes(match)) {
                 return newErrorString;
             }
         }
 
-        return error;
+        return errorMessage;
     }
 
+    /**
+     * @param {boolean} value
+     */
     _setModifying(value) {
         this._modifying = value;
         this._setButtonsEnabled(!value);
     }
 
+    /**
+     * @param {boolean} value
+     */
     _setButtonsEnabled(value) {
         value = !value;
-        for (const node of document.querySelectorAll('.dictionary-database-mutating-input')) {
+        for (const node of /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('.dictionary-database-mutating-input'))) {
             node.disabled = value;
         }
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     * @returns {Promise<Error[]>}
+     */
     async _modifyGlobalSettings(targets) {
         const results = await this._settingsController.modifyGlobalSettings(targets);
         const errors = [];
         for (const {error} of results) {
             if (typeof error !== 'undefined') {
-                errors.push(deserializeError(error));
+                errors.push(ExtensionError.deserialize(error));
             }
         }
         return errors;
     }
 
+    /** */
     _triggerStorageChanged() {
         yomitan.trigger('storageChanged');
     }
diff --git a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js
index 4f3ed569..d36d965a 100644
--- a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js
+++ b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js
@@ -22,24 +22,36 @@ import {yomitan} from '../../yomitan.js';
 import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
 export class ExtensionKeyboardShortcutController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?HTMLButtonElement} */
         this._resetButton = null;
+        /** @type {?HTMLButtonElement} */
         this._clearButton = null;
+        /** @type {?HTMLElement} */
         this._listContainer = null;
+        /** @type {HotkeyUtil} */
         this._hotkeyUtil = new HotkeyUtil();
+        /** @type {?import('environment').OperatingSystem} */
         this._os = null;
+        /** @type {ExtensionKeyboardShortcutHotkeyEntry[]} */
         this._entries = [];
     }
 
+    /** @type {HotkeyUtil} */
     get hotkeyUtil() {
         return this._hotkeyUtil;
     }
 
+    /** */
     async prepare() {
-        this._resetButton = document.querySelector('#extension-hotkey-list-reset-all');
-        this._clearButton = document.querySelector('#extension-hotkey-list-clear-all');
-        this._listContainer = document.querySelector('#extension-hotkey-list');
+        this._resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#extension-hotkey-list-reset-all'));
+        this._clearButton = /** @type {HTMLButtonElement} */ (document.querySelector('#extension-hotkey-list-clear-all'));
+        this._listContainer = /** @type {HTMLElement} */ (document.querySelector('#extension-hotkey-list'));
 
         const canResetCommands = this.canResetCommands();
         const canModifyCommands = this.canModifyCommands();
@@ -61,10 +73,16 @@ export class ExtensionKeyboardShortcutController {
         this._setupCommands(commands);
     }
 
+    /**
+     * @param {string} name
+     * @returns {Promise<{key: ?string, modifiers: import('input').Modifier[]}>}
+     */
     async resetCommand(name) {
         await this._resetCommand(name);
 
+        /** @type {?string} */
         let key = null;
+        /** @type {import('input').Modifier[]} */
         let modifiers = [];
 
         const commands = await this._getCommands();
@@ -78,32 +96,60 @@ export class ExtensionKeyboardShortcutController {
         return {key, modifiers};
     }
 
+    /**
+     * @param {string} name
+     * @param {?string} key
+     * @param {import('input').Modifier[]} modifiers
+     */
     async updateCommand(name, key, modifiers) {
         // Firefox-only; uses Promise API
         const shortcut = this._hotkeyUtil.convertInputToCommand(key, modifiers);
-        return await chrome.commands.update({name, shortcut});
+        await browser.commands.update({name, shortcut});
     }
 
+    /**
+     * @returns {boolean}
+     */
     canResetCommands() {
-        return isObject(chrome.commands) && typeof chrome.commands.reset === 'function';
+        return (
+            typeof browser === 'object' && browser !== null &&
+            typeof browser.commands === 'object' && browser.commands !== null &&
+            typeof browser.commands.reset === 'function'
+        );
     }
 
+    /**
+     * @returns {boolean}
+     */
     canModifyCommands() {
-        return isObject(chrome.commands) && typeof chrome.commands.update === 'function';
+        return (
+            typeof browser === 'object' && browser !== null &&
+            typeof browser.commands === 'object' && browser.commands !== null &&
+            typeof browser.commands.update === 'function'
+        );
     }
 
     // Add
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onResetClick(e) {
         e.preventDefault();
         this._resetAllCommands();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onClearClick(e) {
         e.preventDefault();
         this._clearAllCommands();
     }
 
+    /**
+     * @returns {Promise<chrome.commands.Command[]>}
+     */
     _getCommands() {
         return new Promise((resolve, reject) => {
             if (!(isObject(chrome.commands) && typeof chrome.commands.getAll === 'function')) {
@@ -122,6 +168,9 @@ export class ExtensionKeyboardShortcutController {
         });
     }
 
+    /**
+     * @param {chrome.commands.Command[]} commands
+     */
     _setupCommands(commands) {
         for (const entry of this._entries) {
             entry.cleanup();
@@ -131,7 +180,7 @@ export class ExtensionKeyboardShortcutController {
         const fragment = document.createDocumentFragment();
 
         for (const {name, description, shortcut} of commands) {
-            if (name.startsWith('_')) { continue; }
+            if (typeof name !== 'string' || name.startsWith('_')) { continue; }
 
             const {key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut);
 
@@ -143,10 +192,12 @@ export class ExtensionKeyboardShortcutController {
             this._entries.push(entry);
         }
 
-        this._listContainer.textContent = '';
-        this._listContainer.appendChild(fragment);
+        const listContainer = /** @type {HTMLElement} */ (this._listContainer);
+        listContainer.textContent = '';
+        listContainer.appendChild(fragment);
     }
 
+    /** */
     async _resetAllCommands() {
         if (!this.canModifyCommands()) { return; }
 
@@ -154,7 +205,7 @@ export class ExtensionKeyboardShortcutController {
         const promises = [];
 
         for (const {name} of commands) {
-            if (name.startsWith('_')) { continue; }
+            if (typeof name !== 'string' || name.startsWith('_')) { continue; }
             promises.push(this._resetCommand(name));
         }
 
@@ -164,6 +215,7 @@ export class ExtensionKeyboardShortcutController {
         this._setupCommands(commands);
     }
 
+    /** */
     async _clearAllCommands() {
         if (!this.canModifyCommands()) { return; }
 
@@ -171,7 +223,7 @@ export class ExtensionKeyboardShortcutController {
         const promises = [];
 
         for (const {name} of commands) {
-            if (name.startsWith('_')) { continue; }
+            if (typeof name !== 'string' || name.startsWith('_')) { continue; }
             promises.push(this.updateCommand(name, null, []));
         }
 
@@ -181,31 +233,55 @@ export class ExtensionKeyboardShortcutController {
         this._setupCommands(commands);
     }
 
+    /**
+     * @param {string} name
+     */
     async _resetCommand(name) {
         // Firefox-only; uses Promise API
-        return await chrome.commands.reset(name);
+        await browser.commands.reset(name);
     }
 }
 
 class ExtensionKeyboardShortcutHotkeyEntry {
+    /**
+     * @param {ExtensionKeyboardShortcutController} parent
+     * @param {Element} node
+     * @param {string} name
+     * @param {string|undefined} description
+     * @param {?string} key
+     * @param {import('input').Modifier[]} modifiers
+     * @param {?import('environment').OperatingSystem} os
+     */
     constructor(parent, node, name, description, key, modifiers, os) {
+        /** @type {ExtensionKeyboardShortcutController} */
         this._parent = parent;
+        /** @type {Element} */
         this._node = node;
+        /** @type {string} */
         this._name = name;
+        /** @type {string|undefined} */
         this._description = description;
+        /** @type {?string} */
         this._key = key;
+        /** @type {import('input').Modifier[]} */
         this._modifiers = modifiers;
+        /** @type {?import('environment').OperatingSystem} */
         this._os = os;
+        /** @type {?HTMLInputElement} */
         this._input = null;
+        /** @type {?KeyboardMouseInputField} */
         this._inputField = null;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
     }
 
+    /** */
     prepare() {
-        this._node.querySelector('.settings-item-label').textContent = this._description || this._name;
+        const label = /** @type {HTMLElement} */ (this._node.querySelector('.settings-item-label'));
+        label.textContent = this._description || this._name;
 
-        const button = this._node.querySelector('.extension-hotkey-list-item-button');
-        const input = this._node.querySelector('input');
+        const button = /** @type {HTMLButtonElement} */ (this._node.querySelector('.extension-hotkey-list-item-button'));
+        const input = /** @type {HTMLInputElement} */ (this._node.querySelector('input'));
 
         this._input = input;
 
@@ -222,6 +298,7 @@ class ExtensionKeyboardShortcutHotkeyEntry {
         }
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         if (this._node.parentNode !== null) {
@@ -235,15 +312,22 @@ class ExtensionKeyboardShortcutHotkeyEntry {
 
     // Private
 
+    /**
+     * @param {import('keyboard-mouse-input-field').ChangeEvent} e
+     */
     _onInputFieldChange(e) {
         const {key, modifiers} = e;
         this._tryUpdateInput(key, modifiers, false);
     }
 
+    /** */
     _onInputFieldBlur() {
         this._updateInput();
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'clearInput':
@@ -255,11 +339,19 @@ class ExtensionKeyboardShortcutHotkeyEntry {
         }
     }
 
+    /** */
     _updateInput() {
-        this._inputField.setInput(this._key, this._modifiers);
-        delete this._input.dataset.invalid;
+        /** @type {KeyboardMouseInputField} */ (this._inputField).setInput(this._key, this._modifiers);
+        if (this._input !== null) {
+            delete this._input.dataset.invalid;
+        }
     }
 
+    /**
+     * @param {?string} key
+     * @param {import('input').Modifier[]} modifiers
+     * @param {boolean} updateInput
+     */
     async _tryUpdateInput(key, modifiers, updateInput) {
         let okay = (key === null ? (modifiers.length === 0) : (modifiers.length !== 0));
         if (okay) {
@@ -273,9 +365,13 @@ class ExtensionKeyboardShortcutHotkeyEntry {
         if (okay) {
             this._key = key;
             this._modifiers = modifiers;
-            delete this._input.dataset.invalid;
+            if (this._input !== null) {
+                delete this._input.dataset.invalid;
+            }
         } else {
-            this._input.dataset.invalid = 'true';
+            if (this._input !== null) {
+                this._input.dataset.invalid = 'true';
+            }
         }
 
         if (updateInput) {
@@ -283,6 +379,7 @@ class ExtensionKeyboardShortcutHotkeyEntry {
         }
     }
 
+    /** */
     async _resetInput() {
         const {key, modifiers} = await this._parent.resetCommand(this._name);
         this._key = key;
diff --git a/ext/js/pages/settings/generic-setting-controller.js b/ext/js/pages/settings/generic-setting-controller.js
index c4104874..8666614b 100644
--- a/ext/js/pages/settings/generic-setting-controller.js
+++ b/ext/js/pages/settings/generic-setting-controller.js
@@ -16,14 +16,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {deserializeError, isObject} from '../../core.js';
+import {ExtensionError} from '../../core/extension-error.js';
 import {DocumentUtil} from '../../dom/document-util.js';
 import {DOMDataBinder} from '../../dom/dom-data-binder.js';
 
 export class GenericSettingController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('settings-modifications').OptionsScopeType} */
         this._defaultScope = 'profile';
+        /** @type {DOMDataBinder<import('generic-setting-controller').ElementMetadata>} */
         this._dataBinder = new DOMDataBinder({
             selector: '[data-setting]',
             createElementMetadata: this._createElementMetadata.bind(this),
@@ -31,7 +37,8 @@ export class GenericSettingController {
             getValues: this._getValues.bind(this),
             setValues: this._setValues.bind(this)
         });
-        this._transforms = new Map([
+        /** @type {Map<import('generic-setting-controller').TransformType, import('generic-setting-controller').TransformFunction>} */
+        this._transforms = new Map(/** @type {[key: import('generic-setting-controller').TransformType, value: import('generic-setting-controller').TransformFunction][]} */ ([
             ['setAttribute', this._setAttribute.bind(this)],
             ['setVisibility', this._setVisibility.bind(this)],
             ['splitTags', this._splitTags.bind(this)],
@@ -40,41 +47,49 @@ export class GenericSettingController {
             ['toBoolean', this._toBoolean.bind(this)],
             ['toString', this._toString.bind(this)],
             ['conditionalConvert', this._conditionalConvert.bind(this)]
-        ]);
+        ]));
     }
 
+    /** */
     async prepare() {
         this._dataBinder.observe(document.body);
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
     }
 
+    /** */
     async refresh() {
         await this._dataBinder.refresh();
     }
 
     // Private
 
+    /** */
     _onOptionsChanged() {
         this._dataBinder.refresh();
     }
 
+    /**
+     * @param {Element} element
+     * @returns {import('generic-setting-controller').ElementMetadata|undefined}
+     */
     _createElementMetadata(element) {
-        const {dataset: {setting: path, scope, transform: transformRaw}} = element;
-        let transforms;
-        if (typeof transformRaw === 'string') {
-            transforms = JSON.parse(transformRaw);
-            if (!Array.isArray(transforms)) { transforms = [transforms]; }
-        } else {
-            transforms = [];
-        }
+        if (!(element instanceof HTMLElement)) { return void 0; }
+        const {setting: path, scope, transform: transformRaw} = element.dataset;
+        if (typeof path !== 'string') { return void 0; }
+        const scope2 = this._normalizeScope(scope);
         return {
             path,
-            scope,
-            transforms,
+            scope: scope2 !== null ? scope2 : this._defaultScope,
+            transforms: this._getTransformDataArray(transformRaw),
             transformRaw
         };
     }
 
+    /**
+     * @param {import('generic-setting-controller').ElementMetadata} metadata1
+     * @param {import('generic-setting-controller').ElementMetadata} metadata2
+     * @returns {boolean}
+     */
     _compareElementMetadata(metadata1, metadata2) {
         return (
             metadata1.path === metadata2.path &&
@@ -83,45 +98,71 @@ export class GenericSettingController {
         );
     }
 
+    /**
+     * @param {import('dom-data-binder').GetValuesDetails<import('generic-setting-controller').ElementMetadata>[]} targets
+     * @returns {Promise<import('dom-data-binder').TaskResult[]>}
+     */
     async _getValues(targets) {
         const defaultScope = this._defaultScope;
+        /** @type {import('settings-modifications').ScopedRead[]} */
         const settingsTargets = [];
         for (const {metadata: {path, scope}} of targets) {
+            /** @type {import('settings-modifications').ScopedRead} */
             const target = {
                 path,
-                scope: scope || defaultScope
+                scope: typeof scope === 'string' ? scope : defaultScope,
+                optionsContext: null
             };
             settingsTargets.push(target);
         }
         return this._transformResults(await this._settingsController.getSettings(settingsTargets), targets);
     }
 
+    /**
+     * @param {import('dom-data-binder').SetValuesDetails<import('generic-setting-controller').ElementMetadata>[]} targets
+     * @returns {Promise<import('dom-data-binder').TaskResult[]>}
+     */
     async _setValues(targets) {
         const defaultScope = this._defaultScope;
+        /** @type {import('settings-modifications').ScopedModification[]} */
         const settingsTargets = [];
         for (const {metadata: {path, scope, transforms}, value, element} of targets) {
             const transformedValue = this._applyTransforms(value, transforms, 'pre', element);
+            /** @type {import('settings-modifications').ScopedModification} */
             const target = {
                 path,
-                scope: scope || defaultScope,
+                scope: typeof scope === 'string' ? scope : defaultScope,
                 action: 'set',
-                value: transformedValue
+                value: transformedValue,
+                optionsContext: null
             };
             settingsTargets.push(target);
         }
         return this._transformResults(await this._settingsController.modifySettings(settingsTargets), targets);
     }
 
+    /**
+     * @param {import('settings-controller').ModifyResult[]} values
+     * @param {import('dom-data-binder').GetValuesDetails<import('generic-setting-controller').ElementMetadata>[]|import('dom-data-binder').SetValuesDetails<import('generic-setting-controller').ElementMetadata>[]} targets
+     * @returns {import('dom-data-binder').TaskResult[]}
+     */
     _transformResults(values, targets) {
         return values.map((value, i) => {
             const error = value.error;
-            if (error) { return deserializeError(error); }
+            if (error) { return {error: ExtensionError.deserialize(error)}; }
             const {metadata: {transforms}, element} = targets[i];
             const result = this._applyTransforms(value.result, transforms, 'post', element);
             return {result};
         });
     }
 
+    /**
+     * @param {unknown} value
+     * @param {import('generic-setting-controller').TransformData[]} transforms
+     * @param {import('generic-setting-controller').TransformStep} step
+     * @param {Element} element
+     * @returns {unknown}
+     */
     _applyTransforms(value, transforms, step, element) {
         for (const transform of transforms) {
             const transformStep = transform.step;
@@ -135,6 +176,11 @@ export class GenericSettingController {
         return value;
     }
 
+    /**
+     * @param {?Node} node
+     * @param {number} ancestorDistance
+     * @returns {?Node}
+     */
     _getAncestor(node, ancestorDistance) {
         if (ancestorDistance < 0) {
             return document.documentElement;
@@ -145,6 +191,12 @@ export class GenericSettingController {
         return node;
     }
 
+    /**
+     * @param {?Node} node
+     * @param {number|undefined} ancestorDistance
+     * @param {string|undefined} selector
+     * @returns {?Node}
+     */
     _getRelativeElement(node, ancestorDistance, selector) {
         const selectorRoot = (
             typeof ancestorDistance === 'number' ?
@@ -154,12 +206,17 @@ export class GenericSettingController {
         if (selectorRoot === null) { return null; }
 
         return (
-            typeof selector === 'string' ?
+            typeof selector === 'string' && (selectorRoot instanceof Element || selectorRoot instanceof Document) ?
             selectorRoot.querySelector(selector) :
             (selectorRoot === document ? document.documentElement : selectorRoot)
         );
     }
 
+    /**
+     * @param {import('generic-setting-controller').OperationData} operationData
+     * @param {unknown} lhs
+     * @returns {unknown}
+     */
     _evaluateSimpleOperation(operationData, lhs) {
         const {op: operation, value: rhs} = operationData;
         switch (operation) {
@@ -167,18 +224,18 @@ export class GenericSettingController {
             case '!!': return !!lhs;
             case '===': return lhs === rhs;
             case '!==': return lhs !== rhs;
-            case '>=': return lhs >= rhs;
-            case '<=': return lhs <= rhs;
-            case '>': return lhs > rhs;
-            case '<': return lhs < rhs;
+            case '>=': return /** @type {number} */ (lhs) >= /** @type {number} */ (rhs);
+            case '<=': return /** @type {number} */ (lhs) <= /** @type {number} */ (rhs);
+            case '>': return /** @type {number} */ (lhs) > /** @type {number} */ (rhs);
+            case '<': return /** @type {number} */ (lhs) < /** @type {number} */ (rhs);
             case '&&':
-                for (const operationData2 of rhs) {
+                for (const operationData2 of /** @type {import('generic-setting-controller').OperationData[]} */ (rhs)) {
                     const result = this._evaluateSimpleOperation(operationData2, lhs);
                     if (!result) { return result; }
                 }
                 return true;
             case '||':
-                for (const operationData2 of rhs) {
+                for (const operationData2 of /** @type {import('generic-setting-controller').OperationData[]} */ (rhs)) {
                     const result = this._evaluateSimpleOperation(operationData2, lhs);
                     if (result) { return result; }
                 }
@@ -188,48 +245,112 @@ export class GenericSettingController {
         }
     }
 
+    /**
+     * @param {string|undefined} value
+     * @returns {?import('settings-modifications').OptionsScopeType}
+     */
+    _normalizeScope(value) {
+        switch (value) {
+            case 'profile':
+            case 'global':
+                return value;
+            default:
+                return null;
+        }
+    }
+
+    /**
+     * @param {string|undefined} transformRaw
+     * @returns {import('generic-setting-controller').TransformData[]}
+     */
+    _getTransformDataArray(transformRaw) {
+        if (typeof transformRaw === 'string') {
+            const transforms = JSON.parse(transformRaw);
+            return Array.isArray(transforms) ? transforms : [transforms];
+        }
+        return [];
+    }
+
     // Transforms
 
+    /**
+     * @param {unknown} value
+     * @param {import('generic-setting-controller').SetAttributeTransformData} data
+     * @param {Element} element
+     * @returns {unknown}
+     */
     _setAttribute(value, data, element) {
         const {ancestorDistance, selector, attribute} = data;
         const relativeElement = this._getRelativeElement(element, ancestorDistance, selector);
-        if (relativeElement !== null) {
+        if (relativeElement !== null && relativeElement instanceof Element) {
             relativeElement.setAttribute(attribute, `${value}`);
         }
         return value;
     }
 
+    /**
+     * @param {unknown} value
+     * @param {import('generic-setting-controller').SetVisibilityTransformData} data
+     * @param {Element} element
+     * @returns {unknown}
+     */
     _setVisibility(value, data, element) {
         const {ancestorDistance, selector, condition} = data;
         const relativeElement = this._getRelativeElement(element, ancestorDistance, selector);
-        if (relativeElement !== null) {
+        if (relativeElement !== null && relativeElement instanceof HTMLElement) {
             relativeElement.hidden = !this._evaluateSimpleOperation(condition, value);
         }
         return value;
     }
 
+    /**
+     * @param {unknown} value
+     * @returns {string[]}
+     */
     _splitTags(value) {
         return `${value}`.split(/[,; ]+/).filter((v) => !!v);
     }
 
+    /**
+     * @param {unknown} value
+     * @returns {string}
+     */
     _joinTags(value) {
-        return value.join(' ');
+        return Array.isArray(value) ? value.join(' ') : '';
     }
 
+    /**
+     * @param {unknown} value
+     * @param {import('generic-setting-controller').ToNumberConstraintsTransformData} data
+     * @returns {number}
+     */
     _toNumber(value, data) {
-        let {constraints} = data;
-        if (!isObject(constraints)) { constraints = {}; }
-        return DocumentUtil.convertElementValueToNumber(value, constraints);
+        /** @type {import('document-util').ToNumberConstraints} */
+        const constraints = typeof data.constraints === 'object' && data.constraints !== null ? data.constraints : {};
+        return typeof value === 'string' ? DocumentUtil.convertElementValueToNumber(value, constraints) : 0;
     }
 
+    /**
+     * @param {string} value
+     * @returns {boolean}
+     */
     _toBoolean(value) {
         return (value === 'true');
     }
 
+    /**
+     * @param {unknown} value
+     * @returns {string}
+     */
     _toString(value) {
         return `${value}`;
     }
 
+    /**
+     * @param {unknown} value
+     * @param {import('generic-setting-controller').ConditionalConvertTransformData} data
+     * @returns {unknown}
+     */
     _conditionalConvert(value, data) {
         const {cases} = data;
         if (Array.isArray(cases)) {
diff --git a/ext/js/pages/settings/keyboard-mouse-input-field.js b/ext/js/pages/settings/keyboard-mouse-input-field.js
index aee01a36..f0a53f1a 100644
--- a/ext/js/pages/settings/keyboard-mouse-input-field.js
+++ b/ext/js/pages/settings/keyboard-mouse-input-field.js
@@ -20,31 +20,58 @@ import {EventDispatcher, EventListenerCollection} from '../../core.js';
 import {DocumentUtil} from '../../dom/document-util.js';
 import {HotkeyUtil} from '../../input/hotkey-util.js';
 
+/**
+ * @augments EventDispatcher<import('keyboard-mouse-input-field').EventType>
+ */
 export class KeyboardMouseInputField extends EventDispatcher {
+    /**
+     * @param {HTMLInputElement} inputNode
+     * @param {?HTMLButtonElement} mouseButton
+     * @param {?import('environment').OperatingSystem} os
+     * @param {?(pointerType: string) => boolean} [isPointerTypeSupported]
+     */
     constructor(inputNode, mouseButton, os, isPointerTypeSupported=null) {
         super();
+        /** @type {HTMLInputElement} */
         this._inputNode = inputNode;
+        /** @type {?HTMLButtonElement} */
         this._mouseButton = mouseButton;
+        /** @type {?(pointerType: string) => boolean} */
         this._isPointerTypeSupported = isPointerTypeSupported;
+        /** @type {HotkeyUtil} */
         this._hotkeyUtil = new HotkeyUtil(os);
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?string} */
         this._key = null;
+        /** @type {import('input').Modifier[]} */
         this._modifiers = [];
+        /** @type {Set<number>} */
         this._penPointerIds = new Set();
+        /** @type {boolean} */
         this._mouseModifiersSupported = false;
+        /** @type {boolean} */
         this._keySupported = false;
     }
 
+    /** @type {import('input').Modifier[]} */
     get modifiers() {
         return this._modifiers;
     }
 
+    /**
+     * @param {?string} key
+     * @param {import('input').Modifier[]} modifiers
+     * @param {boolean} [mouseModifiersSupported]
+     * @param {boolean} [keySupported]
+     */
     prepare(key, modifiers, mouseModifiersSupported=false, keySupported=false) {
         this.cleanup();
 
         this._mouseModifiersSupported = mouseModifiersSupported;
         this._keySupported = keySupported;
         this.setInput(key, modifiers);
+        /** @type {import('event-listener-collection').AddEventListenerArgs[]} */
         const events = [
             [this._inputNode, 'keydown', this._onModifierKeyDown.bind(this), false],
             [this._inputNode, 'keyup', this._onModifierKeyUp.bind(this), false]
@@ -65,12 +92,17 @@ export class KeyboardMouseInputField extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {?string} key
+     * @param {import('input').Modifier[]} modifiers
+     */
     setInput(key, modifiers) {
         this._key = key;
         this._modifiers = this._sortModifiers(modifiers);
         this._updateDisplayString();
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         this._modifiers = [];
@@ -80,21 +112,31 @@ export class KeyboardMouseInputField extends EventDispatcher {
         this._penPointerIds.clear();
     }
 
+    /** */
     clearInputs() {
         this._updateModifiers([], null);
     }
 
     // Private
 
+    /**
+     * @param {import('input').Modifier[]} modifiers
+     * @returns {import('input').Modifier[]}
+     */
     _sortModifiers(modifiers) {
         return this._hotkeyUtil.sortModifiers(modifiers);
     }
 
+    /** */
     _updateDisplayString() {
         const displayValue = this._hotkeyUtil.getInputDisplayValue(this._key, this._modifiers);
         this._inputNode.value = displayValue;
     }
 
+    /**
+     * @param {KeyboardEvent} e
+     * @returns {Set<import('input').ModifierKey>}
+     */
     _getModifierKeys(e) {
         const modifiers = new Set(DocumentUtil.getActiveModifiers(e));
         // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
@@ -115,6 +157,10 @@ export class KeyboardMouseInputField extends EventDispatcher {
         return modifiers;
     }
 
+    /**
+     * @param {string|undefined} keyName
+     * @returns {boolean}
+     */
     _isModifierKey(keyName) {
         switch (keyName) {
             case 'AltLeft':
@@ -133,9 +179,13 @@ export class KeyboardMouseInputField extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {KeyboardEvent} e
+     */
     _onModifierKeyDown(e) {
         e.preventDefault();
 
+        /** @type {string|undefined} */
         let key = e.code;
         if (key === 'Unidentified' || key === '') { key = void 0; }
         if (this._keySupported) {
@@ -153,15 +203,24 @@ export class KeyboardMouseInputField extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {KeyboardEvent} e
+     */
     _onModifierKeyUp(e) {
         e.preventDefault();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onMouseButtonMouseDown(e) {
         e.preventDefault();
         this._addModifiers(DocumentUtil.getActiveButtons(e));
     }
 
+    /**
+     * @param {PointerEvent} e
+     */
     _onMouseButtonPointerDown(e) {
         if (!e.isPrimary) { return; }
 
@@ -179,6 +238,9 @@ export class KeyboardMouseInputField extends EventDispatcher {
         this._addModifiers(DocumentUtil.getActiveButtons(e));
     }
 
+    /**
+     * @param {PointerEvent} e
+     */
     _onMouseButtonPointerOver(e) {
         const {pointerType, pointerId} = e;
         if (pointerType === 'pen') {
@@ -186,23 +248,39 @@ export class KeyboardMouseInputField extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {PointerEvent} e
+     */
     _onMouseButtonPointerOut(e) {
         const {pointerId} = e;
         this._penPointerIds.delete(pointerId);
     }
 
+    /**
+     * @param {PointerEvent} e
+     */
     _onMouseButtonPointerCancel(e) {
         this._onMouseButtonPointerOut(e);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onMouseButtonMouseUp(e) {
         e.preventDefault();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onMouseButtonContextMenu(e) {
         e.preventDefault();
     }
 
+    /**
+     * @param {Iterable<import('input').Modifier>} newModifiers
+     * @param {?string} [newKey]
+     */
     _addModifiers(newModifiers, newKey) {
         const modifiers = new Set(this._modifiers);
         for (const modifier of newModifiers) {
@@ -211,6 +289,10 @@ export class KeyboardMouseInputField extends EventDispatcher {
         this._updateModifiers([...modifiers], newKey);
     }
 
+    /**
+     * @param {import('input').Modifier[]} modifiers
+     * @param {?string} [newKey]
+     */
     _updateModifiers(modifiers, newKey) {
         modifiers = this._sortModifiers(modifiers);
 
@@ -226,10 +308,18 @@ export class KeyboardMouseInputField extends EventDispatcher {
 
         this._updateDisplayString();
         if (changed) {
-            this.trigger('change', {modifiers: this._modifiers, key: this._key});
+            /** @type {import('keyboard-mouse-input-field').ChangeEvent} */
+            const event = {modifiers: this._modifiers, key: this._key};
+            this.trigger('change', event);
         }
     }
 
+    /**
+     * @template T
+     * @param {T[]} array1
+     * @param {T[]} array2
+     * @returns {boolean}
+     */
     _areArraysEqual(array1, array2) {
         const length = array1.length;
         if (length !== array2.length) { return false; }
diff --git a/ext/js/pages/settings/keyboard-shortcuts-controller.js b/ext/js/pages/settings/keyboard-shortcuts-controller.js
index e7ad4d15..ad16b0e9 100644
--- a/ext/js/pages/settings/keyboard-shortcuts-controller.js
+++ b/ext/js/pages/settings/keyboard-shortcuts-controller.js
@@ -23,16 +23,29 @@ import {yomitan} from '../../yomitan.js';
 import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
 export class KeyboardShortcutController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {KeyboardShortcutHotkeyEntry[]} */
         this._entries = [];
+        /** @type {?import('environment').OperatingSystem} */
         this._os = null;
+        /** @type {?HTMLButtonElement} */
         this._addButton = null;
+        /** @type {?HTMLButtonElement} */
         this._resetButton = null;
+        /** @type {?HTMLElement} */
         this._listContainer = null;
+        /** @type {?HTMLElement} */
         this._emptyIndicator = null;
+        /** @type {Intl.Collator} */
         this._stringComparer = new Intl.Collator('en-US'); // Invariant locale
+        /** @type {?HTMLElement} */
         this._scrollContainer = null;
+        /** @type {Map<string, import('keyboard-shortcut-controller').ActionDetails>} */
         this._actionDetails = new Map([
             ['',                                 {scopes: new Set()}],
             ['close',                            {scopes: new Set(['popup', 'search'])}],
@@ -58,19 +71,21 @@ export class KeyboardShortcutController {
         ]);
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._settingsController;
     }
 
+    /** */
     async prepare() {
         const {platform: {os}} = await yomitan.api.getEnvironmentInfo();
         this._os = os;
 
-        this._addButton = document.querySelector('#hotkey-list-add');
-        this._resetButton = document.querySelector('#hotkey-list-reset');
-        this._listContainer = document.querySelector('#hotkey-list');
-        this._emptyIndicator = document.querySelector('#hotkey-list-empty');
-        this._scrollContainer = document.querySelector('#keyboard-shortcuts-modal .modal-body');
+        this._addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#hotkey-list-add'));
+        this._resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#hotkey-list-reset'));
+        this._listContainer = /** @type {HTMLElement} */ (document.querySelector('#hotkey-list'));
+        this._emptyIndicator = /** @type {HTMLElement} */ (document.querySelector('#hotkey-list-empty'));
+        this._scrollContainer = /** @type {HTMLElement} */ (document.querySelector('#keyboard-shortcuts-modal .modal-body'));
 
         this._addButton.addEventListener('click', this._onAddClick.bind(this));
         this._resetButton.addEventListener('click', this._onResetClick.bind(this));
@@ -79,6 +94,9 @@ export class KeyboardShortcutController {
         await this._updateOptions();
     }
 
+    /**
+     * @param {import('settings').InputsHotkeyOptions} terminationCharacterEntry
+     */
     async addEntry(terminationCharacterEntry) {
         const options = await this._settingsController.getOptions();
         const {inputs: {hotkeys}} = options;
@@ -92,9 +110,14 @@ export class KeyboardShortcutController {
         }]);
 
         await this._updateOptions();
-        this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight;
+        const scrollContainer = /** @type {HTMLElement} */ (this._scrollContainer);
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
     }
 
+    /**
+     * @param {number} index
+     * @returns {Promise<boolean>}
+     */
     async deleteEntry(index) {
         const options = await this._settingsController.getOptions();
         const {inputs: {hotkeys}} = options;
@@ -113,55 +136,79 @@ export class KeyboardShortcutController {
         return true;
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async modifyProfileSettings(targets) {
         return await this._settingsController.modifyProfileSettings(targets);
     }
 
+    /**
+     * @returns {Promise<import('settings').InputsHotkeyOptions[]>}
+     */
     async getDefaultHotkeys() {
         const defaultOptions = await this._settingsController.getDefaultOptions();
         return defaultOptions.profiles[0].options.inputs.hotkeys;
     }
 
+    /**
+     * @param {string} action
+     * @returns {import('keyboard-shortcut-controller').ActionDetails|undefined}
+     */
     getActionDetails(action) {
         return this._actionDetails.get(action);
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         for (const entry of this._entries) {
             entry.cleanup();
         }
 
         this._entries = [];
+        const os = /** @type {import('environment').OperatingSystem} */ (this._os);
         const {inputs: {hotkeys}} = options;
         const fragment = document.createDocumentFragment();
 
         for (let i = 0, ii = hotkeys.length; i < ii; ++i) {
             const hotkeyEntry = hotkeys[i];
-            const node = this._settingsController.instantiateTemplate('hotkey-list-item');
+            const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('hotkey-list-item'));
             fragment.appendChild(node);
-            const entry = new KeyboardShortcutHotkeyEntry(this, hotkeyEntry, i, node, this._os, this._stringComparer);
+            const entry = new KeyboardShortcutHotkeyEntry(this, hotkeyEntry, i, node, os, this._stringComparer);
             this._entries.push(entry);
             entry.prepare();
         }
 
-        this._listContainer.appendChild(fragment);
-        this._listContainer.hidden = (hotkeys.length === 0);
-        this._emptyIndicator.hidden = (hotkeys.length !== 0);
+        const listContainer = /** @type {HTMLElement} */ (this._listContainer);
+        listContainer.appendChild(fragment);
+        listContainer.hidden = (hotkeys.length === 0);
+        /** @type {HTMLElement} */ (this._emptyIndicator).hidden = (hotkeys.length !== 0);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onAddClick(e) {
         e.preventDefault();
         this._addNewEntry();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onResetClick(e) {
         e.preventDefault();
         this._reset();
     }
 
+    /** */
     async _addNewEntry() {
+        /** @type {import('settings').InputsHotkeyOptions} */
         const newEntry = {
             action: '',
             argument: '',
@@ -170,14 +217,17 @@ export class KeyboardShortcutController {
             scopes: ['popup', 'search'],
             enabled: true
         };
-        return await this.addEntry(newEntry);
+        await this.addEntry(newEntry);
     }
 
+    /** */
     async _updateOptions() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /** */
     async _reset() {
         const value = await this.getDefaultHotkeys();
         await this._settingsController.setProfileSetting('inputs.hotkeys', value);
@@ -186,34 +236,59 @@ export class KeyboardShortcutController {
 }
 
 class KeyboardShortcutHotkeyEntry {
+    /**
+     * @param {KeyboardShortcutController} parent
+     * @param {import('settings').InputsHotkeyOptions} data
+     * @param {number} index
+     * @param {HTMLElement} node
+     * @param {import('environment').OperatingSystem} os
+     * @param {Intl.Collator} stringComparer
+     */
     constructor(parent, data, index, node, os, stringComparer) {
+        /** @type {KeyboardShortcutController} */
         this._parent = parent;
+        /** @type {import('settings').InputsHotkeyOptions} */
         this._data = data;
+        /** @type {number} */
         this._index = index;
+        /** @type {HTMLElement} */
         this._node = node;
+        /** @type {import('environment').OperatingSystem} */
         this._os = os;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?KeyboardMouseInputField} */
         this._inputField = null;
+        /** @type {?HTMLSelectElement} */
         this._actionSelect = null;
+        /** @type {string} */
         this._basePath = `inputs.hotkeys[${this._index}]`;
+        /** @type {Intl.Collator} */
         this._stringComparer = stringComparer;
+        /** @type {?HTMLButtonElement} */
         this._enabledButton = null;
+        /** @type {?import('../../dom/popup-menu.js').PopupMenu} */
         this._scopeMenu = null;
+        /** @type {EventListenerCollection} */
         this._scopeMenuEventListeners = new EventListenerCollection();
+        /** @type {?HTMLElement} */
         this._argumentContainer = null;
+        /** @type {?HTMLInputElement} */
         this._argumentInput = null;
+        /** @type {EventListenerCollection} */
         this._argumentEventListeners = new EventListenerCollection();
     }
 
+    /** */
     prepare() {
         const node = this._node;
 
-        const menuButton = node.querySelector('.hotkey-list-item-button');
-        const input = node.querySelector('.hotkey-list-item-input');
-        const action = node.querySelector('.hotkey-list-item-action');
-        const enabledToggle = node.querySelector('.hotkey-list-item-enabled');
-        const scopesButton = node.querySelector('.hotkey-list-item-scopes-button');
-        const enabledButton = node.querySelector('.hotkey-list-item-enabled-button');
+        const menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.hotkey-list-item-button'));
+        const input = /** @type {HTMLInputElement} */ (node.querySelector('.hotkey-list-item-input'));
+        const action = /** @type {HTMLSelectElement} */ (node.querySelector('.hotkey-list-item-action'));
+        const enabledToggle = /** @type {HTMLInputElement} */ (node.querySelector('.hotkey-list-item-enabled'));
+        const scopesButton = /** @type {HTMLButtonElement} */ (node.querySelector('.hotkey-list-item-scopes-button'));
+        const enabledButton = /** @type {HTMLButtonElement} */ (node.querySelector('.hotkey-list-item-enabled-button'));
 
         this._actionSelect = action;
         this._enabledButton = enabledButton;
@@ -238,9 +313,10 @@ class KeyboardShortcutHotkeyEntry {
         this._eventListeners.on(this._inputField, 'change', this._onInputFieldChange.bind(this));
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
-        this._inputField.cleanup();
+        /** @type {KeyboardMouseInputField} */ (this._inputField).cleanup();
         this._clearScopeMenu();
         this._clearArgumentEventListeners();
         if (this._node.parentNode !== null) {
@@ -250,11 +326,14 @@ class KeyboardShortcutHotkeyEntry {
 
     // Private
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const {action} = this._data;
 
         const {menu} = e.detail;
-        const resetArgument = menu.bodyNode.querySelector('.popup-menu-item[data-menu-action="resetArgument"]');
+        const resetArgument = /** @type {HTMLElement} */ (menu.bodyNode.querySelector('.popup-menu-item[data-menu-action="resetArgument"]'));
 
         const details = this._parent.getActionDetails(action);
         const argumentDetails = typeof details !== 'undefined' ? details.argument : void 0;
@@ -262,13 +341,16 @@ class KeyboardShortcutHotkeyEntry {
         resetArgument.hidden = (typeof argumentDetails === 'undefined');
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'delete':
                 this._delete();
                 break;
             case 'clearInputs':
-                this._inputField.clearInputs();
+                /** @type {KeyboardMouseInputField} */ (this._inputField).clearInputs();
                 break;
             case 'resetInput':
                 this._resetInput();
@@ -279,10 +361,13 @@ class KeyboardShortcutHotkeyEntry {
         }
     }
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onScopesMenuOpen(e) {
         const {menu} = e.detail;
         const validScopes = this._getValidScopesForAction(this._data.action);
-        if (validScopes.size === 0) {
+        if (validScopes === null || validScopes.size === 0) {
             menu.close();
             return;
         }
@@ -291,6 +376,9 @@ class KeyboardShortcutHotkeyEntry {
         this._updateDisplay(menu.containerNode); // Fix a animation issue due to changing checkbox values
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onScopesMenuClose(e) {
         const {menu, action} = e.detail;
         if (action === 'toggleScope') {
@@ -302,24 +390,45 @@ class KeyboardShortcutHotkeyEntry {
         }
     }
 
+    /**
+     * @param {import('keyboard-mouse-input-field').ChangeEvent} details
+     */
     _onInputFieldChange({key, modifiers}) {
-        this._setKeyAndModifiers(key, modifiers);
+        /** @type {import('input').ModifierKey[]} */
+        const modifiers2 = [];
+        for (const modifier of modifiers) {
+            const modifier2 = DocumentUtil.normalizeModifierKey(modifier);
+            if (modifier2 === null) { continue; }
+            modifiers2.push(modifier2);
+        }
+        this._setKeyAndModifiers(key, modifiers2);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onScopeCheckboxChange(e) {
-        const node = e.currentTarget;
-        const {scope} = node.dataset;
-        if (typeof scope !== 'string') { return; }
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const scope = this._normalizeScope(node.dataset.scope);
+        if (scope === null) { return; }
         this._setScopeEnabled(scope, node.checked);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onActionSelectChange(e) {
-        const value = e.currentTarget.value;
+        const node = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const value = node.value;
         this._setAction(value);
     }
 
+    /**
+     * @param {string} template
+     * @param {Event} e
+     */
     _onArgumentValueChange(template, e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         let value = this._getArgumentInputValue(node);
         switch (template) {
             case 'hotkey-argument-move-offset':
@@ -329,10 +438,15 @@ class KeyboardShortcutHotkeyEntry {
         this._setArgument(value);
     }
 
+    /** */
     async _delete() {
         this._parent.deleteEntry(this._index);
     }
 
+    /**
+     * @param {?string} key
+     * @param {import('input').ModifierKey[]} modifiers
+     */
     async _setKeyAndModifiers(key, modifiers) {
         this._data.key = key;
         this._data.modifiers = modifiers;
@@ -350,6 +464,10 @@ class KeyboardShortcutHotkeyEntry {
         ]);
     }
 
+    /**
+     * @param {import('settings').InputsHotkeyScope} scope
+     * @param {boolean} enabled
+     */
     async _setScopeEnabled(scope, enabled) {
         const scopes = this._data.scopes;
         const index = scopes.indexOf(scope);
@@ -372,10 +490,15 @@ class KeyboardShortcutHotkeyEntry {
         this._updateScopesButton();
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async _modifyProfileSettings(targets) {
         return await this._parent.settingsController.modifyProfileSettings(targets);
     }
 
+    /** */
     async _resetInput() {
         const defaultHotkeys = await this._parent.getDefaultHotkeys();
         const defaultValue = this._getDefaultKeyAndModifiers(defaultHotkeys, this._data.action);
@@ -383,9 +506,10 @@ class KeyboardShortcutHotkeyEntry {
 
         const {key, modifiers} = defaultValue;
         await this._setKeyAndModifiers(key, modifiers);
-        this._inputField.setInput(key, modifiers);
+        /** @type {KeyboardMouseInputField} */ (this._inputField).setInput(key, modifiers);
     }
 
+    /** */
     async _resetArgument() {
         const {action} = this._data;
         const details = this._parent.getActionDetails(action);
@@ -395,6 +519,11 @@ class KeyboardShortcutHotkeyEntry {
         await this._setArgument(argumentDefault);
     }
 
+    /**
+     * @param {import('settings').InputsHotkeyOptions[]} defaultHotkeys
+     * @param {string} action
+     * @returns {?{modifiers: import('settings').InputsHotkeyModifier[], key: ?string}}
+     */
     _getDefaultKeyAndModifiers(defaultHotkeys, action) {
         for (const {action: action2, key, modifiers} of defaultHotkeys) {
             if (action2 !== action) { continue; }
@@ -403,16 +532,18 @@ class KeyboardShortcutHotkeyEntry {
         return null;
     }
 
+    /**
+     * @param {string} value
+     */
     async _setAction(value) {
         const validScopesOld = this._getValidScopesForAction(this._data.action);
 
         const scopes = this._data.scopes;
 
         let details = this._parent.getActionDetails(value);
-        if (typeof details === 'undefined') { details = {}; }
+        if (typeof details === 'undefined') { details = {scopes: new Set()}; }
 
-        let validScopes = details.scopes;
-        if (typeof validScopes === 'undefined') { validScopes = new Set(); }
+        const validScopes = details.scopes;
 
         const {argument: argumentDetails} = details;
         let defaultArgument = typeof argumentDetails !== 'undefined' ? argumentDetails.default : '';
@@ -462,6 +593,9 @@ class KeyboardShortcutHotkeyEntry {
         this._updateActionArgument();
     }
 
+    /**
+     * @param {string} value
+     */
     async _setArgument(value) {
         this._data.argument = value;
 
@@ -479,16 +613,24 @@ class KeyboardShortcutHotkeyEntry {
         }]);
     }
 
+    /** */
     _updateScopesMenu() {
         if (this._scopeMenu === null) { return; }
         this._updateScopeMenuItems(this._scopeMenu);
     }
 
+    /**
+     * @param {string} action
+     * @returns {?Set<import('settings').InputsHotkeyScope>}
+     */
     _getValidScopesForAction(action) {
         const details = this._parent.getActionDetails(action);
         return typeof details !== 'undefined' ? details.scopes : null;
     }
 
+    /**
+     * @param {import('../../dom/popup-menu.js').PopupMenu} menu
+     */
     _updateScopeMenuItems(menu) {
         this._scopeMenuEventListeners.removeAllEventListeners();
 
@@ -496,14 +638,15 @@ class KeyboardShortcutHotkeyEntry {
         const validScopes = this._getValidScopesForAction(this._data.action);
 
         const bodyNode = menu.bodyNode;
-        const menuItems = bodyNode.querySelectorAll('.popup-menu-item');
+        const menuItems = /** @type {NodeListOf<HTMLElement>} */ (bodyNode.querySelectorAll('.popup-menu-item'));
         for (const menuItem of menuItems) {
             if (menuItem.dataset.menuAction !== 'toggleScope') { continue; }
 
-            const {scope} = menuItem.dataset;
+            const scope = this._normalizeScope(menuItem.dataset.scope);
+            if (scope === null) { continue; }
             menuItem.hidden = !(validScopes === null || validScopes.has(scope));
 
-            const checkbox = menuItem.querySelector('.hotkey-scope-checkbox');
+            const checkbox = /** @type {HTMLInputElement} */ (menuItem.querySelector('.hotkey-scope-checkbox'));
             if (checkbox !== null) {
                 checkbox.checked = scopes.includes(scope);
                 this._scopeMenuEventListeners.addEventListener(checkbox, 'change', this._onScopeCheckboxChange.bind(this), false);
@@ -511,16 +654,23 @@ class KeyboardShortcutHotkeyEntry {
         }
     }
 
+    /** */
     _clearScopeMenu() {
         this._scopeMenuEventListeners.removeAllEventListeners();
         this._scopeMenu = null;
     }
 
+    /** */
     _updateScopesButton() {
         const {scopes} = this._data;
-        this._enabledButton.dataset.scopeCount = `${scopes.length}`;
+        if (this._enabledButton !== null) {
+            this._enabledButton.dataset.scopeCount = `${scopes.length}`;
+        }
     }
 
+    /**
+     * @param {HTMLElement} node
+     */
     _updateDisplay(node) {
         const {style} = node;
         const {display} = style;
@@ -529,49 +679,64 @@ class KeyboardShortcutHotkeyEntry {
         style.display = display;
     }
 
+    /** */
     _updateActionArgument() {
         this._clearArgumentEventListeners();
 
         const {action, argument} = this._data;
         const details = this._parent.getActionDetails(action);
-        const {argument: argumentDetails} = typeof details !== 'undefined' ? details : {};
+        const argumentDetails = typeof details !== 'undefined' ? details.argument : void 0;
 
-        this._argumentContainer.textContent = '';
+        if (this._argumentContainer !== null) {
+            this._argumentContainer.textContent = '';
+        }
         if (typeof argumentDetails !== 'undefined') {
             const {template} = argumentDetails;
             const node = this._parent.settingsController.instantiateTemplate(template);
             const inputSelector = '.hotkey-argument-input';
-            const inputNode = node.matches(inputSelector) ? node : node.querySelector(inputSelector);
+            const inputNode = /** @type {HTMLInputElement} */ (node.matches(inputSelector) ? node : node.querySelector(inputSelector));
             if (inputNode !== null) {
                 this._setArgumentInputValue(inputNode, argument);
                 this._argumentInput = inputNode;
                 this._updateArgumentInputValidity();
                 this._argumentEventListeners.addEventListener(inputNode, 'change', this._onArgumentValueChange.bind(this, template), false);
             }
-            this._argumentContainer.appendChild(node);
+            if (this._argumentContainer !== null) {
+                this._argumentContainer.appendChild(node);
+            }
         }
     }
 
+    /** */
     _clearArgumentEventListeners() {
         this._argumentEventListeners.removeAllEventListeners();
         this._argumentInput = null;
     }
 
+    /**
+     * @param {HTMLInputElement} node
+     * @returns {string}
+     */
     _getArgumentInputValue(node) {
         return node.value;
     }
 
+    /**
+     * @param {HTMLInputElement} node
+     * @param {string} value
+     */
     _setArgumentInputValue(node, value) {
         node.value = value;
     }
 
+    /** */
     async _updateArgumentInputValidity() {
         if (this._argumentInput === null) { return; }
 
         let okay = true;
         const {action, argument} = this._data;
         const details = this._parent.getActionDetails(action);
-        const {argument: argumentDetails} = typeof details !== 'undefined' ? details : {};
+        const argumentDetails = typeof details !== 'undefined' ? details.argument : void 0;
 
         if (typeof argumentDetails !== 'undefined') {
             const {template} = argumentDetails;
@@ -585,6 +750,10 @@ class KeyboardShortcutHotkeyEntry {
         this._argumentInput.dataset.invalid = `${!okay}`;
     }
 
+    /**
+     * @param {string} path
+     * @returns {Promise<boolean>}
+     */
     async _isHotkeyArgumentSettingPathValid(path) {
         if (path.length === 0) { return true; }
 
@@ -601,4 +770,19 @@ class KeyboardShortcutHotkeyEntry {
         }
         return false;
     }
+
+    /**
+     * @param {string|undefined} value
+     * @returns {?import('settings').InputsHotkeyScope}
+     */
+    _normalizeScope(value) {
+        switch (value) {
+            case 'popup':
+            case 'search':
+            case 'web':
+                return value;
+            default:
+                return null;
+        }
+    }
 }
diff --git a/ext/js/pages/settings/mecab-controller.js b/ext/js/pages/settings/mecab-controller.js
index a839fc21..4e2b02c6 100644
--- a/ext/js/pages/settings/mecab-controller.js
+++ b/ext/js/pages/settings/mecab-controller.js
@@ -19,48 +19,61 @@
 import {yomitan} from '../../yomitan.js';
 
 export class MecabController {
-    constructor(settingsController) {
-        this._settingsController = settingsController;
+    constructor() {
+        /** @type {?HTMLButtonElement} */
         this._testButton = null;
+        /** @type {?HTMLElement} */
         this._resultsContainer = null;
+        /** @type {boolean} */
         this._testActive = false;
     }
 
+    /** */
     prepare() {
-        this._testButton = document.querySelector('#test-mecab-button');
-        this._resultsContainer = document.querySelector('#test-mecab-results');
+        this._testButton = /** @type {HTMLButtonElement} */ (document.querySelector('#test-mecab-button'));
+        this._resultsContainer = /** @type {HTMLElement} */ (document.querySelector('#test-mecab-results'));
 
         this._testButton.addEventListener('click', this._onTestButtonClick.bind(this), false);
     }
 
     // Private
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onTestButtonClick(e) {
         e.preventDefault();
         this._testMecab();
     }
 
+    /** */
     async _testMecab() {
         if (this._testActive) { return; }
 
         try {
             this._testActive = true;
-            this._testButton.disabled = true;
-            this._resultsContainer.textContent = '';
-            this._resultsContainer.hidden = true;
+            const resultsContainer = /** @type {HTMLElement} */ (this._resultsContainer);
+            /** @type {HTMLButtonElement} */ (this._testButton).disabled = true;
+            resultsContainer.textContent = '';
+            resultsContainer.hidden = true;
             await yomitan.api.testMecab();
             this._setStatus('Connection was successful', false);
         } catch (e) {
-            this._setStatus(e.message, true);
+            this._setStatus(e instanceof Error ? e.message : `${e}`, true);
         } finally {
             this._testActive = false;
-            this._testButton.disabled = false;
+            /** @type {HTMLButtonElement} */ (this._testButton).disabled = false;
         }
     }
 
+    /**
+     * @param {string} message
+     * @param {boolean} isError
+     */
     _setStatus(message, isError) {
-        this._resultsContainer.textContent = message;
-        this._resultsContainer.hidden = false;
-        this._resultsContainer.classList.toggle('danger-text', isError);
+        const resultsContainer = /** @type {HTMLElement} */ (this._resultsContainer);
+        resultsContainer.textContent = message;
+        resultsContainer.hidden = false;
+        resultsContainer.classList.toggle('danger-text', isError);
     }
 }
diff --git a/ext/js/pages/settings/modal-controller.js b/ext/js/pages/settings/modal-controller.js
index 517a19b3..852bdcc5 100644
--- a/ext/js/pages/settings/modal-controller.js
+++ b/ext/js/pages/settings/modal-controller.js
@@ -20,13 +20,16 @@ import {Modal} from './modal.js';
 
 export class ModalController {
     constructor() {
+        /** @type {Modal[]} */
         this._modals = [];
+        /** @type {Map<string|Element, Modal>} */
         this._modalMap = new Map();
     }
 
+    /** */
     prepare() {
         const idSuffix = '-modal';
-        for (const node of document.querySelectorAll('.modal')) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.modal'))) {
             let {id} = node;
             if (typeof id !== 'string') { continue; }
 
@@ -42,11 +45,18 @@ export class ModalController {
         }
     }
 
+    /**
+     * @param {string|Element} nameOrNode
+     * @returns {?Modal}
+     */
     getModal(nameOrNode) {
         const modal = this._modalMap.get(nameOrNode);
         return (typeof modal !== 'undefined' ? modal : null);
     }
 
+    /**
+     * @returns {?Modal}
+     */
     getTopVisibleModal() {
         for (let i = this._modals.length - 1; i >= 0; --i) {
             const modal = this._modals[i];
diff --git a/ext/js/pages/settings/modal.js b/ext/js/pages/settings/modal.js
index 4d1c098d..21a6e705 100644
--- a/ext/js/pages/settings/modal.js
+++ b/ext/js/pages/settings/modal.js
@@ -19,40 +19,55 @@
 import {PanelElement} from '../../dom/panel-element.js';
 
 export class Modal extends PanelElement {
+    /**
+     * @param {HTMLElement} node
+     */
     constructor(node) {
         super({
             node,
             closingAnimationDuration: 375 // Milliseconds; includes buffer
         });
+        /** @type {?Element} */
         this._contentNode = null;
+        /** @type {boolean} */
         this._canCloseOnClick = false;
     }
 
+    /** */
     prepare() {
         const node = this.node;
         this._contentNode = node.querySelector('.modal-content');
-        let dimmerNode = node.querySelector('.modal-content-dimmer');
+        let dimmerNode = /** @type {?HTMLElement} */ (node.querySelector('.modal-content-dimmer'));
         if (dimmerNode === null) { dimmerNode = node; }
         dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
         dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
         dimmerNode.addEventListener('click', this._onModalContainerClick.bind(this), false);
 
-        for (const actionNode of node.querySelectorAll('[data-modal-action]')) {
+        for (const actionNode of /** @type {NodeListOf<HTMLElement>} */ (node.querySelectorAll('[data-modal-action]'))) {
             actionNode.addEventListener('click', this._onActionNodeClick.bind(this), false);
         }
     }
 
     // Private
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onModalContainerMouseDown(e) {
         this._canCloseOnClick = (e.currentTarget === e.target);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onModalContainerMouseUp(e) {
         if (!this._canCloseOnClick) { return; }
         this._canCloseOnClick = (e.currentTarget === e.target);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onModalContainerClick(e) {
         if (!this._canCloseOnClick) { return; }
         this._canCloseOnClick = false;
@@ -60,8 +75,12 @@ export class Modal extends PanelElement {
         this.setVisible(false);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onActionNodeClick(e) {
-        const {modalAction} = e.currentTarget.dataset;
+        const element = /** @type {HTMLElement} */ (e.currentTarget);
+        const {modalAction} = element.dataset;
         switch (modalAction) {
             case 'expand':
                 this._setExpanded(true);
@@ -72,6 +91,9 @@ export class Modal extends PanelElement {
         }
     }
 
+    /**
+     * @param {boolean} expanded
+     */
     _setExpanded(expanded) {
         if (this._contentNode === null) { return; }
         this._contentNode.classList.toggle('modal-content-full', expanded);
diff --git a/ext/js/pages/settings/nested-popups-controller.js b/ext/js/pages/settings/nested-popups-controller.js
index b9621ef0..c01986ab 100644
--- a/ext/js/pages/settings/nested-popups-controller.js
+++ b/ext/js/pages/settings/nested-popups-controller.js
@@ -19,50 +19,79 @@
 import {DocumentUtil} from '../../dom/document-util.js';
 
 export class NestedPopupsController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {number} */
         this._popupNestingMaxDepth = 0;
+        /** @type {?HTMLInputElement} */
+        this._nestedPopupsEnabled = null;
+        /** @type {?HTMLInputElement} */
+        this._nestedPopupsCount = null;
+        /** @type {?HTMLElement} */
+        this._nestedPopupsEnabledMoreOptions = null;
     }
 
+    /** */
     async prepare() {
-        this._nestedPopupsEnabled = document.querySelector('#nested-popups-enabled');
-        this._nestedPopupsCount = document.querySelector('#nested-popups-count');
-        this._nestedPopupsEnabledMoreOptions = document.querySelector('#nested-popups-enabled-more-options');
+        this._nestedPopupsEnabled = /** @type {HTMLInputElement} */ (document.querySelector('#nested-popups-enabled'));
+        this._nestedPopupsCount = /** @type {HTMLInputElement} */ (document.querySelector('#nested-popups-count'));
+        this._nestedPopupsEnabledMoreOptions = /** @type {HTMLElement} */ (document.querySelector('#nested-popups-enabled-more-options'));
 
         const options = await this._settingsController.getOptions();
+        const optionsContext = this._settingsController.getOptionsContext();
 
         this._nestedPopupsEnabled.addEventListener('change', this._onNestedPopupsEnabledChange.bind(this), false);
         this._nestedPopupsCount.addEventListener('change', this._onNestedPopupsCountChange.bind(this), false);
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
-        this._onOptionsChanged({options});
+        this._onOptionsChanged({options, optionsContext});
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         this._updatePopupNestingMaxDepth(options.scanning.popupNestingMaxDepth);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onNestedPopupsEnabledChange(e) {
-        const value = e.currentTarget.checked;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const value = node.checked;
         if (value && this._popupNestingMaxDepth > 0) { return; }
         this._setPopupNestingMaxDepth(value ? 1 : 0);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onNestedPopupsCountChange(e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         const value = Math.max(1, DocumentUtil.convertElementValueToNumber(node.value, node));
         this._setPopupNestingMaxDepth(value);
     }
 
+    /**
+     * @param {number} value
+     */
     _updatePopupNestingMaxDepth(value) {
         const enabled = (value > 0);
         this._popupNestingMaxDepth = value;
-        this._nestedPopupsEnabled.checked = enabled;
-        this._nestedPopupsCount.value = `${value}`;
-        this._nestedPopupsEnabledMoreOptions.hidden = !enabled;
+        /** @type {HTMLInputElement} */ (this._nestedPopupsEnabled).checked = enabled;
+        /** @type {HTMLInputElement} */ (this._nestedPopupsCount).value = `${value}`;
+        /** @type {HTMLElement} */ (this._nestedPopupsEnabledMoreOptions).hidden = !enabled;
     }
 
+    /**
+     * @param {number} value
+     */
     async _setPopupNestingMaxDepth(value) {
         this._updatePopupNestingMaxDepth(value);
         await this._settingsController.setProfileSetting('scanning.popupNestingMaxDepth', value);
diff --git a/ext/js/pages/settings/permissions-origin-controller.js b/ext/js/pages/settings/permissions-origin-controller.js
index d234faa0..a4271f92 100644
--- a/ext/js/pages/settings/permissions-origin-controller.js
+++ b/ext/js/pages/settings/permissions-origin-controller.js
@@ -19,24 +19,36 @@
 import {EventListenerCollection} from '../../core.js';
 
 export class PermissionsOriginController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?HTMLElement} */
         this._originContainer = null;
+        /** @type {?HTMLElement} */
         this._originEmpty = null;
+        /** @type {?NodeListOf<HTMLInputElement>} */
         this._originToggleNodes = null;
+        /** @type {?HTMLInputElement} */
         this._addOriginInput = null;
+        /** @type {?HTMLElement} */
         this._errorContainer = null;
+        /** @type {ChildNode[]} */
         this._originContainerChildren = [];
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
     }
 
+    /** */
     async prepare() {
-        this._originContainer = document.querySelector('#permissions-origin-list');
-        this._originEmpty = document.querySelector('#permissions-origin-list-empty');
-        this._originToggleNodes = document.querySelectorAll('.permissions-origin-toggle');
-        this._addOriginInput = document.querySelector('#permissions-origin-new-input');
-        this._errorContainer = document.querySelector('#permissions-origin-list-error');
-        const addButton = document.querySelector('#permissions-origin-add');
+        this._originContainer = /** @type {HTMLElement} */ (document.querySelector('#permissions-origin-list'));
+        this._originEmpty = /** @type {HTMLElement} */ (document.querySelector('#permissions-origin-list-empty'));
+        this._originToggleNodes = /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('.permissions-origin-toggle'));
+        this._addOriginInput = /** @type {HTMLInputElement} */ (document.querySelector('#permissions-origin-new-input'));
+        this._errorContainer = /** @type {HTMLElement} */ (document.querySelector('#permissions-origin-list-error'));
+        const addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#permissions-origin-add'));
 
         for (const node of this._originToggleNodes) {
             node.addEventListener('change', this._onOriginToggleChange.bind(this), false);
@@ -49,6 +61,9 @@ export class PermissionsOriginController {
 
     // Private
 
+    /**
+     * @param {import('settings-controller').PermissionsChangedEvent} details
+     */
     _onPermissionsChanged({permissions}) {
         this._eventListeners.removeAllEventListeners();
         for (const node of this._originContainerChildren) {
@@ -57,9 +72,11 @@ export class PermissionsOriginController {
         }
         this._originContainerChildren = [];
 
+        /** @type {Set<string>} */
         const originsSet = new Set(permissions.origins);
-        for (const node of this._originToggleNodes) {
-            node.checked = originsSet.has(node.dataset.origin);
+        for (const node of /** @type {NodeListOf<HTMLInputElement>} */ (this._originToggleNodes)) {
+            const {origin} = node.dataset;
+            node.checked = typeof origin === 'string' && originsSet.has(origin);
         }
 
         let any = false;
@@ -67,60 +84,78 @@ export class PermissionsOriginController {
             '<all_urls>'
         ]);
         const fragment = document.createDocumentFragment();
-        for (const origin of permissions.origins) {
+        for (const origin of originsSet) {
             if (excludeOrigins.has(origin)) { continue; }
             const node = this._settingsController.instantiateTemplateFragment('permissions-origin');
-            const input = node.querySelector('.permissions-origin-input');
-            const menuButton = node.querySelector('.permissions-origin-button');
+            const input = /** @type {HTMLInputElement} */ (node.querySelector('.permissions-origin-input'));
+            const menuButton = /** @type {HTMLElement} */ (node.querySelector('.permissions-origin-button'));
             input.value = origin;
             this._eventListeners.addEventListener(menuButton, 'menuClose', this._onOriginMenuClose.bind(this, origin), false);
             this._originContainerChildren.push(...node.childNodes);
             fragment.appendChild(node);
             any = true;
         }
-        this._originContainer.insertBefore(fragment, this._originContainer.firstChild);
-        this._originEmpty.hidden = any;
+        const container = /** @type {HTMLElement} */ (this._originContainer);
+        container.insertBefore(fragment, container.firstChild);
+        /** @type {HTMLElement} */ (this._originEmpty).hidden = any;
 
-        this._errorContainer.hidden = true;
+        /** @type {HTMLElement} */ (this._errorContainer).hidden = true;
     }
 
+    /**
+     * @param {Event} e
+     */
     _onOriginToggleChange(e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         const value = node.checked;
         node.checked = !value;
 
         const {origin} = node.dataset;
+        if (typeof origin !== 'string') { return; }
         this._setOriginPermissionEnabled(origin, value);
     }
 
+    /**
+     * @param {string} origin
+     */
     _onOriginMenuClose(origin) {
         this._setOriginPermissionEnabled(origin, false);
     }
 
+    /** */
     _onAddButtonClick() {
         this._addOrigin();
     }
 
+    /** */
     async _addOrigin() {
-        const origin = this._addOriginInput.value;
+        const input = /** @type {HTMLInputElement} */ (this._addOriginInput);
+        const origin = input.value;
         const added = await this._setOriginPermissionEnabled(origin, true);
         if (added) {
-            this._addOriginInput.value = '';
+            input.value = '';
         }
     }
 
+    /** */
     async _updatePermissions() {
         const permissions = await this._settingsController.permissionsUtil.getAllPermissions();
         this._onPermissionsChanged({permissions});
     }
 
+    /**
+     * @param {string} origin
+     * @param {boolean} enabled
+     * @returns {Promise<boolean>}
+     */
     async _setOriginPermissionEnabled(origin, enabled) {
         let added = false;
         try {
             added = await this._settingsController.permissionsUtil.setPermissionsGranted({origins: [origin]}, enabled);
         } catch (e) {
-            this._errorContainer.hidden = false;
-            this._errorContainer.textContent = e.message;
+            const errorContainer = /** @type {HTMLElement} */ (this._errorContainer);
+            errorContainer.hidden = false;
+            errorContainer.textContent = e instanceof Error ? e.message : `${e}`;
         }
         if (!added) { return false; }
         await this._updatePermissions();
diff --git a/ext/js/pages/settings/permissions-toggle-controller.js b/ext/js/pages/settings/permissions-toggle-controller.js
index 0e486c1e..85752a7e 100644
--- a/ext/js/pages/settings/permissions-toggle-controller.js
+++ b/ext/js/pages/settings/permissions-toggle-controller.js
@@ -19,11 +19,17 @@
 import {ObjectPropertyAccessor} from '../../general/object-property-accessor.js';
 
 export class PermissionsToggleController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?NodeListOf<HTMLInputElement>} */
         this._toggles = null;
     }
 
+    /** */
     async prepare() {
         this._toggles = document.querySelectorAll('.permissions-toggle');
 
@@ -34,14 +40,18 @@ export class PermissionsToggleController {
         this._settingsController.on('permissionsChanged', this._onPermissionsChanged.bind(this));
 
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         let accessor = null;
-        for (const toggle of this._toggles) {
+        for (const toggle of /** @type {NodeListOf<HTMLInputElement>} */ (this._toggles)) {
             const {permissionsSetting} = toggle.dataset;
             if (typeof permissionsSetting !== 'string') { continue; }
 
@@ -61,8 +71,11 @@ export class PermissionsToggleController {
         this._updateValidity();
     }
 
+    /**
+     * @param {Event} e
+     */
     async _onPermissionsToggleChange(e) {
-        const toggle = e.currentTarget;
+        const toggle = /** @type {HTMLInputElement} */ (e.currentTarget);
         let value = toggle.checked;
         const valuePre = !value;
         const {permissionsSetting} = toggle.dataset;
@@ -90,9 +103,13 @@ export class PermissionsToggleController {
         }
     }
 
-    _onPermissionsChanged({permissions: {permissions}}) {
-        const permissionsSet = new Set(permissions);
-        for (const toggle of this._toggles) {
+    /**
+     * @param {import('settings-controller').PermissionsChangedEvent} details
+     */
+    _onPermissionsChanged({permissions}) {
+        const permissions2 = permissions.permissions;
+        const permissionsSet = new Set(typeof permissions2 !== 'undefined' ? permissions2 : []);
+        for (const toggle of /** @type {NodeListOf<HTMLInputElement>} */ (this._toggles)) {
             const {permissionsSetting} = toggle.dataset;
             const hasPermissions = this._hasAll(permissionsSet, this._getRequiredPermissions(toggle));
 
@@ -105,17 +122,27 @@ export class PermissionsToggleController {
         }
     }
 
+    /**
+     * @param {HTMLInputElement} toggle
+     * @param {boolean} valid
+     */
     _setToggleValid(toggle, valid) {
-        const relative = toggle.closest('.settings-item');
+        const relative = /** @type {?HTMLElement} */ (toggle.closest('.settings-item'));
         if (relative === null) { return; }
         relative.dataset.invalid = `${!valid}`;
     }
 
+    /** */
     async _updateValidity() {
         const permissions = await this._settingsController.permissionsUtil.getAllPermissions();
         this._onPermissionsChanged({permissions});
     }
 
+    /**
+     * @param {Set<string>} set
+     * @param {string[]} values
+     * @returns {boolean}
+     */
     _hasAll(set, values) {
         for (const value of values) {
             if (!set.has(value)) { return false; }
@@ -123,6 +150,10 @@ export class PermissionsToggleController {
         return true;
     }
 
+    /**
+     * @param {HTMLInputElement} toggle
+     * @returns {string[]}
+     */
     _getRequiredPermissions(toggle) {
         const requiredPermissions = toggle.dataset.requiredPermissions;
         return (typeof requiredPermissions === 'string' && requiredPermissions.length > 0 ? requiredPermissions.split(' ') : []);
diff --git a/ext/js/pages/settings/persistent-storage-controller.js b/ext/js/pages/settings/persistent-storage-controller.js
index aa060c14..e85bfc6b 100644
--- a/ext/js/pages/settings/persistent-storage-controller.js
+++ b/ext/js/pages/settings/persistent-storage-controller.js
@@ -21,22 +21,27 @@ import {yomitan} from '../../yomitan.js';
 
 export class PersistentStorageController {
     constructor() {
-        this._persistentStorageCheckbox = false;
+        /** @type {?HTMLInputElement} */
+        this._persistentStorageCheckbox = null;
     }
 
+    /** */
     async prepare() {
-        this._persistentStorageCheckbox = document.querySelector('#storage-persistent-checkbox');
+        this._persistentStorageCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#storage-persistent-checkbox'));
         this._persistentStorageCheckbox.addEventListener('change', this._onPersistentStorageCheckboxChange.bind(this), false);
 
         if (!this._isPersistentStorageSupported()) { return; }
 
-        const info = document.querySelector('#storage-persistent-info');
+        const info = /** @type {?HTMLElement} */ (document.querySelector('#storage-persistent-info'));
         if (info !== null) { info.hidden = false; }
 
         const isStoragePeristent = await this.isStoragePeristent();
         this._updateCheckbox(isStoragePeristent);
     }
 
+    /**
+     * @returns {Promise<boolean>}
+     */
     async isStoragePeristent() {
         try {
             return await navigator.storage.persisted();
@@ -48,8 +53,11 @@ export class PersistentStorageController {
 
     // Private
 
+    /**
+     * @param {Event} e
+     */
     _onPersistentStorageCheckboxChange(e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         if (node.checked) {
             node.checked = false;
             this._attemptPersistStorage();
@@ -58,6 +66,7 @@ export class PersistentStorageController {
         }
     }
 
+    /** */
     async _attemptPersistStorage() {
         let isStoragePeristent = false;
         try {
@@ -68,18 +77,24 @@ export class PersistentStorageController {
 
         this._updateCheckbox(isStoragePeristent);
 
-        const node = document.querySelector('#storage-persistent-fail-warning');
+        const node = /** @type {?HTMLElement} */ (document.querySelector('#storage-persistent-fail-warning'));
         if (node !== null) { node.hidden = isStoragePeristent; }
 
         yomitan.trigger('storageChanged');
     }
 
+    /**
+     * @returns {boolean}
+     */
     _isPersistentStorageSupported() {
         return isObject(navigator.storage) && typeof navigator.storage.persist === 'function';
     }
 
+    /**
+     * @param {boolean} isStoragePeristent
+     */
     _updateCheckbox(isStoragePeristent) {
-        this._persistentStorageCheckbox.checked = isStoragePeristent;
-        this._persistentStorageCheckbox.readOnly = isStoragePeristent;
+        /** @type {HTMLInputElement} */ (this._persistentStorageCheckbox).checked = isStoragePeristent;
+        /** @type {HTMLInputElement} */ (this._persistentStorageCheckbox).readOnly = isStoragePeristent;
     }
 }
diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js
index a0cb696e..7239ca17 100644
--- a/ext/js/pages/settings/popup-preview-controller.js
+++ b/ext/js/pages/settings/popup-preview-controller.js
@@ -17,22 +17,32 @@
  */
 
 export class PopupPreviewController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {string} */
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
+        /** @type {?HTMLIFrameElement} */
         this._frame = null;
+        /** @type {?HTMLTextAreaElement} */
         this._customCss = null;
+        /** @type {?HTMLTextAreaElement} */
         this._customOuterCss = null;
+        /** @type {?HTMLElement} */
         this._previewFrameContainer = null;
     }
 
+    /** */
     async prepare() {
         if (new URLSearchParams(location.search).get('popup-preview') === 'false') { return; }
 
-        this._frame = document.querySelector('#popup-preview-frame');
-        this._customCss = document.querySelector('#custom-popup-css');
-        this._customOuterCss = document.querySelector('#custom-popup-outer-css');
-        this._previewFrameContainer = document.querySelector('.preview-frame-container');
+        this._frame = /** @type {HTMLIFrameElement} */ (document.querySelector('#popup-preview-frame'));
+        this._customCss = /** @type {HTMLTextAreaElement} */ (document.querySelector('#custom-popup-css'));
+        this._customOuterCss = /** @type {HTMLTextAreaElement} */ (document.querySelector('#custom-popup-outer-css'));
+        this._previewFrameContainer = /** @type {HTMLElement} */ (document.querySelector('.preview-frame-container'));
 
         this._customCss.addEventListener('input', this._onCustomCssChange.bind(this), false);
         this._customCss.addEventListener('settingChanged', this._onCustomCssChange.bind(this), false);
@@ -46,25 +56,35 @@ export class PopupPreviewController {
 
     // Private
 
+    /** */
     _onFrameLoad() {
         this._onOptionsContextChange();
         this._onCustomCssChange();
         this._onCustomOuterCssChange();
     }
 
+    /** */
     _onCustomCssChange() {
-        this._invoke('PopupPreviewFrame.setCustomCss', {css: this._customCss.value});
+        const css = /** @type {HTMLTextAreaElement} */ (this._customCss).value;
+        this._invoke('PopupPreviewFrame.setCustomCss', {css});
     }
 
+    /** */
     _onCustomOuterCssChange() {
-        this._invoke('PopupPreviewFrame.setCustomOuterCss', {css: this._customOuterCss.value});
+        const css = /** @type {HTMLTextAreaElement} */ (this._customOuterCss).value;
+        this._invoke('PopupPreviewFrame.setCustomOuterCss', {css});
     }
 
+    /** */
     _onOptionsContextChange() {
         const optionsContext = this._settingsController.getOptionsContext();
         this._invoke('PopupPreviewFrame.updateOptionsContext', {optionsContext});
     }
 
+    /**
+     * @param {string} action
+     * @param {import('core').SerializableObject} params
+     */
     _invoke(action, params) {
         if (this._frame === null || this._frame.contentWindow === null) { return; }
         this._frame.contentWindow.postMessage({action, params}, this._targetOrigin);
diff --git a/ext/js/pages/settings/popup-preview-frame-main.js b/ext/js/pages/settings/popup-preview-frame-main.js
index 59e409c5..bce485fe 100644
--- a/ext/js/pages/settings/popup-preview-frame-main.js
+++ b/ext/js/pages/settings/popup-preview-frame-main.js
@@ -27,6 +27,12 @@ import {PopupPreviewFrame} from './popup-preview-frame.js';
         await yomitan.prepare();
 
         const {tabId, frameId} = await yomitan.api.frameInformationGet();
+        if (typeof tabId === 'undefined') {
+            throw new Error('Failed to get tabId');
+        }
+        if (typeof frameId === 'undefined') {
+            throw new Error('Failed to get frameId');
+        }
 
         const hotkeyHandler = new HotkeyHandler();
         hotkeyHandler.prepare();
diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js
index 7a1a0b3a..60d264fa 100644
--- a/ext/js/pages/settings/popup-preview-frame.js
+++ b/ext/js/pages/settings/popup-preview-frame.js
@@ -22,32 +22,53 @@ import {TextSourceRange} from '../../dom/text-source-range.js';
 import {yomitan} from '../../yomitan.js';
 
 export class PopupPreviewFrame {
+    /**
+     * @param {number} tabId
+     * @param {number} frameId
+     * @param {import('../../app/popup-factory.js').PopupFactory} popupFactory
+     * @param {import('../../input/hotkey-handler.js').HotkeyHandler} hotkeyHandler
+     */
     constructor(tabId, frameId, popupFactory, hotkeyHandler) {
+        /** @type {number} */
         this._tabId = tabId;
+        /** @type {number} */
         this._frameId = frameId;
+        /** @type {import('../../app/popup-factory.js').PopupFactory} */
         this._popupFactory = popupFactory;
+        /** @type {import('../../input/hotkey-handler.js').HotkeyHandler} */
         this._hotkeyHandler = hotkeyHandler;
+        /** @type {?Frontend} */
         this._frontend = null;
+        /** @type {?(optionsContext: import('settings').OptionsContext) => Promise<import('settings').ProfileOptions>} */
         this._apiOptionsGetOld = null;
+        /** @type {boolean} */
         this._popupShown = false;
+        /** @type {?import('core').Timeout} */
         this._themeChangeTimeout = null;
+        /** @type {?import('text-source').TextSource} */
         this._textSource = null;
+        /** @type {?import('settings').OptionsContext} */
         this._optionsContext = null;
+        /** @type {?HTMLElement} */
         this._exampleText = null;
+        /** @type {?HTMLInputElement} */
         this._exampleTextInput = null;
+        /** @type {string} */
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
 
-        this._windowMessageHandlers = new Map([
+        /** @type {Map<string, (params: import('core').SerializableObjectAny) => void>} */
+        this._windowMessageHandlers = new Map(/** @type {[key: string, handler: (params: import('core').SerializableObjectAny) => void][]} */ ([
             ['PopupPreviewFrame.setText',              this._onSetText.bind(this)],
             ['PopupPreviewFrame.setCustomCss',         this._setCustomCss.bind(this)],
             ['PopupPreviewFrame.setCustomOuterCss',    this._setCustomOuterCss.bind(this)],
             ['PopupPreviewFrame.updateOptionsContext', this._updateOptionsContext.bind(this)]
-        ]);
+        ]));
     }
 
+    /** */
     async prepare() {
-        this._exampleText = document.querySelector('#example-text');
-        this._exampleTextInput = document.querySelector('#example-text-input');
+        this._exampleText = /** @type {HTMLElement} */ (document.querySelector('#example-text'));
+        this._exampleTextInput = /** @type {HTMLInputElement} */ (document.querySelector('#example-text-input'));
 
         if (this._exampleTextInput !== null && typeof wanakana !== 'undefined') {
             wanakana.bind(this._exampleTextInput);
@@ -56,12 +77,14 @@ export class PopupPreviewFrame {
         window.addEventListener('message', this._onMessage.bind(this), false);
 
         // Setup events
-        document.querySelector('#theme-dark-checkbox').addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false);
+        const darkThemeCheckbox = /** @type {HTMLInputElement} */ (document.querySelector('#theme-dark-checkbox'));
+        darkThemeCheckbox.addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false);
         this._exampleText.addEventListener('click', this._onExampleTextClick.bind(this), false);
         this._exampleTextInput.addEventListener('blur', this._onExampleTextInputBlur.bind(this), false);
         this._exampleTextInput.addEventListener('input', this._onExampleTextInputInput.bind(this), false);
 
         // Overwrite API functions
+        /** @type {?(optionsContext: import('settings').OptionsContext) => Promise<import('settings').ProfileOptions>} */
         this._apiOptionsGetOld = yomitan.api.optionsGet.bind(yomitan.api);
         yomitan.api.optionsGet = this._apiOptionsGet.bind(this);
 
@@ -84,7 +107,10 @@ export class PopupPreviewFrame {
         await this._frontend.prepare();
         this._frontend.setDisabledOverride(true);
         this._frontend.canClearSelection = false;
-        this._frontend.popup.on('customOuterCssChanged', this._onCustomOuterCssChanged.bind(this));
+        const {popup} = this._frontend;
+        if (popup !== null) {
+            popup.on('customOuterCssChanged', this._onCustomOuterCssChanged.bind(this));
+        }
 
         // Update search
         this._updateSearch();
@@ -92,8 +118,12 @@ export class PopupPreviewFrame {
 
     // Private
 
-    async _apiOptionsGet(...args) {
-        const options = await this._apiOptionsGetOld(...args);
+    /**
+     * @param {import('settings').OptionsContext} optionsContext
+     * @returns {Promise<import('settings').ProfileOptions>}
+     */
+    async _apiOptionsGet(optionsContext) {
+        const options = await /** @type {(optionsContext: import('settings').OptionsContext) => Promise<import('settings').ProfileOptions>} */ (this._apiOptionsGetOld)(optionsContext);
         options.general.enable = true;
         options.general.debugInfo = false;
         options.general.popupWidth = 400;
@@ -108,16 +138,24 @@ export class PopupPreviewFrame {
         return options;
     }
 
+    /**
+     * @param {import('popup').CustomOuterCssChangedEvent} details
+     */
     _onCustomOuterCssChanged({node, inShadow}) {
         if (node === null || inShadow) { return; }
 
         const node2 = document.querySelector('#popup-outer-css');
         if (node2 === null) { return; }
+        const {parentNode} = node2;
+        if (parentNode === null) { return; }
 
         // This simulates the stylesheet priorities when injecting using the web extension API.
-        node2.parentNode.insertBefore(node, node2);
+        parentNode.insertBefore(node, node2);
     }
 
+    /**
+     * @param {MessageEvent<{action: string, params: import('core').SerializableObject}>} e
+     */
     _onMessage(e) {
         if (e.origin !== this._targetOrigin) { return; }
 
@@ -128,19 +166,24 @@ export class PopupPreviewFrame {
         handler(params);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onThemeDarkCheckboxChanged(e) {
-        document.documentElement.classList.toggle('dark', e.target.checked);
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        document.documentElement.classList.toggle('dark', element.checked);
         if (this._themeChangeTimeout !== null) {
             clearTimeout(this._themeChangeTimeout);
         }
         this._themeChangeTimeout = setTimeout(() => {
             this._themeChangeTimeout = null;
-            const popup = this._frontend.popup;
+            const popup = /** @type {Frontend} */ (this._frontend).popup;
             if (popup === null) { return; }
             popup.updateTheme();
         }, 300);
     }
 
+    /** */
     _onExampleTextClick() {
         if (this._exampleTextInput === null) { return; }
         const visible = this._exampleTextInput.hidden;
@@ -150,19 +193,31 @@ export class PopupPreviewFrame {
         this._exampleTextInput.select();
     }
 
+    /** */
     _onExampleTextInputBlur() {
         if (this._exampleTextInput === null) { return; }
         this._exampleTextInput.hidden = true;
     }
 
+    /**
+     * @param {Event} e
+     */
     _onExampleTextInputInput(e) {
-        this._setText(e.currentTarget.value);
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        this._setText(element.value, false);
     }
 
+    /**
+     * @param {{text: string}} details
+     */
     _onSetText({text}) {
         this._setText(text, true);
     }
 
+    /**
+     * @param {string} text
+     * @param {boolean} setInput
+     */
     _setText(text, setInput) {
         if (setInput && this._exampleTextInput !== null) {
             this._exampleTextInput.value = text;
@@ -175,6 +230,9 @@ export class PopupPreviewFrame {
         this._updateSearch();
     }
 
+    /**
+     * @param {boolean} visible
+     */
     _setInfoVisible(visible) {
         const node = document.querySelector('.placeholder-info');
         if (node === null) { return; }
@@ -182,6 +240,9 @@ export class PopupPreviewFrame {
         node.classList.toggle('placeholder-info-visible', visible);
     }
 
+    /**
+     * @param {{css: string}} details
+     */
     _setCustomCss({css}) {
         if (this._frontend === null) { return; }
         const popup = this._frontend.popup;
@@ -189,6 +250,9 @@ export class PopupPreviewFrame {
         popup.setCustomCss(css);
     }
 
+    /**
+     * @param {{css: string}} details
+     */
     _setCustomOuterCss({css}) {
         if (this._frontend === null) { return; }
         const popup = this._frontend.popup;
@@ -196,7 +260,11 @@ export class PopupPreviewFrame {
         popup.setCustomOuterCss(css, false);
     }
 
-    async _updateOptionsContext({optionsContext}) {
+    /**
+     * @param {{optionsContext: import('settings').OptionsContext}} details
+     */
+    async _updateOptionsContext(details) {
+        const {optionsContext} = details;
         this._optionsContext = optionsContext;
         if (this._frontend === null) { return; }
         this._frontend.setOptionsContextOverride(optionsContext);
@@ -204,6 +272,7 @@ export class PopupPreviewFrame {
         await this._updateSearch();
     }
 
+    /** */
     async _updateSearch() {
         if (this._exampleText === null) { return; }
 
@@ -213,16 +282,17 @@ export class PopupPreviewFrame {
         const range = document.createRange();
         range.selectNodeContents(textNode);
         const source = TextSourceRange.create(range);
+        const frontend = /** @type {Frontend} */ (this._frontend);
 
         try {
-            await this._frontend.setTextSource(source);
+            await frontend.setTextSource(source);
         } finally {
             source.cleanup();
         }
         this._textSource = source;
-        await this._frontend.showContentCompleted();
+        await frontend.showContentCompleted();
 
-        const popup = this._frontend.popup;
+        const popup = frontend.popup;
         if (popup !== null && popup.isVisibleSync()) {
             this._popupShown = true;
         }
diff --git a/ext/js/pages/settings/popup-window-controller.js b/ext/js/pages/settings/popup-window-controller.js
index 9b6708d5..e1a5456b 100644
--- a/ext/js/pages/settings/popup-window-controller.js
+++ b/ext/js/pages/settings/popup-window-controller.js
@@ -19,18 +19,23 @@
 import {yomitan} from '../../yomitan.js';
 
 export class PopupWindowController {
+    /** */
     prepare() {
-        const testLink = document.querySelector('#test-window-open-link');
+        const testLink = /** @type {HTMLElement} */ (document.querySelector('#test-window-open-link'));
         testLink.addEventListener('click', this._onTestWindowOpenLinkClick.bind(this), false);
     }
 
     // Private
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onTestWindowOpenLinkClick(e) {
         e.preventDefault();
         this._testWindowOpen();
     }
 
+    /** */
     async _testWindowOpen() {
         await yomitan.api.getOrCreateSearchPopup({focus: true});
     }
diff --git a/ext/js/pages/settings/profile-conditions-ui.js b/ext/js/pages/settings/profile-conditions-ui.js
index bd790b1b..96aef83f 100644
--- a/ext/js/pages/settings/profile-conditions-ui.js
+++ b/ext/js/pages/settings/profile-conditions-ui.js
@@ -17,23 +17,39 @@
  */
 
 import {EventDispatcher, EventListenerCollection} from '../../core.js';
+import {DocumentUtil} from '../../dom/document-util.js';
 import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
+/**
+ * @augments EventDispatcher<import('profile-conditions-ui').EventType>
+ */
 export class ProfileConditionsUI extends EventDispatcher {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
         super();
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?import('environment').OperatingSystem} */
         this._os = null;
+        /** @type {?HTMLElement} */
         this._conditionGroupsContainer = null;
+        /** @type {?HTMLElement} */
         this._addConditionGroupButton = null;
+        /** @type {ProfileConditionGroupUI[]} */
         this._children = [];
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {import('profile-conditions-ui').DescriptorType} */
         this._defaultType = 'popupLevel';
+        /** @type {number} */
         this._profileIndex = 0;
         const validateInteger = this._validateInteger.bind(this);
         const normalizeInteger = this._normalizeInteger.bind(this);
         const validateFlags = this._validateFlags.bind(this);
         const normalizeFlags = this._normalizeFlags.bind(this);
+        /** @type {Map<import('profile-conditions-ui').DescriptorType, import('profile-conditions-ui').Descriptor>} */
         this._descriptors = new Map([
             [
                 'popupLevel',
@@ -88,19 +104,23 @@ export class ProfileConditionsUI extends EventDispatcher {
                 }
             ]
         ]);
+        /** @type {Set<string>} */
         this._validFlags = new Set([
             'clipboard'
         ]);
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._settingsController;
     }
 
+    /** @type {number} */
     get profileIndex() {
         return this._profileIndex;
     }
 
+    /** @type {?import('environment').OperatingSystem} */
     get os() {
         return this._os;
     }
@@ -109,6 +129,9 @@ export class ProfileConditionsUI extends EventDispatcher {
         this._os = value;
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     async prepare(profileIndex) {
         const options = await this._settingsController.getOptionsFull();
         const {profiles} = options;
@@ -116,8 +139,8 @@ export class ProfileConditionsUI extends EventDispatcher {
         const {conditionGroups} = profiles[profileIndex];
 
         this._profileIndex = profileIndex;
-        this._conditionGroupsContainer = document.querySelector('#profile-condition-groups');
-        this._addConditionGroupButton = document.querySelector('#profile-add-condition-group');
+        this._conditionGroupsContainer = /** @type {HTMLElement} */ (document.querySelector('#profile-condition-groups'));
+        this._addConditionGroupButton = /** @type {HTMLElement} */ (document.querySelector('#profile-add-condition-group'));
 
         for (let i = 0, ii = conditionGroups.length; i < ii; ++i) {
             this._addConditionGroup(conditionGroups[i], i);
@@ -126,6 +149,7 @@ export class ProfileConditionsUI extends EventDispatcher {
         this._eventListeners.addEventListener(this._addConditionGroupButton, 'click', this._onAddConditionGroupButtonClick.bind(this), false);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
 
@@ -138,10 +162,17 @@ export class ProfileConditionsUI extends EventDispatcher {
         this._addConditionGroupButton = null;
     }
 
-    instantiateTemplate(names) {
-        return this._settingsController.instantiateTemplate(names);
+    /**
+     * @param {string} name
+     * @returns {HTMLElement}
+     */
+    instantiateTemplate(name) {
+        return /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate(name));
     }
 
+    /**
+     * @returns {import('profile-conditions-ui').DescriptorInfo[]}
+     */
     getDescriptorTypes() {
         const results = [];
         for (const [name, {displayName}] of this._descriptors.entries()) {
@@ -150,6 +181,10 @@ export class ProfileConditionsUI extends EventDispatcher {
         return results;
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @returns {import('profile-conditions-ui').OperatorInfo[]}
+     */
     getDescriptorOperators(type) {
         const info = this._descriptors.get(type);
         const results = [];
@@ -161,15 +196,27 @@ export class ProfileConditionsUI extends EventDispatcher {
         return results;
     }
 
+    /**
+     * @returns {import('profile-conditions-ui').DescriptorType}
+     */
     getDefaultType() {
         return this._defaultType;
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @returns {string}
+     */
     getDefaultOperator(type) {
         const info = this._descriptors.get(type);
         return (typeof info !== 'undefined' ? info.defaultOperator : '');
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @param {string} operator
+     * @returns {import('profile-conditions-ui').Operator}
+     */
     getOperatorDetails(type, operator) {
         const info = this._getOperatorDetails(type, operator);
 
@@ -192,6 +239,9 @@ export class ProfileConditionsUI extends EventDispatcher {
         };
     }
 
+    /**
+     * @returns {import('settings').ProfileCondition}
+     */
     getDefaultCondition() {
         const type = this.getDefaultType();
         const operator = this.getDefaultOperator(type);
@@ -199,6 +249,10 @@ export class ProfileConditionsUI extends EventDispatcher {
         return {type, operator, value};
     }
 
+    /**
+     * @param {ProfileConditionGroupUI} child
+     * @returns {boolean}
+     */
     removeConditionGroup(child) {
         const index = child.index;
         if (index < 0 || index >= this._children.length) { return false; }
@@ -226,22 +280,53 @@ export class ProfileConditionsUI extends EventDispatcher {
         return true;
     }
 
+    /**
+     * @param {string} value
+     * @returns {string[]}
+     */
     splitValue(value) {
         return value.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
     }
 
+    /**
+     * @param {string} property
+     * @returns {string}
+     */
     getPath(property) {
         property = (typeof property === 'string' ? `.${property}` : '');
         return `profiles[${this.profileIndex}]${property}`;
     }
 
+    /**
+     * @param {HTMLInputElement} inputNode
+     * @param {?HTMLButtonElement} mouseButton
+     * @returns {KeyboardMouseInputField}
+     */
     createKeyboardMouseInputField(inputNode, mouseButton) {
         return new KeyboardMouseInputField(inputNode, mouseButton, this._os);
     }
 
+    /**
+     * @param {string} value
+     * @returns {?import('settings').ProfileConditionType}
+     */
+    static normalizeProfileConditionType(value) {
+        switch (value) {
+            case 'popupLevel':
+            case 'url':
+            case 'modifierKeys':
+            case 'flags':
+                return value;
+            default:
+                return null;
+        }
+    }
+
     // Private
 
+    /** */
     _onAddConditionGroupButtonClick() {
+        /** @type {import('settings').ProfileConditionGroup} */
         const conditionGroup = {
             conditions: [this.getDefaultCondition()]
         };
@@ -260,28 +345,50 @@ export class ProfileConditionsUI extends EventDispatcher {
         this._triggerConditionGroupCountChanged(this._children.length);
     }
 
+    /**
+     * @param {import('settings').ProfileConditionGroup} conditionGroup
+     * @param {number} index
+     * @returns {ProfileConditionGroupUI}
+     */
     _addConditionGroup(conditionGroup, index) {
         const child = new ProfileConditionGroupUI(this, index);
         child.prepare(conditionGroup);
         this._children.push(child);
-        this._conditionGroupsContainer.appendChild(child.node);
+        /** @type {HTMLElement} */ (this._conditionGroupsContainer).appendChild(child.node);
         return child;
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @param {string} operator
+     * @returns {import('profile-conditions-ui').OperatorInternal|undefined}
+     */
     _getOperatorDetails(type, operator) {
         const info = this._descriptors.get(type);
         return (typeof info !== 'undefined' ? info.operators.get(operator) : void 0);
     }
 
+    /**
+     * @param {string} value
+     * @returns {boolean}
+     */
     _validateInteger(value) {
         const number = Number.parseFloat(value);
         return Number.isFinite(number) && Math.floor(number) === number;
     }
 
+    /**
+     * @param {string} value
+     * @returns {boolean}
+     */
     _validateDomains(value) {
         return this.splitValue(value).length > 0;
     }
 
+    /**
+     * @param {string} value
+     * @returns {boolean}
+     */
     _validateRegExp(value) {
         try {
             new RegExp(value, 'i');
@@ -291,15 +398,27 @@ export class ProfileConditionsUI extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {string} value
+     * @returns {string}
+     */
     _normalizeInteger(value) {
         const number = Number.parseFloat(value);
         return `${number}`;
     }
 
+    /**
+     * @param {string} value
+     * @returns {string}
+     */
     _normalizeDomains(value) {
         return this.splitValue(value).join(', ');
     }
 
+    /**
+     * @param {string} value
+     * @returns {boolean}
+     */
     _validateFlags(value) {
         const flags = this.splitValue(value);
         for (const flag of flags) {
@@ -310,34 +429,57 @@ export class ProfileConditionsUI extends EventDispatcher {
         return flags.length > 0;
     }
 
+    /**
+     * @param {string} value
+     * @returns {string}
+     */
     _normalizeFlags(value) {
         return [...new Set(this.splitValue(value))].join(', ');
     }
 
+    /**
+     * @param {number} count
+     */
     _triggerConditionGroupCountChanged(count) {
-        this.trigger('conditionGroupCountChanged', {count, profileIndex: this._profileIndex});
+        /** @type {import('profile-conditions-ui').ConditionGroupCountChangedEvent} */
+        const event = {count, profileIndex: this._profileIndex};
+        this.trigger('conditionGroupCountChanged', event);
     }
 }
 
 class ProfileConditionGroupUI {
+    /**
+     * @param {ProfileConditionsUI} parent
+     * @param {number} index
+     */
     constructor(parent, index) {
+        /** @type {ProfileConditionsUI} */
         this._parent = parent;
+        /** @type {number} */
         this._index = index;
-        this._node = null;
-        this._conditionContainer = null;
-        this._addConditionButton = null;
+        /** @type {HTMLElement} */
+        this._node = /** @type {HTMLElement} */ (this._parent.instantiateTemplate('profile-condition-group'));
+        /** @type {HTMLElement} */
+        this._conditionContainer = /** @type {HTMLElement} */ (this._node.querySelector('.profile-condition-list'));
+        /** @type {HTMLElement} */
+        this._addConditionButton = /** @type {HTMLElement} */ (this._node.querySelector('.profile-condition-add-button'));
+        /** @type {ProfileConditionUI[]} */
         this._children = [];
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._parent.settingsController;
     }
 
+    /** @type {ProfileConditionsUI} */
     get parent() {
         return this._parent;
     }
 
+    /** @type {number} */
     get index() {
         return this._index;
     }
@@ -346,19 +488,20 @@ class ProfileConditionGroupUI {
         this._index = value;
     }
 
+    /** @type {HTMLElement} */
     get node() {
         return this._node;
     }
 
+    /** @type {number} */
     get childCount() {
         return this._children.length;
     }
 
+    /**
+     * @param {import('settings').ProfileConditionGroup} conditionGroup
+     */
     prepare(conditionGroup) {
-        this._node = this._parent.instantiateTemplate('profile-condition-group');
-        this._conditionContainer = this._node.querySelector('.profile-condition-list');
-        this._addConditionButton = this._node.querySelector('.profile-condition-add-button');
-
         const conditions = conditionGroup.conditions;
         for (let i = 0, ii = conditions.length; i < ii; ++i) {
             this._addCondition(conditions[i], i);
@@ -367,6 +510,7 @@ class ProfileConditionGroupUI {
         this._eventListeners.addEventListener(this._addConditionButton, 'click', this._onAddConditionButtonClick.bind(this), false);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
 
@@ -378,15 +522,15 @@ class ProfileConditionGroupUI {
         if (this._node === null) { return; }
 
         const node = this._node;
-        this._node = null;
-        this._conditionContainer = null;
-        this._addConditionButton = null;
-
         if (node.parentNode !== null) {
             node.parentNode.removeChild(node);
         }
     }
 
+    /**
+     * @param {ProfileConditionUI} child
+     * @returns {boolean}
+     */
     removeCondition(child) {
         const index = child.index;
         if (index < 0 || index >= this._children.length) { return false; }
@@ -416,17 +560,23 @@ class ProfileConditionGroupUI {
         return true;
     }
 
+    /**
+     * @param {string} property
+     * @returns {string}
+     */
     getPath(property) {
         property = (typeof property === 'string' ? `.${property}` : '');
         return this._parent.getPath(`conditionGroups[${this._index}]${property}`);
     }
 
+    /** */
     removeSelf() {
         this._parent.removeConditionGroup(this);
     }
 
     // Private
 
+    /** */
     _onAddConditionButtonClick() {
         const condition = this._parent.getDefaultCondition();
         const index = this._children.length;
@@ -442,41 +592,73 @@ class ProfileConditionGroupUI {
         }]);
     }
 
+    /**
+     * @param {import('settings').ProfileCondition} condition
+     * @param {number} index
+     * @returns {ProfileConditionUI}
+     */
     _addCondition(condition, index) {
         const child = new ProfileConditionUI(this, index);
         child.prepare(condition);
         this._children.push(child);
-        this._conditionContainer.appendChild(child.node);
+        if (this._conditionContainer !== null) {
+            this._conditionContainer.appendChild(child.node);
+        }
         return child;
     }
 }
 
 class ProfileConditionUI {
+    /**
+     * @param {ProfileConditionGroupUI} parent
+     * @param {number} index
+     */
     constructor(parent, index) {
+        /** @type {ProfileConditionGroupUI} */
         this._parent = parent;
+        /** @type {number} */
         this._index = index;
-        this._node = null;
-        this._typeInput = null;
-        this._operatorInput = null;
-        this._valueInputContainer = null;
-        this._removeButton = null;
-        this._mouseButton = null;
-        this._mouseButtonContainer = null;
-        this._menuButton = null;
+        /** @type {HTMLElement} */
+        this._node = this._parent.parent.instantiateTemplate('profile-condition');
+        /** @type {HTMLSelectElement} */
+        this._typeInput = /** @type {HTMLSelectElement} */ (this._node.querySelector('.profile-condition-type'));
+        /** @type {HTMLSelectElement} */
+        this._operatorInput = /** @type {HTMLSelectElement} */ (this._node.querySelector('.profile-condition-operator'));
+        /** @type {HTMLButtonElement} */
+        this._removeButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.profile-condition-remove'));
+        /** @type {HTMLButtonElement} */
+        this._mouseButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.mouse-button'));
+        /** @type {HTMLElement} */
+        this._mouseButtonContainer = /** @type {HTMLElement} */ (this._node.querySelector('.mouse-button-container'));
+        /** @type {HTMLButtonElement} */
+        this._menuButton = /** @type {HTMLButtonElement} */ (this._node.querySelector('.profile-condition-menu-button'));
+        /** @type {HTMLElement} */
+        this._typeOptionContainer = /** @type {HTMLElement} */ (this._typeInput.querySelector('optgroup'));
+        /** @type {HTMLElement} */
+        this._operatorOptionContainer = /** @type {HTMLElement} */ (this._operatorInput.querySelector('optgroup'));
+        /** @type {HTMLInputElement} */
+        this._valueInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.profile-condition-input'));
+        /** @type {string} */
         this._value = '';
+        /** @type {?KeyboardMouseInputField} */
         this._kbmInputField = null;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {EventListenerCollection} */
         this._inputEventListeners = new EventListenerCollection();
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._parent.parent.settingsController;
     }
 
+    /** @type {ProfileConditionGroupUI} */
     get parent() {
         return this._parent;
     }
 
+    /** @type {number} */
     get index() {
         return this._index;
     }
@@ -485,24 +667,17 @@ class ProfileConditionUI {
         this._index = value;
     }
 
+    /** @type {HTMLElement} */
     get node() {
         return this._node;
     }
 
+    /**
+     * @param {import('settings').ProfileCondition} condition
+     */
     prepare(condition) {
         const {type, operator, value} = condition;
 
-        this._node = this._parent.parent.instantiateTemplate('profile-condition');
-        this._typeInput = this._node.querySelector('.profile-condition-type');
-        this._typeOptionContainer = this._typeInput.querySelector('optgroup');
-        this._operatorInput = this._node.querySelector('.profile-condition-operator');
-        this._operatorOptionContainer = this._operatorInput.querySelector('optgroup');
-        this._valueInput = this._node.querySelector('.profile-condition-input');
-        this._removeButton = this._node.querySelector('.profile-condition-remove');
-        this._mouseButton = this._node.querySelector('.mouse-button');
-        this._mouseButtonContainer = this._node.querySelector('.mouse-button-container');
-        this._menuButton = this._node.querySelector('.profile-condition-menu-button');
-
         const operatorDetails = this._getOperatorDetails(type, operator);
         this._updateTypes(type);
         this._updateOperators(type, operator);
@@ -517,6 +692,7 @@ class ProfileConditionUI {
         }
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         this._value = '';
@@ -524,17 +700,15 @@ class ProfileConditionUI {
         if (this._node === null) { return; }
 
         const node = this._node;
-        this._node = null;
-        this._typeInput = null;
-        this._operatorInput = null;
-        this._valueInputContainer = null;
-        this._removeButton = null;
-
         if (node.parentNode !== null) {
             node.parentNode.removeChild(node);
         }
     }
 
+    /**
+     * @param {string} property
+     * @returns {string}
+     */
     getPath(property) {
         property = (typeof property === 'string' ? `.${property}` : '');
         return this._parent.getPath(`conditions[${this._index}]${property}`);
@@ -542,19 +716,33 @@ class ProfileConditionUI {
 
     // Private
 
+    /**
+     * @param {Event} e
+     */
     _onTypeChange(e) {
-        const type = e.currentTarget.value;
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const type = ProfileConditionsUI.normalizeProfileConditionType(element.value);
+        if (type === null) { return; }
         this._setType(type);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onOperatorChange(e) {
-        const type = this._typeInput.value;
-        const operator = e.currentTarget.value;
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const type = ProfileConditionsUI.normalizeProfileConditionType(this._typeInput.value);
+        if (type === null) { return; }
+        const operator = element.value;
         this._setOperator(type, operator);
     }
 
+    /**
+     * @param {import('profile-conditions-ui').InputData} details
+     * @param {Event} e
+     */
     _onValueInputChange({validate, normalize}, e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         const value = node.value;
         const okay = this._validateValue(value, validate);
         this._value = value;
@@ -565,8 +753,12 @@ class ProfileConditionUI {
         }
     }
 
-    _onModifierInputChange({validate, normalize}, {modifiers}) {
-        modifiers = this._joinModifiers(modifiers);
+    /**
+     * @param {import('profile-conditions-ui').InputData} details
+     * @param {import('keyboard-mouse-input-field').ChangeEvent} event
+     */
+    _onModifierInputChange({validate, normalize}, event) {
+        const modifiers = this._joinModifiers(event.modifiers);
         const okay = this._validateValue(modifiers, validate);
         this._value = modifiers;
         if (okay) {
@@ -575,18 +767,25 @@ class ProfileConditionUI {
         }
     }
 
+    /** */
     _onRemoveButtonClick() {
         this._removeSelf();
     }
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const bodyNode = e.detail.menu.bodyNode;
-        const deleteGroup = bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
+        const deleteGroup = /** @type {HTMLElement} */ (bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]'));
         if (deleteGroup !== null) {
             deleteGroup.hidden = (this._parent.childCount <= 1);
         }
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'delete':
@@ -601,28 +800,53 @@ class ProfileConditionUI {
         }
     }
 
+    /**
+     * @returns {import('profile-conditions-ui').DescriptorInfo[]}
+     */
     _getDescriptorTypes() {
         return this._parent.parent.getDescriptorTypes();
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @returns {import('profile-conditions-ui').OperatorInfo[]}
+     */
     _getDescriptorOperators(type) {
         return this._parent.parent.getDescriptorOperators(type);
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @param {string} operator
+     * @returns {import('profile-conditions-ui').Operator}
+     */
     _getOperatorDetails(type, operator) {
         return this._parent.parent.getOperatorDetails(type, operator);
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     */
     _updateTypes(type) {
         const types = this._getDescriptorTypes();
         this._updateSelect(this._typeInput, this._typeOptionContainer, types, type);
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @param {string} operator
+     */
     _updateOperators(type, operator) {
         const operators = this._getDescriptorOperators(type);
         this._updateSelect(this._operatorInput, this._operatorOptionContainer, operators, operator);
     }
 
+    /**
+     * @param {HTMLSelectElement} select
+     * @param {HTMLElement} optionContainer
+     * @param {import('profile-conditions-ui').DescriptorInfo[]|import('profile-conditions-ui').OperatorInfo[]} values
+     * @param {string} value
+     */
     _updateSelect(select, optionContainer, values, value) {
         optionContainer.textContent = '';
         for (const {name, displayName} of values) {
@@ -634,6 +858,11 @@ class ProfileConditionUI {
         select.value = value;
     }
 
+    /**
+     * @param {string} value
+     * @param {import('profile-conditions-ui').Operator} operator
+     * @returns {boolean}
+     */
     _updateValueInput(value, {type, validate, normalize}) {
         this._inputEventListeners.removeAllEventListeners();
         if (this._kbmInputField !== null) {
@@ -642,10 +871,15 @@ class ProfileConditionUI {
         }
 
         let inputType = 'text';
+        /** @type {?string} */
         let inputValue = value;
         let inputStep = null;
         let showMouseButton = false;
-        const events = [];
+        /** @type {import('event-listener-collection').AddEventListenerArgs[]} */
+        const events1 = [];
+        /** @type {import('event-listener-collection').OnArgs[]} */
+        const events2 = [];
+        /** @type {import('profile-conditions-ui').InputData} */
         const inputData = {validate, normalize};
         const node = this._valueInput;
 
@@ -653,7 +887,7 @@ class ProfileConditionUI {
             case 'integer':
                 inputType = 'number';
                 inputStep = '1';
-                events.push(['addEventListener', node, 'change', this._onValueInputChange.bind(this, inputData), false]);
+                events1.push([node, 'change', this._onValueInputChange.bind(this, inputData), false]);
                 break;
             case 'modifierKeys':
             case 'modifierInputs':
@@ -661,10 +895,10 @@ class ProfileConditionUI {
                 showMouseButton = (type === 'modifierInputs');
                 this._kbmInputField = this._parent.parent.createKeyboardMouseInputField(node, this._mouseButton);
                 this._kbmInputField.prepare(null, this._splitModifiers(value), showMouseButton, false);
-                events.push(['on', this._kbmInputField, 'change', this._onModifierInputChange.bind(this, inputData), false]);
+                events2.push([this._kbmInputField, 'change', this._onModifierInputChange.bind(this, inputData)]);
                 break;
             default: // 'string'
-                events.push(['addEventListener', node, 'change', this._onValueInputChange.bind(this, inputData), false]);
+                events1.push([node, 'change', this._onValueInputChange.bind(this, inputData), false]);
                 break;
         }
 
@@ -680,35 +914,67 @@ class ProfileConditionUI {
             node.removeAttribute('step');
         }
         this._mouseButtonContainer.hidden = !showMouseButton;
-        for (const args of events) {
-            this._inputEventListeners.addGeneric(...args);
+        for (const args of events1) {
+            this._inputEventListeners.addEventListener(...args);
+        }
+        for (const args of events2) {
+            this._inputEventListeners.on(...args);
         }
 
-        this._validateValue(value, validate);
+        return this._validateValue(value, validate);
     }
 
+    /**
+     * @param {string} value
+     * @param {?import('profile-conditions-ui').ValidateFunction} validate
+     * @returns {boolean}
+     */
     _validateValue(value, validate) {
         const okay = (validate === null || validate(value));
         this._valueInput.dataset.invalid = `${!okay}`;
         return okay;
     }
 
+    /**
+     * @param {string} value
+     * @param {?import('profile-conditions-ui').NormalizeFunction} normalize
+     * @returns {value}
+     */
     _normalizeValue(value, normalize) {
         return (normalize !== null ? normalize(value) : value);
     }
 
+    /** */
     _removeSelf() {
         this._parent.removeCondition(this);
     }
 
+    /**
+     * @param {string} modifiersString
+     * @returns {import('input').Modifier[]}
+     */
     _splitModifiers(modifiersString) {
-        return modifiersString.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
+        /** @type {import('input').Modifier[]} */
+        const results = [];
+        for (const item of modifiersString.split(/[,;\s]+/)) {
+            const modifier = DocumentUtil.normalizeModifier(item.trim().toLowerCase());
+            if (modifier !== null) { results.push(modifier); }
+        }
+        return results;
     }
 
+    /**
+     * @param {import('input').Modifier[]} modifiersArray
+     * @returns {string}
+     */
     _joinModifiers(modifiersArray) {
         return modifiersArray.join(', ');
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @param {string} [operator]
+     */
     async _setType(type, operator) {
         const operators = this._getDescriptorOperators(type);
         if (typeof operator === 'undefined') {
@@ -725,8 +991,13 @@ class ProfileConditionUI {
         ]);
     }
 
+    /**
+     * @param {import('profile-conditions-ui').DescriptorType} type
+     * @param {string} operator
+     */
     async _setOperator(type, operator) {
         const operatorDetails = this._getOperatorDetails(type, operator);
+        /** @type {import('settings-modifications').Modification[]} */
         const settingsModifications = [{action: 'set', path: this.getPath('operator'), value: operator}];
         if (operatorDetails.resetDefaultOnChange) {
             const {defaultValue} = operatorDetails;
@@ -738,8 +1009,10 @@ class ProfileConditionUI {
         await this.settingsController.modifyGlobalSettings(settingsModifications);
     }
 
+    /** */
     async _resetValue() {
-        const type = this._typeInput.value;
+        const type = ProfileConditionsUI.normalizeProfileConditionType(this._typeInput.value);
+        if (type === null) { return; }
         const operator = this._operatorInput.value;
         await this._setType(type, operator);
     }
diff --git a/ext/js/pages/settings/profile-controller.js b/ext/js/pages/settings/profile-controller.js
index a5bf41b3..c82223b8 100644
--- a/ext/js/pages/settings/profile-controller.js
+++ b/ext/js/pages/settings/profile-controller.js
@@ -21,50 +21,77 @@ import {yomitan} from '../../yomitan.js';
 import {ProfileConditionsUI} from './profile-conditions-ui.js';
 
 export class ProfileController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('./modal-controller.js').ModalController} modalController
+     */
     constructor(settingsController, modalController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {ProfileConditionsUI} */
         this._profileConditionsUI = new ProfileConditionsUI(settingsController);
+        /** @type {?number} */
         this._profileConditionsIndex = null;
+        /** @type {?HTMLSelectElement} */
         this._profileActiveSelect = null;
+        /** @type {?HTMLSelectElement} */
         this._profileTargetSelect = null;
+        /** @type {?HTMLSelectElement} */
         this._profileCopySourceSelect = null;
+        /** @type {?HTMLElement} */
         this._removeProfileNameElement = null;
+        /** @type {?HTMLButtonElement} */
         this._profileAddButton = null;
+        /** @type {?HTMLButtonElement} */
         this._profileRemoveConfirmButton = null;
+        /** @type {?HTMLButtonElement} */
         this._profileCopyConfirmButton = null;
+        /** @type {?HTMLElement} */
         this._profileEntryListContainer = null;
+        /** @type {?HTMLElement} */
         this._profileConditionsProfileName = null;
+        /** @type {?import('./modal.js').Modal} */
         this._profileRemoveModal = null;
+        /** @type {?import('./modal.js').Modal} */
         this._profileCopyModal = null;
+        /** @type {?import('./modal.js').Modal} */
         this._profileConditionsModal = null;
+        /** @type {boolean} */
         this._profileEntriesSupported = false;
+        /** @type {ProfileEntry[]} */
         this._profileEntryList = [];
+        /** @type {import('settings').Profile[]} */
         this._profiles = [];
+        /** @type {number} */
         this._profileCurrent = 0;
     }
 
+    /** @type {number} */
     get profileCount() {
         return this._profiles.length;
     }
 
+    /** @type {number} */
     get profileCurrentIndex() {
         return this._profileCurrent;
     }
 
+    /** */
     async prepare() {
         const {platform: {os}} = await yomitan.api.getEnvironmentInfo();
         this._profileConditionsUI.os = os;
 
-        this._profileActiveSelect = document.querySelector('#profile-active-select');
-        this._profileTargetSelect = document.querySelector('#profile-target-select');
-        this._profileCopySourceSelect = document.querySelector('#profile-copy-source-select');
-        this._removeProfileNameElement = document.querySelector('#profile-remove-name');
-        this._profileAddButton = document.querySelector('#profile-add-button');
-        this._profileRemoveConfirmButton = document.querySelector('#profile-remove-confirm-button');
-        this._profileCopyConfirmButton = document.querySelector('#profile-copy-confirm-button');
-        this._profileEntryListContainer = document.querySelector('#profile-entry-list');
-        this._profileConditionsProfileName = document.querySelector('#profile-conditions-profile-name');
+        this._profileActiveSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-active-select'));
+        this._profileTargetSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-target-select'));
+        this._profileCopySourceSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#profile-copy-source-select'));
+        this._removeProfileNameElement = /** @type {HTMLElement} */ (document.querySelector('#profile-remove-name'));
+        this._profileAddButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-add-button'));
+        this._profileRemoveConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-remove-confirm-button'));
+        this._profileCopyConfirmButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-copy-confirm-button'));
+        this._profileEntryListContainer = /** @type {HTMLElement} */ (document.querySelector('#profile-entry-list'));
+        this._profileConditionsProfileName = /** @type {HTMLElement} */ (document.querySelector('#profile-conditions-profile-name'));
         this._profileRemoveModal = this._modalController.getModal('profile-remove');
         this._profileCopyModal = this._modalController.getModal('profile-copy');
         this._profileConditionsModal = this._modalController.getModal('profile-conditions');
@@ -82,6 +109,10 @@ export class ProfileController {
         this._onOptionsChanged();
     }
 
+    /**
+     * @param {number} profileIndex
+     * @param {number} offset
+     */
     async moveProfile(profileIndex, offset) {
         if (this._getProfile(profileIndex) === null) { return; }
 
@@ -91,6 +122,10 @@ export class ProfileController {
         await this.swapProfiles(profileIndex, profileIndexNew);
     }
 
+    /**
+     * @param {number} profileIndex
+     * @param {string} value
+     */
     async setProfileName(profileIndex, value) {
         const profile = this._getProfile(profileIndex);
         if (profile === null) { return; }
@@ -104,11 +139,14 @@ export class ProfileController {
         await this._settingsController.setGlobalSetting(`profiles[${profileIndex}].name`, value);
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     async setDefaultProfile(profileIndex) {
         const profile = this._getProfile(profileIndex);
         if (profile === null) { return; }
 
-        this._profileActiveSelect.value = `${profileIndex}`;
+        /** @type {HTMLSelectElement} */ (this._profileActiveSelect).value = `${profileIndex}`;
         this._profileCurrent = profileIndex;
 
         const profileEntry = this._getProfileEntry(profileIndex);
@@ -117,6 +155,10 @@ export class ProfileController {
         await this._settingsController.setGlobalSetting('profileCurrent', profileIndex);
     }
 
+    /**
+     * @param {number} sourceProfileIndex
+     * @param {number} destinationProfileIndex
+     */
     async copyProfile(sourceProfileIndex, destinationProfileIndex) {
         const sourceProfile = this._getProfile(sourceProfileIndex);
         if (sourceProfile === null || !this._getProfile(destinationProfileIndex)) { return; }
@@ -140,9 +182,12 @@ export class ProfileController {
         await this._settingsController.refresh();
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     async duplicateProfile(profileIndex) {
         const profile = this._getProfile(profileIndex);
-        if (this.profile === null) { return; }
+        if (profile === null) { return; }
 
         // Create new profile
         const newProfile = clone(profile);
@@ -169,6 +214,9 @@ export class ProfileController {
         this._settingsController.profileIndex = index;
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     async deleteProfile(profileIndex) {
         const profile = this._getProfile(profileIndex);
         if (profile === null || this.profileCount <= 1) { return; }
@@ -178,6 +226,7 @@ export class ProfileController {
         const settingsProfileIndex = this._settingsController.profileIndex;
 
         // Construct settings modifications
+        /** @type {import('settings-modifications').Modification[]} */
         const modifications = [{
             action: 'splice',
             path: 'profiles',
@@ -225,6 +274,10 @@ export class ProfileController {
         await this._settingsController.modifyGlobalSettings(modifications);
     }
 
+    /**
+     * @param {number} index1
+     * @param {number} index2
+     */
     async swapProfiles(index1, index2) {
         const profile1 = this._getProfile(index1);
         const profile2 = this._getProfile(index2);
@@ -238,6 +291,7 @@ export class ProfileController {
         const settingsProfileIndexNew = this._getSwappedValue(settingsProfileIndex, index1, index2);
 
         // Construct settings modifications
+        /** @type {import('settings-modifications').Modification[]} */
         const modifications = [{
             action: 'swap',
             path1: `profiles[${index1}]`,
@@ -278,15 +332,21 @@ export class ProfileController {
         }
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     openDeleteProfileModal(profileIndex) {
         const profile = this._getProfile(profileIndex);
         if (profile === null || this.profileCount <= 1) { return; }
 
-        this._removeProfileNameElement.textContent = profile.name;
-        this._profileRemoveModal.node.dataset.profileIndex = `${profileIndex}`;
-        this._profileRemoveModal.setVisible(true);
+        /** @type {HTMLElement} */ (this._removeProfileNameElement).textContent = profile.name;
+        /** @type {import('./modal.js').Modal} */ (this._profileRemoveModal).node.dataset.profileIndex = `${profileIndex}`;
+        /** @type {import('./modal.js').Modal} */ (this._profileRemoveModal).setVisible(true);
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     openCopyProfileModal(profileIndex) {
         const profile = this._getProfile(profileIndex);
         if (profile === null || this.profileCount <= 1) { return; }
@@ -301,16 +361,20 @@ export class ProfileController {
         }
 
         const profileIndexString = `${profileIndex}`;
-        for (const option of this._profileCopySourceSelect.querySelectorAll('option')) {
+        const select = /** @type {HTMLSelectElement} */ (this._profileCopySourceSelect);
+        for (const option of select.querySelectorAll('option')) {
             const {value} = option;
             option.disabled = (value === profileIndexString);
         }
-        this._profileCopySourceSelect.value = `${copyFromIndex}`;
+        select.value = `${copyFromIndex}`;
 
-        this._profileCopyModal.node.dataset.profileIndex = `${profileIndex}`;
-        this._profileCopyModal.setVisible(true);
+        /** @type {import('./modal.js').Modal} */ (this._profileCopyModal).node.dataset.profileIndex = `${profileIndex}`;
+        /** @type {import('./modal.js').Modal} */ (this._profileCopyModal).setVisible(true);
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     openProfileConditionsModal(profileIndex) {
         const profile = this._getProfile(profileIndex);
         if (profile === null) { return; }
@@ -328,6 +392,7 @@ export class ProfileController {
 
     // Private
 
+    /** */
     async _onOptionsChanged() {
         // Update state
         const {profiles, profileCurrent} = await this._settingsController.getOptionsFull();
@@ -339,8 +404,8 @@ export class ProfileController {
         // Udpate UI
         this._updateProfileSelectOptions();
 
-        this._profileActiveSelect.value = `${profileCurrent}`;
-        this._profileTargetSelect.value = `${settingsProfileIndex}`;
+        /** @type {HTMLSelectElement} */ (this._profileActiveSelect).value = `${profileCurrent}`;
+        /** @type {HTMLSelectElement} */ (this._profileTargetSelect).value = `${settingsProfileIndex}`;
 
         // Update profile conditions
         this._profileConditionsUI.cleanup();
@@ -361,51 +426,65 @@ export class ProfileController {
         }
     }
 
+    /**
+     * @param {Event} e
+     */
     _onProfileActiveChange(e) {
-        const value = this._tryGetValidProfileIndex(e.currentTarget.value);
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const value = this._tryGetValidProfileIndex(element.value);
         if (value === null) { return; }
         this.setDefaultProfile(value);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onProfileTargetChange(e) {
-        const value = this._tryGetValidProfileIndex(e.currentTarget.value);
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const value = this._tryGetValidProfileIndex(element.value);
         if (value === null) { return; }
         this._settingsController.profileIndex = value;
     }
 
+    /** */
     _onAdd() {
         this.duplicateProfile(this._settingsController.profileIndex);
     }
 
+    /** */
     _onDeleteConfirm() {
-        const modal = this._profileRemoveModal;
+        const modal = /** @type {import('./modal.js').Modal} */ (this._profileRemoveModal);
         modal.setVisible(false);
         const {node} = modal;
-        let profileIndex = node.dataset.profileIndex;
+        const profileIndex = node.dataset.profileIndex;
         delete node.dataset.profileIndex;
 
-        profileIndex = this._tryGetValidProfileIndex(profileIndex);
-        if (profileIndex === null) { return; }
+        const validProfileIndex = this._tryGetValidProfileIndex(profileIndex);
+        if (validProfileIndex === null) { return; }
 
-        this.deleteProfile(profileIndex);
+        this.deleteProfile(validProfileIndex);
     }
 
+    /** */
     _onCopyConfirm() {
-        const modal = this._profileCopyModal;
+        const modal = /** @type {import('./modal.js').Modal} */ (this._profileCopyModal);
         modal.setVisible(false);
         const {node} = modal;
-        let destinationProfileIndex = node.dataset.profileIndex;
+        const destinationProfileIndex = node.dataset.profileIndex;
         delete node.dataset.profileIndex;
 
-        destinationProfileIndex = this._tryGetValidProfileIndex(destinationProfileIndex);
-        if (destinationProfileIndex === null) { return; }
+        const validDestinationProfileIndex = this._tryGetValidProfileIndex(destinationProfileIndex);
+        if (validDestinationProfileIndex === null) { return; }
 
-        const sourceProfileIndex = this._tryGetValidProfileIndex(this._profileCopySourceSelect.value);
+        const sourceProfileIndex = this._tryGetValidProfileIndex(/** @type {HTMLSelectElement} */ (this._profileCopySourceSelect).value);
         if (sourceProfileIndex === null) { return; }
 
-        this.copyProfile(sourceProfileIndex, destinationProfileIndex);
+        this.copyProfile(sourceProfileIndex, validDestinationProfileIndex);
     }
 
+    /**
+     * @param {import('profile-conditions-ui').ConditionGroupCountChangedEvent} details
+     */
     _onConditionGroupCountChanged({count, profileIndex}) {
         if (profileIndex >= 0 && profileIndex < this._profileEntryList.length) {
             const profileEntry = this._profileEntryList[profileIndex];
@@ -413,15 +492,19 @@ export class ProfileController {
         }
     }
 
+    /**
+     * @param {number} profileIndex
+     */
     _addProfileEntry(profileIndex) {
         const profile = this._profiles[profileIndex];
-        const node = this._settingsController.instantiateTemplate('profile-entry');
-        const entry = new ProfileEntry(this, node);
+        const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('profile-entry'));
+        const entry = new ProfileEntry(this, node, profile, profileIndex);
         this._profileEntryList.push(entry);
-        entry.prepare(profile, profileIndex);
-        this._profileEntryListContainer.appendChild(node);
+        entry.prepare();
+        /** @type {HTMLElement} */ (this._profileEntryListContainer).appendChild(node);
     }
 
+    /** */
     _updateProfileSelectOptions() {
         for (const select of this._getAllProfileSelects()) {
             const fragment = document.createDocumentFragment();
@@ -437,6 +520,10 @@ export class ProfileController {
         }
     }
 
+    /**
+     * @param {number} index
+     * @param {string} name
+     */
     _updateSelectName(index, name) {
         const optionValue = `${index}`;
         for (const select of this._getAllProfileSelects()) {
@@ -448,14 +535,21 @@ export class ProfileController {
         }
     }
 
+    /**
+     * @returns {HTMLSelectElement[]}
+     */
     _getAllProfileSelects() {
         return [
-            this._profileActiveSelect,
-            this._profileTargetSelect,
-            this._profileCopySourceSelect
+            /** @type {HTMLSelectElement} */ (this._profileActiveSelect),
+            /** @type {HTMLSelectElement} */ (this._profileTargetSelect),
+            /** @type {HTMLSelectElement} */ (this._profileCopySourceSelect)
         ];
     }
 
+    /**
+     * @param {string|undefined} stringValue
+     * @returns {?number}
+     */
     _tryGetValidProfileIndex(stringValue) {
         if (typeof stringValue !== 'string') { return null; }
         const intValue = parseInt(stringValue, 10);
@@ -467,6 +561,12 @@ export class ProfileController {
         );
     }
 
+    /**
+     * @param {string} name
+     * @param {import('settings').Profile[]} profiles
+     * @param {number} maxUniqueAttempts
+     * @returns {string}
+     */
     _createCopyName(name, profiles, maxUniqueAttempts) {
         let space, index, prefix, suffix;
         const match = /^([\w\W]*\(Copy)((\s+)(\d+))?(\)\s*)$/.exec(name);
@@ -502,44 +602,80 @@ export class ProfileController {
         }
     }
 
+    /**
+     * @template T
+     * @param {T} currentValue
+     * @param {T} value1
+     * @param {T} value2
+     * @returns {T}
+     */
     _getSwappedValue(currentValue, value1, value2) {
         if (currentValue === value1) { return value2; }
         if (currentValue === value2) { return value1; }
         return currentValue;
     }
 
+    /**
+     * @param {number} profileIndex
+     * @returns {?import('settings').Profile}
+     */
     _getProfile(profileIndex) {
         return (profileIndex >= 0 && profileIndex < this._profiles.length ? this._profiles[profileIndex] : null);
     }
 
+    /**
+     * @param {number} profileIndex
+     * @returns {?ProfileEntry}
+     */
     _getProfileEntry(profileIndex) {
         return (profileIndex >= 0 && profileIndex < this._profileEntryList.length ? this._profileEntryList[profileIndex] : null);
     }
 
+    /**
+     * @param {Element} node1
+     * @param {Element} node2
+     */
     _swapDomNodes(node1, node2) {
         const parent1 = node1.parentNode;
         const parent2 = node2.parentNode;
         const next1 = node1.nextSibling;
         const next2 = node2.nextSibling;
-        if (node2 !== next1) { parent1.insertBefore(node2, next1); }
-        if (node1 !== next2) { parent2.insertBefore(node1, next2); }
+        if (node2 !== next1 && parent1 !== null) { parent1.insertBefore(node2, next1); }
+        if (node1 !== next2 && parent2 !== null) { parent2.insertBefore(node1, next2); }
     }
 }
 
 class ProfileEntry {
-    constructor(profileController, node) {
+    /**
+     * @param {ProfileController} profileController
+     * @param {HTMLElement} node
+     * @param {import('settings').Profile} profile
+     * @param {number} index
+     */
+    constructor(profileController, node, profile, index) {
+        /** @type {ProfileController} */
         this._profileController = profileController;
+        /** @type {HTMLElement} */
         this._node = node;
-        this._profile = null;
-        this._index = 0;
-        this._isDefaultRadio = null;
-        this._nameInput = null;
-        this._countLink = null;
-        this._countText = null;
-        this._menuButton = null;
+        /** @type {import('settings').Profile} */
+        this._profile = profile;
+        /** @type {number} */
+        this._index = index;
+        /** @type {HTMLInputElement} */
+        this._isDefaultRadio = /** @type {HTMLInputElement} */ (node.querySelector('.profile-entry-is-default-radio'));
+        /** @type {HTMLInputElement} */
+        this._nameInput = /** @type {HTMLInputElement} */ (node.querySelector('.profile-entry-name-input'));
+        /** @type {HTMLElement} */
+        this._countLink = /** @type {HTMLElement} */ (node.querySelector('.profile-entry-condition-count-link'));
+        /** @type {HTMLElement} */
+        this._countText = /** @type {HTMLElement} */ (node.querySelector('.profile-entry-condition-count'));
+        /** @type {HTMLButtonElement} */
+        this._menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.profile-entry-menu-button'));
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
     }
 
+    /** @type {number} */
     get index() {
         return this._index;
     }
@@ -548,21 +684,13 @@ class ProfileEntry {
         this._index = value;
     }
 
+    /** @type {HTMLElement} */
     get node() {
         return this._node;
     }
 
-    prepare(profile, index) {
-        this._profile = profile;
-        this._index = index;
-
-        const node = this._node;
-        this._isDefaultRadio = node.querySelector('.profile-entry-is-default-radio');
-        this._nameInput = node.querySelector('.profile-entry-name-input');
-        this._countLink = node.querySelector('.profile-entry-condition-count-link');
-        this._countText = node.querySelector('.profile-entry-condition-count');
-        this._menuButton = node.querySelector('.profile-entry-menu-button');
-
+    /** */
+    prepare() {
         this.updateState();
 
         this._eventListeners.addEventListener(this._isDefaultRadio, 'change', this._onIsDefaultRadioChange.bind(this), false);
@@ -572,6 +700,7 @@ class ProfileEntry {
         this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         if (this._node.parentNode !== null) {
@@ -579,41 +708,63 @@ class ProfileEntry {
         }
     }
 
+    /**
+     * @param {string} value
+     */
     setName(value) {
         if (this._nameInput.value === value) { return; }
         this._nameInput.value = value;
     }
 
+    /**
+     * @param {boolean} value
+     */
     setIsDefault(value) {
         this._isDefaultRadio.checked = value;
     }
 
+    /** */
     updateState() {
         this._nameInput.value = this._profile.name;
         this._countText.textContent = `${this._profile.conditionGroups.length}`;
         this._isDefaultRadio.checked = (this._index === this._profileController.profileCurrentIndex);
     }
 
+    /**
+     * @param {number} count
+     */
     setConditionGroupsCount(count) {
         this._countText.textContent = `${count}`;
     }
 
     // Private
 
+    /**
+     * @param {Event} e
+     */
     _onIsDefaultRadioChange(e) {
-        if (!e.currentTarget.checked) { return; }
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        if (!element.checked) { return; }
         this._profileController.setDefaultProfile(this._index);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onNameInputInput(e) {
-        const name = e.currentTarget.value;
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const name = element.value;
         this._profileController.setProfileName(this._index, name);
     }
 
+    /** */
     _onConditionsCountLinkClick() {
         this._profileController.openProfileConditionsModal(this._index);
     }
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const bodyNode = e.detail.menu.bodyNode;
         const count = this._profileController.profileCount;
@@ -623,6 +774,9 @@ class ProfileEntry {
         this._setMenuActionEnabled(bodyNode, 'delete', count > 1);
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'moveUp':
@@ -646,8 +800,13 @@ class ProfileEntry {
         }
     }
 
+    /**
+     * @param {Element} menu
+     * @param {string} action
+     * @param {boolean} enabled
+     */
     _setMenuActionEnabled(menu, action, enabled) {
-        const element = menu.querySelector(`[data-menu-action="${action}"]`);
+        const element = /** @type {HTMLButtonElement} */ (menu.querySelector(`[data-menu-action="${action}"]`));
         if (element === null) { return; }
         element.disabled = !enabled;
     }
diff --git a/ext/js/pages/settings/recommended-permissions-controller.js b/ext/js/pages/settings/recommended-permissions-controller.js
index e04dbdf7..b19311aa 100644
--- a/ext/js/pages/settings/recommended-permissions-controller.js
+++ b/ext/js/pages/settings/recommended-permissions-controller.js
@@ -19,13 +19,21 @@
 import {EventListenerCollection} from '../../core.js';
 
 export class RecommendedPermissionsController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?NodeListOf<HTMLInputElement>} */
         this._originToggleNodes = null;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?HTMLElement} */
         this._errorContainer = null;
     }
 
+    /** */
     async prepare() {
         this._originToggleNodes = document.querySelectorAll('.recommended-permissions-toggle');
         this._errorContainer = document.querySelector('#recommended-permissions-error');
@@ -39,35 +47,53 @@ export class RecommendedPermissionsController {
 
     // Private
 
+    /**
+     * @param {import('settings-controller').PermissionsChangedEvent} details
+     */
     _onPermissionsChanged({permissions}) {
         this._eventListeners.removeAllEventListeners();
         const originsSet = new Set(permissions.origins);
-        for (const node of this._originToggleNodes) {
-            node.checked = originsSet.has(node.dataset.origin);
+        if (this._originToggleNodes !== null) {
+            for (const node of this._originToggleNodes) {
+                const {origin} = node.dataset;
+                node.checked = typeof origin === 'string' && originsSet.has(origin);
+            }
         }
     }
 
+    /**
+     * @param {Event} e
+     */
     _onOriginToggleChange(e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         const value = node.checked;
         node.checked = !value;
 
         const {origin} = node.dataset;
+        if (typeof origin !== 'string') { return; }
         this._setOriginPermissionEnabled(origin, value);
     }
 
+    /** */
     async _updatePermissions() {
         const permissions = await this._settingsController.permissionsUtil.getAllPermissions();
         this._onPermissionsChanged({permissions});
     }
 
+    /**
+     * @param {string} origin
+     * @param {boolean} enabled
+     * @returns {Promise<boolean>}
+     */
     async _setOriginPermissionEnabled(origin, enabled) {
         let added = false;
         try {
             added = await this._settingsController.permissionsUtil.setPermissionsGranted({origins: [origin]}, enabled);
         } catch (e) {
-            this._errorContainer.hidden = false;
-            this._errorContainer.textContent = e.message;
+            if (this._errorContainer !== null) {
+                this._errorContainer.hidden = false;
+                this._errorContainer.textContent = e instanceof Error ? e.message : `${e}`;
+            }
         }
         if (!added) { return false; }
         await this._updatePermissions();
diff --git a/ext/js/pages/settings/scan-inputs-controller.js b/ext/js/pages/settings/scan-inputs-controller.js
index 252e7238..53423bdc 100644
--- a/ext/js/pages/settings/scan-inputs-controller.js
+++ b/ext/js/pages/settings/scan-inputs-controller.js
@@ -17,26 +17,37 @@
  */
 
 import {EventListenerCollection} from '../../core.js';
+import {DocumentUtil} from '../../dom/document-util.js';
 import {yomitan} from '../../yomitan.js';
 import {KeyboardMouseInputField} from './keyboard-mouse-input-field.js';
 
 export class ScanInputsController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?import('environment').OperatingSystem} */
         this._os = null;
+        /** @type {?HTMLElement} */
         this._container = null;
+        /** @type {?HTMLButtonElement} */
         this._addButton = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._scanningInputCountNodes = null;
+        /** @type {ScanInputField[]} */
         this._entries = [];
     }
 
+    /** */
     async prepare() {
         const {platform: {os}} = await yomitan.api.getEnvironmentInfo();
         this._os = os;
 
-        this._container = document.querySelector('#scan-input-list');
-        this._addButton = document.querySelector('#scan-input-add');
-        this._scanningInputCountNodes = document.querySelectorAll('.scanning-input-count');
+        this._container = /** @type {HTMLElement} */ (document.querySelector('#scan-input-list'));
+        this._addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#scan-input-add'));
+        this._scanningInputCountNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.scanning-input-count'));
 
         this._addButton.addEventListener('click', this._onAddButtonClick.bind(this), false);
         this._settingsController.on('scanInputsChanged', this._onScanInputsChanged.bind(this));
@@ -45,6 +56,10 @@ export class ScanInputsController {
         this.refresh();
     }
 
+    /**
+     * @param {number} index
+     * @returns {boolean}
+     */
     removeInput(index) {
         if (index < 0 || index >= this._entries.length) { return false; }
         const input = this._entries[index];
@@ -64,6 +79,12 @@ export class ScanInputsController {
         return true;
     }
 
+    /**
+     * @param {number} index
+     * @param {string} property
+     * @param {unknown} value
+     * @param {boolean} event
+     */
     async setProperty(index, property, value, event) {
         const path = `scanning.inputs[${index}].${property}`;
         await this._settingsController.setProfileSetting(path, value);
@@ -72,22 +93,34 @@ export class ScanInputsController {
         }
     }
 
+    /**
+     * @param {string} name
+     * @returns {Element}
+     */
     instantiateTemplate(name) {
         return this._settingsController.instantiateTemplate(name);
     }
 
+    /** */
     async refresh() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').ScanInputsChangedEvent} details
+     */
     _onScanInputsChanged({source}) {
         if (source === this) { return; }
         this.refresh();
     }
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         const {inputs} = options.scanning;
 
@@ -103,6 +136,9 @@ export class ScanInputsController {
         this._updateCounts();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onAddButtonClick(e) {
         e.preventDefault();
 
@@ -119,34 +155,51 @@ export class ScanInputsController {
         }]);
 
         // Scroll to bottom
-        const button = e.currentTarget;
-        const modalContainer = button.closest('.modal');
-        const scrollContainer = modalContainer.querySelector('.modal-body');
+        const button = /** @type {HTMLElement} */ (e.currentTarget);
+        const modalContainer = /** @type {HTMLElement} */ (button.closest('.modal'));
+        const scrollContainer = /** @type {HTMLElement} */ (modalContainer.querySelector('.modal-body'));
         scrollContainer.scrollTop = scrollContainer.scrollHeight;
     }
 
+    /**
+     * @param {number} index
+     * @param {import('settings').ScanningInput} scanningInput
+     */
     _addOption(index, scanningInput) {
+        if (this._os === null || this._container === null) { return; }
         const field = new ScanInputField(this, index, this._os);
         this._entries.push(field);
         field.prepare(this._container, scanningInput);
     }
 
+    /** */
     _updateCounts() {
         const stringValue = `${this._entries.length}`;
-        for (const node of this._scanningInputCountNodes) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._scanningInputCountNodes)) {
             node.textContent = stringValue;
         }
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     */
     async _modifyProfileSettings(targets) {
         await this._settingsController.modifyProfileSettings(targets);
         this._triggerScanInputsChanged();
     }
 
+    /** */
     _triggerScanInputsChanged() {
-        this._settingsController.trigger('scanInputsChanged', {source: this});
+        /** @type {import('settings-controller').ScanInputsChangedEvent} */
+        const event = {source: this};
+        this._settingsController.trigger('scanInputsChanged', event);
     }
 
+    /**
+     * @param {string} include
+     * @param {string} exclude
+     * @returns {import('settings').ScanningInput}
+     */
     static createDefaultMouseInput(include, exclude) {
         return {
             include,
@@ -172,16 +225,29 @@ export class ScanInputsController {
 }
 
 class ScanInputField {
+    /**
+     * @param {ScanInputsController} parent
+     * @param {number} index
+     * @param {import('environment').OperatingSystem} os
+     */
     constructor(parent, index, os) {
+        /** @type {ScanInputsController} */
         this._parent = parent;
+        /** @type {number} */
         this._index = index;
+        /** @type {import('environment').OperatingSystem} */
         this._os = os;
+        /** @type {?HTMLElement} */
         this._node = null;
+        /** @type {?KeyboardMouseInputField} */
         this._includeInputField = null;
+        /** @type {?KeyboardMouseInputField} */
         this._excludeInputField = null;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
     }
 
+    /** @type {number} */
     get index() {
         return this._index;
     }
@@ -191,16 +257,20 @@ class ScanInputField {
         this._updateDataSettingTargets();
     }
 
+    /**
+     * @param {HTMLElement} container
+     * @param {import('settings').ScanningInput} scanningInput
+     */
     prepare(container, scanningInput) {
         const {include, exclude, options: {showAdvanced}} = scanningInput;
 
-        const node = this._parent.instantiateTemplate('scan-input');
-        const includeInputNode = node.querySelector('.scan-input-field[data-property=include]');
-        const includeMouseButton = node.querySelector('.mouse-button[data-property=include]');
-        const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]');
-        const excludeMouseButton = node.querySelector('.mouse-button[data-property=exclude]');
-        const removeButton = node.querySelector('.scan-input-remove');
-        const menuButton = node.querySelector('.scanning-input-menu-button');
+        const node = /** @type {HTMLElement} */ (this._parent.instantiateTemplate('scan-input'));
+        const includeInputNode = /** @type {HTMLInputElement} */ (node.querySelector('.scan-input-field[data-property=include]'));
+        const includeMouseButton = /** @type {HTMLButtonElement} */ (node.querySelector('.mouse-button[data-property=include]'));
+        const excludeInputNode = /** @type {HTMLInputElement} */ (node.querySelector('.scan-input-field[data-property=exclude]'));
+        const excludeMouseButton = /** @type {HTMLButtonElement} */ (node.querySelector('.mouse-button[data-property=exclude]'));
+        const removeButton = /** @type {HTMLButtonElement} */ (node.querySelector('.scan-input-remove'));
+        const menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.scanning-input-menu-button'));
 
         node.dataset.showAdvanced = `${showAdvanced}`;
 
@@ -226,6 +296,7 @@ class ScanInputField {
         this._updateDataSettingTargets();
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         if (this._includeInputField !== null) {
@@ -241,26 +312,38 @@ class ScanInputField {
 
     // Private
 
+    /**
+     * @param {import('keyboard-mouse-input-field').ChangeEvent} details
+     */
     _onIncludeValueChange({modifiers}) {
-        modifiers = this._joinModifiers(modifiers);
-        this._parent.setProperty(this._index, 'include', modifiers, true);
+        const modifiers2 = this._joinModifiers(modifiers);
+        this._parent.setProperty(this._index, 'include', modifiers2, true);
     }
 
+    /**
+     * @param {import('keyboard-mouse-input-field').ChangeEvent} details
+     */
     _onExcludeValueChange({modifiers}) {
-        modifiers = this._joinModifiers(modifiers);
-        this._parent.setProperty(this._index, 'exclude', modifiers, true);
+        const modifiers2 = this._joinModifiers(modifiers);
+        this._parent.setProperty(this._index, 'exclude', modifiers2, true);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onRemoveClick(e) {
         e.preventDefault();
         this._removeSelf();
     }
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const bodyNode = e.detail.menu.bodyNode;
-        const showAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]');
-        const hideAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]');
-        const advancedVisible = (this._node.dataset.showAdvanced === 'true');
+        const showAdvanced = /** @type {?HTMLElement} */ (bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]'));
+        const hideAdvanced = /** @type {?HTMLElement} */ (bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]'));
+        const advancedVisible = (this._node !== null && this._node.dataset.showAdvanced === 'true');
         if (showAdvanced !== null) {
             showAdvanced.hidden = advancedVisible;
         }
@@ -269,6 +352,9 @@ class ScanInputField {
         }
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'remove':
@@ -281,40 +367,67 @@ class ScanInputField {
                 this._setAdvancedOptionsVisible(false);
                 break;
             case 'clearInputs':
-                this._includeInputField.clearInputs();
-                this._excludeInputField.clearInputs();
+                /** @type {KeyboardMouseInputField} */ (this._includeInputField).clearInputs();
+                /** @type {KeyboardMouseInputField} */ (this._excludeInputField).clearInputs();
                 break;
         }
     }
 
+    /**
+     * @param {string} pointerType
+     * @returns {boolean}
+     */
     _isPointerTypeSupported(pointerType) {
         if (this._node === null) { return false; }
-        const node = this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`);
+        const node = /** @type {?HTMLInputElement} */ (this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`));
         return node !== null && node.checked;
     }
 
+    /** */
     _updateDataSettingTargets() {
+        if (this._node === null) { return; }
         const index = this._index;
-        for (const typeCheckbox of this._node.querySelectorAll('.scan-input-settings-checkbox')) {
+        for (const typeCheckbox of /** @type {NodeListOf<HTMLElement>} */ (this._node.querySelectorAll('.scan-input-settings-checkbox'))) {
             const {property} = typeCheckbox.dataset;
             typeCheckbox.dataset.setting = `scanning.inputs[${index}].${property}`;
         }
     }
 
+    /** */
     _removeSelf() {
         this._parent.removeInput(this._index);
     }
 
+    /**
+     * @param {boolean} showAdvanced
+     */
     _setAdvancedOptionsVisible(showAdvanced) {
         showAdvanced = !!showAdvanced;
-        this._node.dataset.showAdvanced = `${showAdvanced}`;
+        if (this._node !== null) {
+            this._node.dataset.showAdvanced = `${showAdvanced}`;
+        }
         this._parent.setProperty(this._index, 'options.showAdvanced', showAdvanced, false);
     }
 
+    /**
+     * @param {string} modifiersString
+     * @returns {import('input').Modifier[]}
+     */
     _splitModifiers(modifiersString) {
-        return modifiersString.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
+        /** @type {import('input').Modifier[]} */
+        const results = [];
+        for (const modifier of modifiersString.split(/[,;\s]+/)) {
+            const modifier2 = DocumentUtil.normalizeModifier(modifier.trim().toLowerCase());
+            if (modifier2 === null) { continue; }
+            results.push(modifier2);
+        }
+        return results;
     }
 
+    /**
+     * @param {import('input').Modifier[]} modifiersArray
+     * @returns {string}
+     */
     _joinModifiers(modifiersArray) {
         return modifiersArray.join(', ');
     }
diff --git a/ext/js/pages/settings/scan-inputs-simple-controller.js b/ext/js/pages/settings/scan-inputs-simple-controller.js
index 112c03a9..8d52af61 100644
--- a/ext/js/pages/settings/scan-inputs-simple-controller.js
+++ b/ext/js/pages/settings/scan-inputs-simple-controller.js
@@ -21,17 +21,26 @@ import {yomitan} from '../../yomitan.js';
 import {ScanInputsController} from './scan-inputs-controller.js';
 
 export class ScanInputsSimpleController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?HTMLInputElement} */
         this._middleMouseButtonScan = null;
+        /** @type {?HTMLSelectElement} */
         this._mainScanModifierKeyInput = null;
+        /** @type {boolean} */
         this._mainScanModifierKeyInputHasOther = false;
+        /** @type {HotkeyUtil} */
         this._hotkeyUtil = new HotkeyUtil();
     }
 
+    /** */
     async prepare() {
-        this._middleMouseButtonScan = document.querySelector('#middle-mouse-button-scan');
-        this._mainScanModifierKeyInput = document.querySelector('#main-scan-modifier-key');
+        this._middleMouseButtonScan = /** @type {HTMLInputElement} */ (document.querySelector('#middle-mouse-button-scan'));
+        this._mainScanModifierKeyInput = /** @type {HTMLSelectElement} */ (document.querySelector('#main-scan-modifier-key'));
 
         const {platform: {os}} = await yomitan.api.getEnvironmentInfo();
         this._hotkeyUtil.os = os;
@@ -40,27 +49,36 @@ export class ScanInputsSimpleController {
         this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther);
 
         const options = await this._settingsController.getOptions();
+        const optionsContext = this._settingsController.getOptionsContext();
 
         this._middleMouseButtonScan.addEventListener('change', this.onMiddleMouseButtonScanChange.bind(this), false);
         this._mainScanModifierKeyInput.addEventListener('change', this._onMainScanModifierKeyInputChange.bind(this), false);
 
         this._settingsController.on('scanInputsChanged', this._onScanInputsChanged.bind(this));
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
-        this._onOptionsChanged({options});
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /** */
     async refresh() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').ScanInputsChangedEvent} details
+     */
     _onScanInputsChanged({source}) {
         if (source === this) { return; }
         this.refresh();
     }
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         const {scanning: {inputs}} = options;
         const middleMouseSupportedIndex = this._getIndexOfMiddleMouseButtonScanInput(inputs);
@@ -87,27 +105,39 @@ export class ScanInputsSimpleController {
 
         this._setHasMainScanInput(hasMainScanInput);
 
-        this._middleMouseButtonScan.checked = middleMouseSupported;
-        this._mainScanModifierKeyInput.value = mainScanInput;
+        /** @type {HTMLInputElement} */ (this._middleMouseButtonScan).checked = middleMouseSupported;
+        /** @type {HTMLSelectElement} */ (this._mainScanModifierKeyInput).value = mainScanInput;
     }
 
+    /**
+     * @param {Event} e
+     */
     onMiddleMouseButtonScanChange(e) {
-        const middleMouseSupported = e.currentTarget.checked;
+        const element = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const middleMouseSupported = element.checked;
         this._setMiddleMouseSuppported(middleMouseSupported);
     }
 
+    /**
+     * @param {Event} e
+     */
     _onMainScanModifierKeyInputChange(e) {
-        const mainScanKey = e.currentTarget.value;
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const mainScanKey = element.value;
         if (mainScanKey === 'other') { return; }
         const mainScanInputs = (mainScanKey === 'none' ? [] : [mainScanKey]);
         this._setMainScanInputs(mainScanInputs);
     }
 
+    /**
+     * @param {HTMLSelectElement} select
+     * @param {boolean} hasOther
+     */
     _populateSelect(select, hasOther) {
         const modifierKeys = [
             {value: 'none', name: 'No key'}
         ];
-        for (const value of ['alt', 'ctrl', 'shift', 'meta']) {
+        for (const value of /** @type {import('input').ModifierKey[]} */ (['alt', 'ctrl', 'shift', 'meta'])) {
             const name = this._hotkeyUtil.getModifierDisplayValue(value);
             modifierKeys.push({value, name});
         }
@@ -127,10 +157,17 @@ export class ScanInputsSimpleController {
         select.appendChild(fragment);
     }
 
+    /**
+     * @param {string} value
+     * @returns {string[]}
+     */
     _splitValue(value) {
         return value.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
     }
 
+    /**
+     * @param {boolean} value
+     */
     async _setMiddleMouseSuppported(value) {
         // Find target index
         const options = await this._settingsController.getOptions();
@@ -163,8 +200,11 @@ export class ScanInputsSimpleController {
         }
     }
 
+    /**
+     * @param {string[]} value
+     */
     async _setMainScanInputs(value) {
-        value = value.join(', ');
+        const value2 = value.join(', ');
 
         // Find target index
         const options = await this._settingsController.getOptions();
@@ -175,7 +215,7 @@ export class ScanInputsSimpleController {
 
         if (index < 0) {
             // Add new
-            const input = ScanInputsController.createDefaultMouseInput(value, 'mouse0');
+            const input = ScanInputsController.createDefaultMouseInput(value2, 'mouse0');
             await this._modifyProfileSettings([{
                 action: 'splice',
                 path: 'scanning.inputs',
@@ -188,16 +228,25 @@ export class ScanInputsSimpleController {
             await this._modifyProfileSettings([{
                 action: 'set',
                 path: `scanning.inputs[${index}].include`,
-                value
+                value: value2
             }]);
         }
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     */
     async _modifyProfileSettings(targets) {
         await this._settingsController.modifyProfileSettings(targets);
-        this._settingsController.trigger('scanInputsChanged', {source: this});
+        /** @type {import('settings-controller').ScanInputsChangedEvent} */
+        const event = {source: this};
+        this._settingsController.trigger('scanInputsChanged', event);
     }
 
+    /**
+     * @param {import('settings').ScanningInput[]} inputs
+     * @returns {number}
+     */
     _getIndexOfMainScanInput(inputs) {
         for (let i = 0, ii = inputs.length; i < ii; ++i) {
             const {include, exclude, types: {mouse}} = inputs[i];
@@ -218,6 +267,10 @@ export class ScanInputsSimpleController {
         return -1;
     }
 
+    /**
+     * @param {import('settings').ScanningInput[]} inputs
+     * @returns {number}
+     */
     _getIndexOfMiddleMouseButtonScanInput(inputs) {
         for (let i = 0, ii = inputs.length; i < ii; ++i) {
             const {include, exclude, types: {mouse}} = inputs[i];
@@ -234,13 +287,22 @@ export class ScanInputsSimpleController {
         return -1;
     }
 
+    /**
+     * @param {string} input
+     * @returns {boolean}
+     */
     _isMouseInput(input) {
         return /^mouse\d+$/.test(input);
     }
 
+    /**
+     * @param {boolean} hasMainScanInput
+     */
     _setHasMainScanInput(hasMainScanInput) {
         if (this._mainScanModifierKeyInputHasOther !== hasMainScanInput) { return; }
         this._mainScanModifierKeyInputHasOther = !hasMainScanInput;
-        this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther);
+        if (this._mainScanModifierKeyInput !== null) {
+            this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther);
+        }
     }
 }
diff --git a/ext/js/pages/settings/secondary-search-dictionary-controller.js b/ext/js/pages/settings/secondary-search-dictionary-controller.js
index cc873901..b20bd475 100644
--- a/ext/js/pages/settings/secondary-search-dictionary-controller.js
+++ b/ext/js/pages/settings/secondary-search-dictionary-controller.js
@@ -20,16 +20,25 @@ import {EventListenerCollection} from '../../core.js';
 import {yomitan} from '../../yomitan.js';
 
 export class SecondarySearchDictionaryController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?import('core').TokenObject} */
         this._getDictionaryInfoToken = null;
+        /** @type {Map<string, import('dictionary-importer').Summary>} */
         this._dictionaryInfoMap = new Map();
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?HTMLElement} */
         this._container = null;
     }
 
+    /** */
     async prepare() {
-        this._container = document.querySelector('#secondary-search-dictionary-list');
+        this._container = /** @type {HTMLElement} */ (document.querySelector('#secondary-search-dictionary-list'));
 
         await this._onDatabaseUpdated();
 
@@ -40,7 +49,9 @@ export class SecondarySearchDictionaryController {
 
     // Private
 
+    /** */
     async _onDatabaseUpdated() {
+        /** @type {?import('core').TokenObject} */
         const token = {};
         this._getDictionaryInfoToken = token;
         const dictionaries = await this._settingsController.getDictionaryInfo();
@@ -52,10 +63,12 @@ export class SecondarySearchDictionaryController {
             this._dictionaryInfoMap.set(entry.title, entry);
         }
 
-        const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        await this._onDictionarySettingsReordered();
     }
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         this._eventListeners.removeAllEventListeners();
 
@@ -67,31 +80,38 @@ export class SecondarySearchDictionaryController {
             const dictionaryInfo = this._dictionaryInfoMap.get(name);
             if (typeof dictionaryInfo === 'undefined') { continue; }
 
-            const node = this._settingsController.instantiateTemplate('secondary-search-dictionary');
+            const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('secondary-search-dictionary'));
             fragment.appendChild(node);
 
-            const nameNode = node.querySelector('.dictionary-title');
+            const nameNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-title'));
             nameNode.textContent = name;
 
-            const versionNode = node.querySelector('.dictionary-version');
+            const versionNode = /** @type {HTMLElement} */ (node.querySelector('.dictionary-version'));
             versionNode.textContent = `rev.${dictionaryInfo.revision}`;
 
-            const toggle = node.querySelector('.dictionary-allow-secondary-searches');
+            const toggle = /** @type {HTMLElement} */ (node.querySelector('.dictionary-allow-secondary-searches'));
             toggle.dataset.setting = `dictionaries[${i}].allowSecondarySearches`;
             this._eventListeners.addEventListener(toggle, 'settingChanged', this._onEnabledChanged.bind(this, node), false);
         }
 
-        this._container.textContent = '';
-        this._container.appendChild(fragment);
+        const container = /** @type {HTMLElement} */ (this._container);
+        container.textContent = '';
+        container.appendChild(fragment);
     }
 
+    /**
+     * @param {HTMLElement} node
+     * @param {import('dom-data-binder').SettingChangedEvent} e
+     */
     _onEnabledChanged(node, e) {
         const {detail: {value}} = e;
         node.dataset.enabled = `${value}`;
     }
 
+    /** */
     async _onDictionarySettingsReordered() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 }
diff --git a/ext/js/pages/settings/sentence-termination-characters-controller.js b/ext/js/pages/settings/sentence-termination-characters-controller.js
index f901b82c..80c4cdbe 100644
--- a/ext/js/pages/settings/sentence-termination-characters-controller.js
+++ b/ext/js/pages/settings/sentence-termination-characters-controller.js
@@ -19,26 +19,38 @@
 import {EventListenerCollection} from '../../core.js';
 
 export class SentenceTerminationCharactersController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {SentenceTerminationCharacterEntry[]} */
         this._entries = [];
+        /** @type {?HTMLButtonElement} */
         this._addButton = null;
+        /** @type {?HTMLButtonElement} */
         this._resetButton = null;
+        /** @type {?HTMLElement} */
         this._listTable = null;
+        /** @type {?HTMLElement} */
         this._listContainer = null;
+        /** @type {?HTMLElement} */
         this._emptyIndicator = null;
     }
 
+    /** @type {import('./settings-controller.js').SettingsController} */
     get settingsController() {
         return this._settingsController;
     }
 
+    /** */
     async prepare() {
-        this._addButton = document.querySelector('#sentence-termination-character-list-add');
-        this._resetButton = document.querySelector('#sentence-termination-character-list-reset');
-        this._listTable = document.querySelector('#sentence-termination-character-list-table');
-        this._listContainer = document.querySelector('#sentence-termination-character-list');
-        this._emptyIndicator = document.querySelector('#sentence-termination-character-list-empty');
+        this._addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#sentence-termination-character-list-add'));
+        this._resetButton = /** @type {HTMLButtonElement} */ (document.querySelector('#sentence-termination-character-list-reset'));
+        this._listTable = /** @type {HTMLElement} */ (document.querySelector('#sentence-termination-character-list-table'));
+        this._listContainer = /** @type {HTMLElement} */ (document.querySelector('#sentence-termination-character-list'));
+        this._emptyIndicator = /** @type {HTMLElement} */ (document.querySelector('#sentence-termination-character-list-empty'));
 
         this._addButton.addEventListener('click', this._onAddClick.bind(this));
         this._resetButton.addEventListener('click', this._onResetClick.bind(this));
@@ -47,6 +59,9 @@ export class SentenceTerminationCharactersController {
         await this._updateOptions();
     }
 
+    /**
+     * @param {import('settings').SentenceParsingTerminationCharacterOption} terminationCharacterEntry
+     */
     async addEntry(terminationCharacterEntry) {
         const options = await this._settingsController.getOptions();
         const {sentenceParsing: {terminationCharacters}} = options;
@@ -62,6 +77,10 @@ export class SentenceTerminationCharactersController {
         await this._updateOptions();
     }
 
+    /**
+     * @param {number} index
+     * @returns {Promise<boolean>}
+     */
     async deleteEntry(index) {
         const options = await this._settingsController.getOptions();
         const {sentenceParsing: {terminationCharacters}} = options;
@@ -80,12 +99,19 @@ export class SentenceTerminationCharactersController {
         return true;
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async modifyProfileSettings(targets) {
         return await this._settingsController.modifyProfileSettings(targets);
     }
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         for (const entry of this._entries) {
             entry.cleanup();
@@ -94,29 +120,37 @@ export class SentenceTerminationCharactersController {
         this._entries = [];
         const {sentenceParsing: {terminationCharacters}} = options;
 
+        const listContainer = /** @type {HTMLElement} */ (this._listContainer);
         for (let i = 0, ii = terminationCharacters.length; i < ii; ++i) {
             const terminationCharacterEntry = terminationCharacters[i];
-            const node = this._settingsController.instantiateTemplate('sentence-termination-character-entry');
-            this._listContainer.appendChild(node);
+            const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('sentence-termination-character-entry'));
+            listContainer.appendChild(node);
             const entry = new SentenceTerminationCharacterEntry(this, terminationCharacterEntry, i, node);
             this._entries.push(entry);
             entry.prepare();
         }
 
-        this._listTable.hidden = (terminationCharacters.length === 0);
-        this._emptyIndicator.hidden = (terminationCharacters.length !== 0);
+        /** @type {HTMLElement} */ (this._listTable).hidden = (terminationCharacters.length === 0);
+        /** @type {HTMLElement} */ (this._emptyIndicator).hidden = (terminationCharacters.length !== 0);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onAddClick(e) {
         e.preventDefault();
         this._addNewEntry();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onResetClick(e) {
         e.preventDefault();
         this._reset();
     }
 
+    /** */
     async _addNewEntry() {
         const newEntry = {
             enabled: true,
@@ -125,14 +159,17 @@ export class SentenceTerminationCharactersController {
             includeCharacterAtStart: false,
             includeCharacterAtEnd: false
         };
-        return await this.addEntry(newEntry);
+        await this.addEntry(newEntry);
     }
 
+    /** */
     async _updateOptions() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /** */
     async _reset() {
         const defaultOptions = await this._settingsController.getDefaultOptions();
         const value = defaultOptions.profiles[0].options.sentenceParsing.terminationCharacters;
@@ -142,28 +179,43 @@ export class SentenceTerminationCharactersController {
 }
 
 class SentenceTerminationCharacterEntry {
+    /**
+     * @param {SentenceTerminationCharactersController} parent
+     * @param {import('settings').SentenceParsingTerminationCharacterOption} data
+     * @param {number} index
+     * @param {HTMLElement} node
+     */
     constructor(parent, data, index, node) {
+        /** @type {SentenceTerminationCharactersController} */
         this._parent = parent;
+        /** @type {import('settings').SentenceParsingTerminationCharacterOption} */
         this._data = data;
+        /** @type {number} */
         this._index = index;
+        /** @type {HTMLElement} */
         this._node = node;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?HTMLInputElement} */
         this._character1Input = null;
+        /** @type {?HTMLInputElement} */
         this._character2Input = null;
+        /** @type {string} */
         this._basePath = `sentenceParsing.terminationCharacters[${this._index}]`;
     }
 
+    /** */
     prepare() {
         const {enabled, character1, character2, includeCharacterAtStart, includeCharacterAtEnd} = this._data;
         const node = this._node;
 
-        const enabledToggle = node.querySelector('.sentence-termination-character-enabled');
-        const typeSelect = node.querySelector('.sentence-termination-character-type');
-        const character1Input = node.querySelector('.sentence-termination-character-input1');
-        const character2Input = node.querySelector('.sentence-termination-character-input2');
-        const includeAtStartCheckbox = node.querySelector('.sentence-termination-character-include-at-start');
-        const includeAtEndheckbox = node.querySelector('.sentence-termination-character-include-at-end');
-        const menuButton = node.querySelector('.sentence-termination-character-entry-button');
+        const enabledToggle = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-enabled'));
+        const typeSelect = /** @type {HTMLSelectElement} */ (node.querySelector('.sentence-termination-character-type'));
+        const character1Input = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-input1'));
+        const character2Input = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-input2'));
+        const includeAtStartCheckbox = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-include-at-start'));
+        const includeAtEndheckbox = /** @type {HTMLInputElement} */ (node.querySelector('.sentence-termination-character-include-at-end'));
+        const menuButton = /** @type {HTMLButtonElement} */ (node.querySelector('.sentence-termination-character-entry-button'));
 
         this._character1Input = character1Input;
         this._character2Input = character2Input;
@@ -188,6 +240,7 @@ class SentenceTerminationCharacterEntry {
         this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this), false);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         if (this._node.parentNode !== null) {
@@ -197,12 +250,20 @@ class SentenceTerminationCharacterEntry {
 
     // Private
 
+    /**
+     * @param {Event} e
+     */
     _onTypeSelectChange(e) {
-        this._setHasCharacter2(e.currentTarget.value === 'quote');
+        const element = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        this._setHasCharacter2(element.value === 'quote');
     }
 
+    /**
+     * @param {1|2} characterNumber
+     * @param {Event} e
+     */
     _onCharacterChange(characterNumber, e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
         if (characterNumber === 2 && this._data.character2 === null) {
             node.value = '';
         }
@@ -211,6 +272,9 @@ class SentenceTerminationCharacterEntry {
         this._setCharacterValue(node, characterNumber, value);
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'delete':
@@ -219,11 +283,16 @@ class SentenceTerminationCharacterEntry {
         }
     }
 
+    /** */
     async _delete() {
         this._parent.deleteEntry(this._index);
     }
 
+    /**
+     * @param {boolean} has
+     */
     async _setHasCharacter2(has) {
+        if (this._character2Input === null) { return; }
         const okay = await this._setCharacterValue(this._character2Input, 2, has ? this._data.character1 : null);
         if (okay) {
             const type = (!has ? 'terminator' : 'quote');
@@ -231,14 +300,24 @@ class SentenceTerminationCharacterEntry {
         }
     }
 
+    /**
+     * @param {HTMLInputElement} inputNode
+     * @param {1|2} characterNumber
+     * @param {?string} value
+     * @returns {Promise<boolean>}
+     */
     async _setCharacterValue(inputNode, characterNumber, value) {
-        const pathEnd = `character${characterNumber}`;
-        const r = await this._parent.settingsController.setProfileSetting(`${this._basePath}.${pathEnd}`, value);
+        if (characterNumber === 1 && typeof value !== 'string') { value = ''; }
+        const r = await this._parent.settingsController.setProfileSetting(`${this._basePath}.character${characterNumber}`, value);
         const okay = !r[0].error;
         if (okay) {
-            this._data[pathEnd] = value;
+            if (characterNumber === 1) {
+                this._data.character1 = /** @type {string} */ (value);
+            } else {
+                this._data.character2 = value;
+            }
         } else {
-            value = this._data[pathEnd];
+            value = characterNumber === 1 ? this._data.character1 : this._data.character2;
         }
         inputNode.value = (value !== null ? value : '');
         return okay;
diff --git a/ext/js/pages/settings/settings-controller.js b/ext/js/pages/settings/settings-controller.js
index 83ccdb39..1b46c745 100644
--- a/ext/js/pages/settings/settings-controller.js
+++ b/ext/js/pages/settings/settings-controller.js
@@ -22,21 +22,33 @@ import {PermissionsUtil} from '../../data/permissions-util.js';
 import {HtmlTemplateCollection} from '../../dom/html-template-collection.js';
 import {yomitan} from '../../yomitan.js';
 
+/**
+ * @augments EventDispatcher<import('settings-controller').EventType>
+ */
 export class SettingsController extends EventDispatcher {
     constructor() {
         super();
+        /** @type {number} */
         this._profileIndex = 0;
+        /** @type {string} */
         this._source = generateId(16);
+        /** @type {Set<import('settings-controller').PageExitPrevention>} */
         this._pageExitPreventions = new Set();
+        /** @type {EventListenerCollection} */
         this._pageExitPreventionEventListeners = new EventListenerCollection();
-        this._templates = new HtmlTemplateCollection(document);
+        /** @type {HtmlTemplateCollection} */
+        this._templates = new HtmlTemplateCollection();
+        this._templates.load(document);
+        /** @type {PermissionsUtil} */
         this._permissionsUtil = new PermissionsUtil();
     }
 
+    /** @type {string} */
     get source() {
         return this._source;
     }
 
+    /** @type {number} */
     get profileIndex() {
         return this._profileIndex;
     }
@@ -46,10 +58,12 @@ export class SettingsController extends EventDispatcher {
         this._setProfileIndex(value, true);
     }
 
+    /** @type {PermissionsUtil} */
     get permissionsUtil() {
         return this._permissionsUtil;
     }
 
+    /** */
     async prepare() {
         yomitan.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         if (this._canObservePermissionsChanges()) {
@@ -63,67 +77,121 @@ export class SettingsController extends EventDispatcher {
         }
     }
 
+    /** */
     async refresh() {
         await this._onOptionsUpdatedInternal(true);
     }
 
+    /**
+     * @returns {Promise<import('settings').ProfileOptions>}
+     */
     async getOptions() {
         const optionsContext = this.getOptionsContext();
         return await yomitan.api.optionsGet(optionsContext);
     }
 
+    /**
+     * @returns {Promise<import('settings').Options>}
+     */
     async getOptionsFull() {
         return await yomitan.api.optionsGetFull();
     }
 
+    /**
+     * @param {import('settings').Options} value
+     */
     async setAllSettings(value) {
         const profileIndex = value.profileCurrent;
         await yomitan.api.setAllSettings(value, this._source);
         this._setProfileIndex(profileIndex, true);
     }
 
+    /**
+     * @param {import('settings-modifications').ScopedRead[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async getSettings(targets) {
-        return await this._getSettings(targets, {});
+        return await this._getSettings(targets, null);
     }
 
+    /**
+     * @param {import('settings-modifications').Read[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async getGlobalSettings(targets) {
-        return await this._getSettings(targets, {scope: 'global'});
+        return await this._getSettings(targets, {scope: 'global', optionsContext: null});
     }
 
+    /**
+     * @param {import('settings-modifications').Read[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async getProfileSettings(targets) {
-        return await this._getSettings(targets, {scope: 'profile'});
+        return await this._getSettings(targets, {scope: 'profile', optionsContext: null});
     }
 
+    /**
+     * @param {import('settings-modifications').ScopedModification[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async modifySettings(targets) {
-        return await this._modifySettings(targets, {});
+        return await this._modifySettings(targets, null);
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async modifyGlobalSettings(targets) {
-        return await this._modifySettings(targets, {scope: 'global'});
+        return await this._modifySettings(targets, {scope: 'global', optionsContext: null});
     }
 
+    /**
+     * @param {import('settings-modifications').Modification[]} targets
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async modifyProfileSettings(targets) {
-        return await this._modifySettings(targets, {scope: 'profile'});
+        return await this._modifySettings(targets, {scope: 'profile', optionsContext: null});
     }
 
+    /**
+     * @param {string} path
+     * @param {unknown} value
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async setGlobalSetting(path, value) {
         return await this.modifyGlobalSettings([{action: 'set', path, value}]);
     }
 
+    /**
+     * @param {string} path
+     * @param {unknown} value
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async setProfileSetting(path, value) {
         return await this.modifyProfileSettings([{action: 'set', path, value}]);
     }
 
+    /**
+     * @returns {Promise<import('dictionary-importer').Summary[]>}
+     */
     async getDictionaryInfo() {
         return await yomitan.api.getDictionaryInfo();
     }
 
+    /**
+     * @returns {import('settings').OptionsContext}
+     */
     getOptionsContext() {
         return {index: this._profileIndex};
     }
 
+    /**
+     * @returns {import('settings-controller').PageExitPrevention}
+     */
     preventPageExit() {
-        const obj = {end: null};
+        /** @type {import('settings-controller').PageExitPrevention} */
+        const obj = {};
         obj.end = this._endPreventPageExit.bind(this, obj);
         if (this._pageExitPreventionEventListeners.size === 0) {
             this._pageExitPreventionEventListeners.addEventListener(window, 'beforeunload', this._onBeforeUnload.bind(this), false);
@@ -132,14 +200,25 @@ export class SettingsController extends EventDispatcher {
         return obj;
     }
 
+    /**
+     * @param {string} name
+     * @returns {Element}
+     */
     instantiateTemplate(name) {
         return this._templates.instantiate(name);
     }
 
+    /**
+     * @param {string} name
+     * @returns {DocumentFragment}
+     */
     instantiateTemplateFragment(name) {
         return this._templates.instantiateFragment(name);
     }
 
+    /**
+     * @returns {Promise<import('settings').Options>}
+     */
     async getDefaultOptions() {
         const optionsUtil = new OptionsUtil();
         await optionsUtil.prepare();
@@ -149,22 +228,34 @@ export class SettingsController extends EventDispatcher {
 
     // Private
 
+    /**
+     * @param {number} value
+     * @param {boolean} canUpdateProfileIndex
+     */
     _setProfileIndex(value, canUpdateProfileIndex) {
         this._profileIndex = value;
         this.trigger('optionsContextChanged');
         this._onOptionsUpdatedInternal(canUpdateProfileIndex);
     }
 
+    /**
+     * @param {{source: string}} details
+     */
     _onOptionsUpdated({source}) {
         if (source === this._source) { return; }
         this._onOptionsUpdatedInternal(true);
     }
 
+    /**
+     * @param {boolean} canUpdateProfileIndex
+     */
     async _onOptionsUpdatedInternal(canUpdateProfileIndex) {
         const optionsContext = this.getOptionsContext();
         try {
             const options = await this.getOptions();
-            this.trigger('optionsChanged', {options, optionsContext});
+            /** @type {import('settings-controller').OptionsChangedEvent} */
+            const event = {options, optionsContext};
+            this.trigger('optionsChanged', event);
         } catch (e) {
             if (canUpdateProfileIndex) {
                 this._setProfileIndex(0, false);
@@ -174,26 +265,49 @@ export class SettingsController extends EventDispatcher {
         }
     }
 
-    _setupTargets(targets, extraFields) {
-        return targets.map((target) => {
-            target = Object.assign({}, extraFields, target);
-            if (target.scope === 'profile') {
-                target.optionsContext = this.getOptionsContext();
-            }
-            return target;
-        });
+    /**
+     * @param {import('settings-modifications').OptionsScope} target
+     */
+    _modifyOptionsScope(target) {
+        if (target.scope === 'profile') {
+            target.optionsContext = this.getOptionsContext();
+        }
     }
 
+    /**
+     * @template {boolean} THasScope
+     * @param {import('settings-controller').SettingsRead<THasScope>[]} targets
+     * @param {import('settings-controller').SettingsExtraFields<THasScope>} extraFields
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async _getSettings(targets, extraFields) {
-        targets = this._setupTargets(targets, extraFields);
-        return await yomitan.api.getSettings(targets);
+        const targets2 = targets.map((target) => {
+            const target2 = /** @type {import('settings-controller').SettingsRead<true>} */ (Object.assign({}, extraFields, target));
+            this._modifyOptionsScope(target2);
+            return target2;
+        });
+        return await yomitan.api.getSettings(targets2);
     }
 
+    /**
+     * @template {boolean} THasScope
+     * @param {import('settings-controller').SettingsModification<THasScope>[]} targets
+     * @param {import('settings-controller').SettingsExtraFields<THasScope>} extraFields
+     * @returns {Promise<import('settings-controller').ModifyResult[]>}
+     */
     async _modifySettings(targets, extraFields) {
-        targets = this._setupTargets(targets, extraFields);
-        return await yomitan.api.modifySettings(targets, this._source);
+        const targets2 = targets.map((target) => {
+            const target2 = /** @type {import('settings-controller').SettingsModification<true>} */ (Object.assign({}, extraFields, target));
+            this._modifyOptionsScope(target2);
+            return target2;
+        });
+        return await yomitan.api.modifySettings(targets2, this._source);
     }
 
+    /**
+     * @param {BeforeUnloadEvent} e
+     * @returns {string|undefined}
+     */
     _onBeforeUnload(e) {
         if (this._pageExitPreventions.size === 0) {
             return;
@@ -204,6 +318,9 @@ export class SettingsController extends EventDispatcher {
         return '';
     }
 
+    /**
+     * @param {import('settings-controller').PageExitPrevention} obj
+     */
     _endPreventPageExit(obj) {
         this._pageExitPreventions.delete(obj);
         if (this._pageExitPreventions.size === 0) {
@@ -211,18 +328,25 @@ export class SettingsController extends EventDispatcher {
         }
     }
 
+    /** */
     _onPermissionsChanged() {
         this._triggerPermissionsChanged();
     }
 
+    /** */
     async _triggerPermissionsChanged() {
-        const event = 'permissionsChanged';
-        if (!this.hasListeners(event)) { return; }
+        const eventName = 'permissionsChanged';
+        if (!this.hasListeners(eventName)) { return; }
 
         const permissions = await this._permissionsUtil.getAllPermissions();
-        this.trigger(event, {permissions});
+        /** @type {import('settings-controller').PermissionsChangedEvent} */
+        const event = {permissions};
+        this.trigger(eventName, event);
     }
 
+    /**
+     * @returns {boolean}
+     */
     _canObservePermissionsChanges() {
         return isObject(chrome.permissions) && isObject(chrome.permissions.onAdded) && isObject(chrome.permissions.onRemoved);
     }
diff --git a/ext/js/pages/settings/settings-display-controller.js b/ext/js/pages/settings/settings-display-controller.js
index e23e355d..16e6cfae 100644
--- a/ext/js/pages/settings/settings-display-controller.js
+++ b/ext/js/pages/settings/settings-display-controller.js
@@ -21,44 +21,54 @@ import {PopupMenu} from '../../dom/popup-menu.js';
 import {SelectorObserver} from '../../dom/selector-observer.js';
 
 export class SettingsDisplayController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     * @param {import('./modal-controller.js').ModalController} modalController
+     */
     constructor(settingsController, modalController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {import('./modal-controller.js').ModalController} */
         this._modalController = modalController;
+        /** @type {?HTMLElement} */
         this._contentNode = null;
+        /** @type {?HTMLElement} */
         this._menuContainer = null;
-        this._onMoreToggleClickBind = null;
-        this._onMenuButtonClickBind = null;
+        /** @type {(event: MouseEvent) => void} */
+        this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this);
+        /** @type {(event: MouseEvent) => void} */
+        this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
     }
 
+    /** */
     prepare() {
-        this._contentNode = document.querySelector('.content');
-        this._menuContainer = document.querySelector('#popup-menus');
+        this._contentNode = /** @type {HTMLElement} */ (document.querySelector('.content'));
+        this._menuContainer = /** @type {HTMLElement} */ (document.querySelector('#popup-menus'));
 
         const onFabButtonClick = this._onFabButtonClick.bind(this);
-        for (const fabButton of document.querySelectorAll('.fab-button')) {
+        for (const fabButton of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.fab-button'))) {
             fabButton.addEventListener('click', onFabButtonClick, false);
         }
 
         const onModalAction = this._onModalAction.bind(this);
-        for (const node of document.querySelectorAll('[data-modal-action]')) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('[data-modal-action]'))) {
             node.addEventListener('click', onModalAction, false);
         }
 
         const onSelectOnClickElementClick = this._onSelectOnClickElementClick.bind(this);
-        for (const node of document.querySelectorAll('[data-select-on-click]')) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('[data-select-on-click]'))) {
             node.addEventListener('click', onSelectOnClickElementClick, false);
         }
 
         const onInputTabActionKeyDown = this._onInputTabActionKeyDown.bind(this);
-        for (const node of document.querySelectorAll('[data-tab-action]')) {
+        for (const node of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('[data-tab-action]'))) {
             node.addEventListener('keydown', onInputTabActionKeyDown, false);
         }
 
-        for (const node of document.querySelectorAll('.defer-load-iframe')) {
+        for (const node of /** @type {NodeListOf<HTMLIFrameElement>} */ (document.querySelectorAll('.defer-load-iframe'))) {
             this._setupDeferLoadIframe(node);
         }
 
-        this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this);
         const moreSelectorObserver = new SelectorObserver({
             selector: '.more-toggle',
             onAdded: this._onMoreSetup.bind(this),
@@ -66,7 +76,6 @@ export class SettingsDisplayController {
         });
         moreSelectorObserver.observe(document.documentElement, false);
 
-        this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
         const menuSelectorObserver = new SelectorObserver({
             selector: '[data-menu]',
             onAdded: this._onMenuSetup.bind(this),
@@ -81,32 +90,54 @@ export class SettingsDisplayController {
 
     // Private
 
+    /**
+     * @param {Element} element
+     * @returns {null}
+     */
     _onMoreSetup(element) {
-        element.addEventListener('click', this._onMoreToggleClickBind, false);
+        /** @type {HTMLElement} */ (element).addEventListener('click', this._onMoreToggleClickBind, false);
         return null;
     }
 
+    /**
+     * @param {Element} element
+     */
     _onMoreCleanup(element) {
-        element.removeEventListener('click', this._onMoreToggleClickBind, false);
+        /** @type {HTMLElement} */ (element).removeEventListener('click', this._onMoreToggleClickBind, false);
     }
 
+    /**
+     * @param {Element} element
+     * @returns {null}
+     */
     _onMenuSetup(element) {
-        element.addEventListener('click', this._onMenuButtonClickBind, false);
+        /** @type {HTMLElement} */ (element).addEventListener('click', this._onMenuButtonClickBind, false);
         return null;
     }
 
+    /**
+     * @param {Element} element
+     */
     _onMenuCleanup(element) {
-        element.removeEventListener('click', this._onMenuButtonClickBind, false);
+        /** @type {HTMLElement} */ (element).removeEventListener('click', this._onMenuButtonClickBind, false);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onMenuButtonClick(e) {
-        const element = e.currentTarget;
+        const element = /** @type {HTMLElement} */ (e.currentTarget);
         const {menu} = element.dataset;
+        if (typeof menu === 'undefined') { return; }
         this._showMenu(element, menu);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onFabButtonClick(e) {
-        const action = e.currentTarget.dataset.action;
+        const element = /** @type {HTMLElement} */ (e.currentTarget);
+        const action = element.dataset.action;
         switch (action) {
             case 'toggle-sidebar':
                 document.body.classList.toggle('sidebar-visible');
@@ -117,16 +148,20 @@ export class SettingsDisplayController {
         }
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onMoreToggleClick(e) {
-        const container = this._getMoreContainer(e.currentTarget);
+        const node = /** @type {HTMLElement} */ (e.currentTarget);
+        const container = this._getMoreContainer(node);
         if (container === null) { return; }
 
-        const more = container.querySelector('.more');
+        const more = /** @type {?HTMLElement} */ (container.querySelector('.more'));
         if (more === null) { return; }
 
         const moreVisible = more.hidden;
         more.hidden = !moreVisible;
-        for (const moreToggle of container.querySelectorAll('.more-toggle')) {
+        for (const moreToggle of /** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll('.more-toggle'))) {
             const container2 = this._getMoreContainer(moreToggle);
             if (container2 === null) { continue; }
 
@@ -137,13 +172,16 @@ export class SettingsDisplayController {
         }
 
         e.preventDefault();
-        return false;
     }
 
+    /** */
     _onPopState() {
         this._updateScrollTarget();
     }
 
+    /**
+     * @param {KeyboardEvent} e
+     */
     _onKeyDown(e) {
         switch (e.code) {
             case 'Escape':
@@ -155,12 +193,18 @@ export class SettingsDisplayController {
         }
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onModalAction(e) {
-        const node = e.currentTarget;
+        const node = /** @type {HTMLElement} */ (e.currentTarget);
         const {modalAction} = node.dataset;
         if (typeof modalAction !== 'string') { return; }
 
-        let [action, target] = modalAction.split(',');
+        const modalActionArray = modalAction.split(',');
+        const action = modalActionArray[0];
+        /** @type {string|Element|undefined} */
+        let target = modalActionArray[1];
         if (typeof target === 'undefined') {
             const currentModal = node.closest('.modal');
             if (currentModal === null) { return; }
@@ -185,26 +229,33 @@ export class SettingsDisplayController {
         e.preventDefault();
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onSelectOnClickElementClick(e) {
         if (e.button !== 0) { return; }
 
-        const node = e.currentTarget;
+        const node = /** @type {HTMLElement} */ (e.currentTarget);
         const range = document.createRange();
         range.selectNode(node);
 
         const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
+        if (selection !== null) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
 
         e.preventDefault();
         e.stopPropagation();
-        return false;
     }
 
+    /**
+     * @param {KeyboardEvent} e
+     */
     _onInputTabActionKeyDown(e) {
         if (e.key !== 'Tab' || e.ctrlKey) { return; }
 
-        const node = e.currentTarget;
+        const node = /** @type {HTMLElement} */ (e.currentTarget);
         const {tabAction} = node.dataset;
         if (typeof tabAction !== 'string') { return; }
 
@@ -220,6 +271,7 @@ export class SettingsDisplayController {
         }
     }
 
+    /** */
     _updateScrollTarget() {
         const hash = window.location.hash;
         if (!hash.startsWith('#!')) { return; }
@@ -233,18 +285,25 @@ export class SettingsDisplayController {
         content.scrollTop += rect2.top - rect1.top;
     }
 
+    /**
+     * @param {HTMLElement} link
+     * @returns {?Element}
+     */
     _getMoreContainer(link) {
         const v = link.dataset.parentDistance;
         const distance = v ? parseInt(v, 10) : 1;
         if (Number.isNaN(distance)) { return null; }
 
+        /** @type {?Element} */
+        let result = link;
         for (let i = 0; i < distance; ++i) {
-            link = link.parentNode;
-            if (link === null) { break; }
+            if (result === null) { break; }
+            result = /** @type {?Element} */ (result.parentNode);
         }
-        return link;
+        return result;
     }
 
+    /** */
     _closeTopMenuOrModal() {
         for (const popupMenu of PopupMenu.openMenus) {
             popupMenu.close();
@@ -257,17 +316,27 @@ export class SettingsDisplayController {
         }
     }
 
+    /**
+     * @param {HTMLElement} element
+     * @param {string} menuName
+     */
     _showMenu(element, menuName) {
-        const menu = this._settingsController.instantiateTemplate(menuName);
-        if (menu === null) { return; }
+        const menu = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate(menuName));
 
-        this._menuContainer.appendChild(menu);
+        /** @type {HTMLElement} */ (this._menuContainer).appendChild(menu);
 
         const popupMenu = new PopupMenu(element, menu);
         popupMenu.prepare();
     }
 
+    /**
+     * @param {KeyboardEvent} e
+     * @param {HTMLElement} node
+     * @param {string[]} args
+     */
     _indentInput(e, node, args) {
+        if (!(node instanceof HTMLTextAreaElement)) { return; }
+
         let indent = '\t';
         if (args.length > 1) {
             const count = parseInt(args[1], 10);
@@ -276,7 +345,8 @@ export class SettingsDisplayController {
 
         const {selectionStart: start, selectionEnd: end, value} = node;
         const lineStart = value.substring(0, start).lastIndexOf('\n') + 1;
-        const lineWhitespace = /^[ \t]*/.exec(value.substring(lineStart))[0];
+        const lineWhitespaceMatch = /^[ \t]*/.exec(value.substring(lineStart));
+        const lineWhitespace = lineWhitespaceMatch !== null ? lineWhitespaceMatch[0] : '';
 
         if (e.shiftKey) {
             const whitespaceLength = Math.max(0, Math.floor((lineWhitespace.length - 1) / 4) * 4);
@@ -298,17 +368,23 @@ export class SettingsDisplayController {
         }
     }
 
+    /**
+     * @param {HTMLIFrameElement} element
+     */
     _setupDeferLoadIframe(element) {
         const parent = this._getMoreContainer(element);
         if (parent === null) { return; }
 
+        /** @type {?MutationObserver} */
         let mutationObserver = null;
         const callback = () => {
             if (!this._isElementVisible(element)) { return false; }
 
             const src = element.dataset.src;
             delete element.dataset.src;
-            element.src = src;
+            if (typeof src === 'string') {
+                element.src = src;
+            }
 
             if (mutationObserver === null) { return true; }
 
@@ -323,6 +399,10 @@ export class SettingsDisplayController {
         mutationObserver.observe(parent, {attributes: true});
     }
 
+    /**
+     * @param {HTMLElement} element
+     * @returns {boolean}
+     */
     _isElementVisible(element) {
         return (element.offsetParent !== null);
     }
diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js
index f9ea0aa1..1b9723e8 100644
--- a/ext/js/pages/settings/settings-main.js
+++ b/ext/js/pages/settings/settings-main.js
@@ -49,6 +49,9 @@ import {StatusFooter} from './status-footer.js';
 import {StorageController} from './storage-controller.js';
 import {TranslationTextReplacementsController} from './translation-text-replacements-controller.js';
 
+/**
+ * @param {GenericSettingController} genericSettingController
+ */
 async function setupGenericSettingsController(genericSettingController) {
     await genericSettingController.prepare();
     await genericSettingController.refresh();
@@ -62,10 +65,11 @@ async function setupGenericSettingsController(genericSettingController) {
         const extensionContentController = new ExtensionContentController();
         extensionContentController.prepare();
 
-        const statusFooter = new StatusFooter(document.querySelector('.status-footer-container'));
+        const statusFooter = new StatusFooter(/** @type {HTMLElement} */ (document.querySelector('.status-footer-container')));
         statusFooter.prepare();
 
-        let prepareTimer = setTimeout(() => {
+        /** @type {?number} */
+        let prepareTimer = window.setTimeout(() => {
             prepareTimer = null;
             document.documentElement.dataset.loadingStalled = 'true';
         }, 1000);
diff --git a/ext/js/pages/settings/sort-frequency-dictionary-controller.js b/ext/js/pages/settings/sort-frequency-dictionary-controller.js
index 53104085..e7759d95 100644
--- a/ext/js/pages/settings/sort-frequency-dictionary-controller.js
+++ b/ext/js/pages/settings/sort-frequency-dictionary-controller.js
@@ -19,20 +19,30 @@
 import {yomitan} from '../../yomitan.js';
 
 export class SortFrequencyDictionaryController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?HTMLSelectElement} */
         this._sortFrequencyDictionarySelect = null;
+        /** @type {?HTMLSelectElement} */
         this._sortFrequencyDictionaryOrderSelect = null;
+        /** @type {?HTMLButtonElement} */
         this._sortFrequencyDictionaryOrderAutoButton = null;
+        /** @type {?HTMLElement} */
         this._sortFrequencyDictionaryOrderContainerNode = null;
+        /** @type {?import('core').TokenObject} */
         this._getDictionaryInfoToken = null;
     }
 
+    /** */
     async prepare() {
-        this._sortFrequencyDictionarySelect = document.querySelector('#sort-frequency-dictionary');
-        this._sortFrequencyDictionaryOrderSelect = document.querySelector('#sort-frequency-dictionary-order');
-        this._sortFrequencyDictionaryOrderAutoButton = document.querySelector('#sort-frequency-dictionary-order-auto');
-        this._sortFrequencyDictionaryOrderContainerNode = document.querySelector('#sort-frequency-dictionary-order-container');
+        this._sortFrequencyDictionarySelect = /** @type {HTMLSelectElement} */ (document.querySelector('#sort-frequency-dictionary'));
+        this._sortFrequencyDictionaryOrderSelect = /** @type {HTMLSelectElement} */ (document.querySelector('#sort-frequency-dictionary-order'));
+        this._sortFrequencyDictionaryOrderAutoButton = /** @type {HTMLButtonElement} */ (document.querySelector('#sort-frequency-dictionary-order-auto'));
+        this._sortFrequencyDictionaryOrderContainerNode = /** @type {HTMLElement} */ (document.querySelector('#sort-frequency-dictionary-order-container'));
 
         await this._onDatabaseUpdated();
 
@@ -45,7 +55,9 @@ export class SortFrequencyDictionaryController {
 
     // Private
 
+    /** */
     async _onDatabaseUpdated() {
+        /** @type {?import('core').TokenObject} */
         const token = {};
         this._getDictionaryInfoToken = token;
         const dictionaries = await this._settingsController.getDictionaryInfo();
@@ -55,33 +67,44 @@ export class SortFrequencyDictionaryController {
         this._updateDictionaryOptions(dictionaries);
 
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         const {sortFrequencyDictionary, sortFrequencyDictionaryOrder} = options.general;
-        this._sortFrequencyDictionarySelect.value = (sortFrequencyDictionary !== null ? sortFrequencyDictionary : '');
-        this._sortFrequencyDictionaryOrderSelect.value = sortFrequencyDictionaryOrder;
-        this._sortFrequencyDictionaryOrderContainerNode.hidden = (sortFrequencyDictionary === null);
+        /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionarySelect).value = (sortFrequencyDictionary !== null ? sortFrequencyDictionary : '');
+        /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionaryOrderSelect).value = sortFrequencyDictionaryOrder;
+        /** @type {HTMLElement} */ (this._sortFrequencyDictionaryOrderContainerNode).hidden = (sortFrequencyDictionary === null);
     }
 
+    /** */
     _onSortFrequencyDictionarySelectChange() {
-        let {value} = this._sortFrequencyDictionarySelect;
-        if (value === '') { value = null; }
-        this._setSortFrequencyDictionaryValue(value);
+        const {value} = /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionarySelect);
+        this._setSortFrequencyDictionaryValue(value !== '' ? value : null);
     }
 
+    /** */
     _onSortFrequencyDictionaryOrderSelectChange() {
-        const {value} = this._sortFrequencyDictionaryOrderSelect;
-        this._setSortFrequencyDictionaryOrderValue(value);
+        const {value} = /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionaryOrderSelect);
+        const value2 = this._normalizeSortFrequencyDictionaryOrder(value);
+        if (value2 === null) { return; }
+        this._setSortFrequencyDictionaryOrderValue(value2);
     }
 
+    /** */
     _onSortFrequencyDictionaryOrderAutoButtonClick() {
-        const {value} = this._sortFrequencyDictionarySelect;
+        const {value} = /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionarySelect);
         if (value === '') { return; }
         this._autoUpdateOrder(value);
     }
 
+    /**
+     * @param {import('dictionary-importer').Summary[]} dictionaries
+     */
     _updateDictionaryOptions(dictionaries) {
         const fragment = document.createDocumentFragment();
         let option = document.createElement('option');
@@ -95,30 +118,44 @@ export class SortFrequencyDictionaryController {
             option.textContent = title;
             fragment.appendChild(option);
         }
-        this._sortFrequencyDictionarySelect.textContent = '';
-        this._sortFrequencyDictionarySelect.appendChild(fragment);
+        const select = /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionarySelect);
+        select.textContent = '';
+        select.appendChild(fragment);
     }
 
+    /**
+     * @param {?string} value
+     */
     async _setSortFrequencyDictionaryValue(value) {
-        this._sortFrequencyDictionaryOrderContainerNode.hidden = (value === null);
+        /** @type {HTMLElement} */ (this._sortFrequencyDictionaryOrderContainerNode).hidden = (value === null);
         await this._settingsController.setProfileSetting('general.sortFrequencyDictionary', value);
         if (value !== null) {
             await this._autoUpdateOrder(value);
         }
     }
 
+    /**
+     * @param {import('settings').SortFrequencyDictionaryOrder} value
+     */
     async _setSortFrequencyDictionaryOrderValue(value) {
         await this._settingsController.setProfileSetting('general.sortFrequencyDictionaryOrder', value);
     }
 
+    /**
+     * @param {string} dictionary
+     */
     async _autoUpdateOrder(dictionary) {
         const order = await this._getFrequencyOrder(dictionary);
         if (order === 0) { return; }
         const value = (order > 0 ? 'descending' : 'ascending');
-        this._sortFrequencyDictionaryOrderSelect.value = value;
+        /** @type {HTMLSelectElement} */ (this._sortFrequencyDictionaryOrderSelect).value = value;
         await this._setSortFrequencyDictionaryOrderValue(value);
     }
 
+    /**
+     * @param {string} dictionary
+     * @returns {Promise<number>}
+     */
     async _getFrequencyOrder(dictionary) {
         const moreCommonTerms = ['来る', '言う', '出る', '入る', '方', '男', '女', '今', '何', '時'];
         const lessCommonTerms = ['行なう', '論じる', '過す', '行方', '人口', '猫', '犬', '滝', '理', '暁'];
@@ -129,6 +166,7 @@ export class SortFrequencyDictionaryController {
             [dictionary]
         );
 
+        /** @type {Map<string, {hasValue: boolean, minValue: number, maxValue: number}>} */
         const termDetails = new Map();
         const moreCommonTermDetails = [];
         const lessCommonTermDetails = [];
@@ -144,7 +182,6 @@ export class SortFrequencyDictionaryController {
         }
 
         for (const {term, frequency} of frequencies) {
-            if (typeof frequency !== 'number') { continue; }
             const details = termDetails.get(term);
             if (typeof details === 'undefined') { continue; }
             details.minValue = Math.min(details.minValue, frequency);
@@ -163,10 +200,28 @@ export class SortFrequencyDictionaryController {
         return Math.sign(result);
     }
 
+    /**
+     * @param {import('dictionary-importer').SummaryCounts} counts
+     * @returns {boolean}
+     */
     _dictionaryHasNoFrequencies(counts) {
         if (typeof counts !== 'object' || counts === null) { return false; }
         const {termMeta} = counts;
         if (typeof termMeta !== 'object' || termMeta === null) { return false; }
         return termMeta.freq <= 0;
     }
+
+    /**
+     * @param {string} value
+     * @returns {?import('settings').SortFrequencyDictionaryOrder}
+     */
+    _normalizeSortFrequencyDictionaryOrder(value) {
+        switch (value) {
+            case 'ascending':
+            case 'descending':
+                return value;
+            default:
+                return null;
+        }
+    }
 }
diff --git a/ext/js/pages/settings/status-footer.js b/ext/js/pages/settings/status-footer.js
index 6c64794f..a8f1a8c4 100644
--- a/ext/js/pages/settings/status-footer.js
+++ b/ext/js/pages/settings/status-footer.js
@@ -19,34 +19,52 @@
 import {PanelElement} from '../../dom/panel-element.js';
 
 export class StatusFooter extends PanelElement {
+    /**
+     * @param {HTMLElement} node
+     */
     constructor(node) {
         super({
             node,
             closingAnimationDuration: 375 // Milliseconds; includes buffer
         });
-        this._body = node.querySelector('.status-footer');
+        /** @type {HTMLElement} */
+        this._body = /** @type {HTMLElement} */ (node.querySelector('.status-footer'));
     }
 
+    /** */
     prepare() {
-        this.on('closeCompleted', this._onCloseCompleted.bind(this), false);
-        this._body.querySelector('.status-footer-header-close').addEventListener('click', this._onCloseClick.bind(this), false);
+        const closeButton = /** @type {HTMLElement} */ (this._body.querySelector('.status-footer-header-close'));
+        this.on('closeCompleted', this._onCloseCompleted.bind(this));
+        closeButton.addEventListener('click', this._onCloseClick.bind(this), false);
     }
 
+    /**
+     * @param {string} selector
+     * @returns {?HTMLElement}
+     */
     getTaskContainer(selector) {
         return this._body.querySelector(selector);
     }
 
+    /**
+     * @param {string} selector
+     * @returns {boolean}
+     */
     isTaskActive(selector) {
         const target = this.getTaskContainer(selector);
-        return (target !== null && target.dataset.active);
+        return (target !== null && !!target.dataset.active);
     }
 
+    /**
+     * @param {string} selector
+     * @param {boolean} active
+     */
     setTaskActive(selector, active) {
         const target = this.getTaskContainer(selector);
         if (target === null) { return; }
 
         const activeElements = new Set();
-        for (const element of this._body.querySelectorAll('.status-footer-item')) {
+        for (const element of /** @type {NodeListOf<HTMLElement>} */ (this._body.querySelectorAll('.status-footer-item'))) {
             if (element.dataset.active) {
                 activeElements.add(element);
             }
@@ -68,13 +86,17 @@ export class StatusFooter extends PanelElement {
 
     // Private
 
+    /**
+     * @param {MouseEvent} e
+     */
     _onCloseClick(e) {
         e.preventDefault();
         this.setVisible(false);
     }
 
+    /** */
     _onCloseCompleted() {
-        for (const element of this._body.querySelectorAll('.status-footer-item')) {
+        for (const element of /** @type {NodeListOf<HTMLElement>} */ (this._body.querySelectorAll('.status-footer-item'))) {
             if (!element.dataset.active) {
                 element.hidden = true;
             }
diff --git a/ext/js/pages/settings/storage-controller.js b/ext/js/pages/settings/storage-controller.js
index ba1145b8..7f323b48 100644
--- a/ext/js/pages/settings/storage-controller.js
+++ b/ext/js/pages/settings/storage-controller.js
@@ -19,28 +19,43 @@
 import {yomitan} from '../../yomitan.js';
 
 export class StorageController {
+    /**
+     * @param {import('./persistent-storage-controller.js').PersistentStorageController} persistentStorageController
+     */
     constructor(persistentStorageController) {
+    /** @type {import('./persistent-storage-controller.js').PersistentStorageController} */
         this._persistentStorageController = persistentStorageController;
+        /** @type {?StorageEstimate} */
         this._mostRecentStorageEstimate = null;
+        /** @type {boolean} */
         this._storageEstimateFailed = false;
+        /** @type {boolean} */
         this._isUpdating = false;
-        this._storageUsageNode = null;
-        this._storageQuotaNode = null;
+        /** @type {?NodeListOf<HTMLElement>} */
+        this._storageUsageNodes = null;
+        /** @type {?NodeListOf<HTMLElement>} */
+        this._storageQuotaNodes = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseFiniteNodes = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseInfiniteNodes = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseValidNodes = null;
+        /** @type {?NodeListOf<HTMLElement>} */
         this._storageUseInvalidNodes = null;
     }
 
+    /** */
     prepare() {
-        this._storageUsageNodes = document.querySelectorAll('.storage-usage');
-        this._storageQuotaNodes = document.querySelectorAll('.storage-quota');
-        this._storageUseFiniteNodes = document.querySelectorAll('.storage-use-finite');
-        this._storageUseInfiniteNodes = document.querySelectorAll('.storage-use-infinite');
-        this._storageUseValidNodes = document.querySelectorAll('.storage-use-valid');
-        this._storageUseInvalidNodes = document.querySelectorAll('.storage-use-invalid');
-
-        document.querySelector('#storage-refresh').addEventListener('click', this._onStorageRefreshButtonClick.bind(this), false);
+        this._storageUsageNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-usage'));
+        this._storageQuotaNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-quota'));
+        this._storageUseFiniteNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-finite'));
+        this._storageUseInfiniteNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-infinite'));
+        this._storageUseValidNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-valid'));
+        this._storageUseInvalidNodes = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.storage-use-invalid'));
+        const storageRefreshButton = /** @type {HTMLButtonElement} */ (document.querySelector('#storage-refresh'));
+
+        storageRefreshButton.addEventListener('click', this._onStorageRefreshButtonClick.bind(this), false);
         yomitan.on('storageChanged', this._onStorageChanged.bind(this));
 
         this._updateStats();
@@ -48,14 +63,17 @@ export class StorageController {
 
     // Private
 
+    /** */
     _onStorageRefreshButtonClick() {
         this._updateStats();
     }
 
+    /** */
     _onStorageChanged() {
         this._updateStats();
     }
 
+    /** */
     async _updateStats() {
         if (this._isUpdating) { return; }
 
@@ -66,13 +84,18 @@ export class StorageController {
             const valid = (estimate !== null);
 
             // Firefox reports usage as 0 when persistent storage is enabled.
-            const finite = valid && (estimate.usage > 0 || !(await this._persistentStorageController.isStoragePeristent()));
+            const finite = valid && ((typeof estimate.usage === 'number' && estimate.usage > 0) || !(await this._persistentStorageController.isStoragePeristent()));
             if (finite) {
-                for (const node of this._storageUsageNodes) {
-                    node.textContent = this._bytesToLabeledString(estimate.usage);
+                let {usage, quota} = estimate;
+                if (typeof usage !== 'number') { usage = 0; }
+                if (typeof quota !== 'number') { quota = 0; }
+                const usageString = this._bytesToLabeledString(usage);
+                const quotaString = this._bytesToLabeledString(quota);
+                for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._storageUsageNodes)) {
+                    node.textContent = usageString;
                 }
-                for (const node of this._storageQuotaNodes) {
-                    node.textContent = this._bytesToLabeledString(estimate.quota);
+                for (const node of /** @type {NodeListOf<HTMLElement>} */ (this._storageQuotaNodes)) {
+                    node.textContent = quotaString;
                 }
             }
 
@@ -80,8 +103,6 @@ export class StorageController {
             this._setElementsVisible(this._storageUseInfiniteNodes, valid && !finite);
             this._setElementsVisible(this._storageUseValidNodes, valid);
             this._setElementsVisible(this._storageUseInvalidNodes, !valid);
-
-            return valid;
         } finally {
             this._isUpdating = false;
         }
@@ -89,6 +110,9 @@ export class StorageController {
 
     // Private
 
+    /**
+     * @returns {Promise<?StorageEstimate>}
+     */
     async _storageEstimate() {
         if (this._storageEstimateFailed && this._mostRecentStorageEstimate === null) {
             return null;
@@ -103,6 +127,10 @@ export class StorageController {
         return null;
     }
 
+    /**
+     * @param {number} size
+     * @returns {string}
+     */
     _bytesToLabeledString(size) {
         const base = 1000;
         const labels = [' bytes', 'KB', 'MB', 'GB', 'TB'];
@@ -116,7 +144,12 @@ export class StorageController {
         return `${label}${labels[labelIndex]}`;
     }
 
+    /**
+     * @param {?NodeListOf<HTMLElement>} elements
+     * @param {boolean} visible
+     */
     _setElementsVisible(elements, visible) {
+        if (elements === null) { return; }
         visible = !visible;
         for (const element of elements) {
             element.hidden = visible;
diff --git a/ext/js/pages/settings/translation-text-replacements-controller.js b/ext/js/pages/settings/translation-text-replacements-controller.js
index 4a860b52..050db8d1 100644
--- a/ext/js/pages/settings/translation-text-replacements-controller.js
+++ b/ext/js/pages/settings/translation-text-replacements-controller.js
@@ -19,15 +19,22 @@
 import {EventListenerCollection} from '../../core.js';
 
 export class TranslationTextReplacementsController {
+    /**
+     * @param {import('./settings-controller.js').SettingsController} settingsController
+     */
     constructor(settingsController) {
+        /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
+        /** @type {?HTMLElement} */
         this._entryContainer = null;
+        /** @type {TranslationTextReplacementsEntry[]} */
         this._entries = [];
     }
 
+    /** */
     async prepare() {
-        this._entryContainer = document.querySelector('#translation-text-replacement-list');
-        const addButton = document.querySelector('#translation-text-replacement-add');
+        this._entryContainer = /** @type {HTMLElement} */ (document.querySelector('#translation-text-replacement-list'));
+        const addButton = /** @type {HTMLButtonElement} */ (document.querySelector('#translation-text-replacement-add'));
 
         addButton.addEventListener('click', this._onAdd.bind(this), false);
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
@@ -35,11 +42,12 @@ export class TranslationTextReplacementsController {
         await this._updateOptions();
     }
 
-
+    /** */
     async addGroup() {
         const options = await this._settingsController.getOptions();
         const {groups} = options.translation.textReplacements;
         const newEntry = this._createNewEntry();
+        /** @type {import('settings-modifications').Modification} */
         const target = (
             (groups.length === 0) ?
             {
@@ -62,6 +70,10 @@ export class TranslationTextReplacementsController {
         await this._updateOptions();
     }
 
+    /**
+     * @param {number} index
+     * @returns {Promise<boolean>}
+     */
     async deleteGroup(index) {
         const options = await this._settingsController.getOptions();
         const {groups} = options.translation.textReplacements;
@@ -70,6 +82,7 @@ export class TranslationTextReplacementsController {
         const group0 = groups[0];
         if (index < 0 || index >= group0.length) { return false; }
 
+        /** @type {import('settings-modifications').Modification} */
         const target = (
             (group0.length > 1) ?
             {
@@ -95,6 +108,9 @@ export class TranslationTextReplacementsController {
 
     // Private
 
+    /**
+     * @param {import('settings-controller').OptionsChangedEvent} details
+     */
     _onOptionsChanged({options}) {
         for (const entry of this._entries) {
             entry.cleanup();
@@ -105,50 +121,70 @@ export class TranslationTextReplacementsController {
         if (groups.length > 0) {
             const group0 = groups[0];
             for (let i = 0, ii = group0.length; i < ii; ++i) {
-                const data = group0[i];
-                const node = this._settingsController.instantiateTemplate('translation-text-replacement-entry');
-                this._entryContainer.appendChild(node);
-                const entry = new TranslationTextReplacementsEntry(this, node, i, data);
+                const node = /** @type {HTMLElement} */ (this._settingsController.instantiateTemplate('translation-text-replacement-entry'));
+                /** @type {HTMLElement} */ (this._entryContainer).appendChild(node);
+                const entry = new TranslationTextReplacementsEntry(this, node, i);
                 this._entries.push(entry);
                 entry.prepare();
             }
         }
     }
 
+    /** */
     _onAdd() {
         this.addGroup();
     }
 
+    /** */
     async _updateOptions() {
         const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
+        const optionsContext = this._settingsController.getOptionsContext();
+        this._onOptionsChanged({options, optionsContext});
     }
 
+    /**
+     * @returns {import('settings').TranslationTextReplacementGroup}
+     */
     _createNewEntry() {
         return {pattern: '', ignoreCase: false, replacement: ''};
     }
 }
 
 class TranslationTextReplacementsEntry {
+    /**
+     * @param {TranslationTextReplacementsController} parent
+     * @param {HTMLElement} node
+     * @param {number} index
+     */
     constructor(parent, node, index) {
+        /** @type {TranslationTextReplacementsController} */
         this._parent = parent;
+        /** @type {HTMLElement} */
         this._node = node;
+        /** @type {number} */
         this._index = index;
+        /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
+        /** @type {?HTMLInputElement} */
         this._patternInput = null;
+        /** @type {?HTMLInputElement} */
         this._replacementInput = null;
+        /** @type {?HTMLInputElement} */
         this._ignoreCaseToggle = null;
+        /** @type {?HTMLInputElement} */
         this._testInput = null;
+        /** @type {?HTMLInputElement} */
         this._testOutput = null;
     }
 
+    /** */
     prepare() {
-        const patternInput = this._node.querySelector('.translation-text-replacement-pattern');
-        const replacementInput = this._node.querySelector('.translation-text-replacement-replacement');
-        const ignoreCaseToggle = this._node.querySelector('.translation-text-replacement-pattern-ignore-case');
-        const menuButton = this._node.querySelector('.translation-text-replacement-button');
-        const testInput = this._node.querySelector('.translation-text-replacement-test-input');
-        const testOutput = this._node.querySelector('.translation-text-replacement-test-output');
+        const patternInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-pattern'));
+        const replacementInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-replacement'));
+        const ignoreCaseToggle = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-pattern-ignore-case'));
+        const menuButton = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-button'));
+        const testInput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-test-input'));
+        const testOutput = /** @type {HTMLInputElement} */ (this._node.querySelector('.translation-text-replacement-test-output'));
 
         this._patternInput = patternInput;
         this._replacementInput = replacementInput;
@@ -169,6 +205,7 @@ class TranslationTextReplacementsEntry {
         this._eventListeners.addEventListener(testInput, 'input', this._updateTestInput.bind(this), false);
     }
 
+    /** */
     cleanup() {
         this._eventListeners.removeAllEventListeners();
         if (this._node.parentNode !== null) {
@@ -178,13 +215,19 @@ class TranslationTextReplacementsEntry {
 
     // Private
 
+    /**
+     * @param {import('popup-menu').MenuOpenEvent} e
+     */
     _onMenuOpen(e) {
         const bodyNode = e.detail.menu.bodyNode;
         const testVisible = this._isTestVisible();
-        bodyNode.querySelector('[data-menu-action=showTest]').hidden = testVisible;
-        bodyNode.querySelector('[data-menu-action=hideTest]').hidden = !testVisible;
+        /** @type {HTMLElement} */ (bodyNode.querySelector('[data-menu-action=showTest]')).hidden = testVisible;
+        /** @type {HTMLElement} */ (bodyNode.querySelector('[data-menu-action=hideTest]')).hidden = !testVisible;
     }
 
+    /**
+     * @param {import('popup-menu').MenuCloseEvent} e
+     */
     _onMenuClose(e) {
         switch (e.detail.action) {
             case 'remove':
@@ -199,34 +242,58 @@ class TranslationTextReplacementsEntry {
         }
     }
 
+    /**
+     * @param {import('dom-data-binder').SettingChangedEvent} deatils
+     */
     _onPatternChanged({detail: {value}}) {
         this._validatePattern(value);
         this._updateTestInput();
     }
 
+    /**
+     * @param {unknown} value
+     */
     _validatePattern(value) {
         let okay = false;
         try {
-            new RegExp(value, 'g');
-            okay = true;
+            if (typeof value === 'string') {
+                new RegExp(value, 'g');
+                okay = true;
+            }
         } catch (e) {
             // NOP
         }
 
-        this._patternInput.dataset.invalid = `${!okay}`;
+        if (this._patternInput !== null) {
+            this._patternInput.dataset.invalid = `${!okay}`;
+        }
     }
 
+    /**
+     * @returns {boolean}
+     */
     _isTestVisible() {
         return this._node.dataset.testVisible === 'true';
     }
 
+    /**
+     * @param {boolean} visible
+     */
     _setTestVisible(visible) {
         this._node.dataset.testVisible = `${visible}`;
         this._updateTestInput();
     }
 
+    /** */
     _updateTestInput() {
-        if (!this._isTestVisible()) { return; }
+        if (
+            !this._isTestVisible() ||
+            this._ignoreCaseToggle === null ||
+            this._patternInput === null ||
+            this._replacementInput === null ||
+            this._testInput === null ||
+            this._testOutput === null
+        ) { return; }
 
         const ignoreCase = this._ignoreCaseToggle.checked;
         const pattern = this._patternInput.value;