Application data refactor (#699)

* Pass tabId and frameId to Application

* Remove casts

* Remove redundant frameInformationGet calls

* Expose tabId and frameId

* Remove unsed

* Simplify

* Update FrameAncestryHandler to not need a direct frameId

* Remove frameId from FrameOffsetForwarder

* Remove frameId from PopupFactory

* Remove frameId from Frontend

* Remove frameId from PopupPreviewFrame

* Fix PopupFactory and Frontend constructor

* Remove frameId from Display

* Remove frameId from SearchDisplayController

* Restore if check

17 files changed, 99 insertions, 136 deletions

diff --git a/ext/js/app/content-script-main.js b/ext/js/app/content-script-main.js
index 23d36b48..34160fd1 100644
--- a/ext/js/app/content-script-main.js
+++ b/ext/js/app/content-script-main.js
@@ -22,21 +22,14 @@ import {Frontend} from './frontend.js';
 import {PopupFactory} from './popup-factory.js';
 
 await Application.main(async (application) => {
-    const {tabId, frameId} = await application.api.frameInformationGet();
-    if (typeof frameId !== 'number') {
-        throw new Error('Failed to get frameId');
-    }
-
     const hotkeyHandler = new HotkeyHandler();
     hotkeyHandler.prepare(application.crossFrame);
 
-    const popupFactory = new PopupFactory(application, frameId);
+    const popupFactory = new PopupFactory(application);
     popupFactory.prepare();
 
     const frontend = new Frontend({
         application,
-        tabId,
-        frameId,
         popupFactory,
         depth: 0,
         parentPopupId: null,
diff --git a/ext/js/app/frontend.js b/ext/js/app/frontend.js
index 84a8f1e6..1a3fbbe1 100644
--- a/ext/js/app/frontend.js
+++ b/ext/js/app/frontend.js
@@ -39,8 +39,6 @@ export class Frontend {
         pageType,
         popupFactory,
         depth,
-        tabId,
-        frameId,
         parentPopupId,
         parentFrameId,
         useProxyPopup,
@@ -57,10 +55,6 @@ export class Frontend {
         this._popupFactory = popupFactory;
         /** @type {number} */
         this._depth = depth;
-        /** @type {number|undefined} */
-        this._tabId = tabId;
-        /** @type {number} */
-        this._frameId = frameId;
         /** @type {?string} */
         this._parentPopupId = parentPopupId;
         /** @type {?number} */
@@ -588,8 +582,13 @@ export class Frontend {
             return null;
         }
 
+        const {frameId} = this._application;
+        if (frameId === null) {
+            return null;
+        }
+
         return await this._popupFactory.getOrCreatePopup({
-            frameId: this._frameId,
+            frameId,
             depth: this._depth,
             childrenSupported: this._childrenSupported
         });
@@ -703,12 +702,10 @@ export class Frontend {
         };
         if (sentence !== null) { detailsState.sentence = sentence; }
         if (documentTitle !== null) { detailsState.documentTitle = documentTitle; }
+        const {tabId, frameId} = this._application;
         /** @type {import('display').HistoryContent} */
         const detailsContent = {
-            contentOrigin: {
-                tabId: this._tabId,
-                frameId: this._frameId
-            }
+            contentOrigin: {tabId, frameId}
         };
         if (dictionaryEntries !== null) {
             detailsContent.dictionaryEntries = dictionaryEntries;
@@ -819,7 +816,7 @@ export class Frontend {
      */
     _signalFrontendReady(targetFrameId) {
         /** @type {import('application').ApiMessageNoFrameId<'frontendReady'>} */
-        const message = {action: 'frontendReady', params: {frameId: this._frameId}};
+        const message = {action: 'frontendReady', params: {frameId: this._application.frameId}};
         if (targetFrameId === null) {
             this._application.api.broadcastTab(message);
         } else {
@@ -867,7 +864,7 @@ export class Frontend {
             }
 
             chrome.runtime.onMessage.addListener(onMessage);
-            this._application.api.broadcastTab({action: 'frontendRequestReadyBroadcast', params: {frameId: this._frameId}});
+            this._application.api.broadcastTab({action: 'frontendRequestReadyBroadcast', params: {frameId: this._application.frameId}});
         });
     }
 
diff --git a/ext/js/app/popup-factory.js b/ext/js/app/popup-factory.js
index c5187291..4338bb3a 100644
--- a/ext/js/app/popup-factory.js
+++ b/ext/js/app/popup-factory.js
@@ -29,15 +29,12 @@ export class PopupFactory {
     /**
      * Creates a new instance.
      * @param {import('../application.js').Application} application
-     * @param {number} frameId The frame ID of the host frame.
      */
-    constructor(application, frameId) {
+    constructor(application) {
         /** @type {import('../application.js').Application} */
         this._application = application;
-        /** @type {number} */
-        this._frameId = frameId;
         /** @type {FrameOffsetForwarder} */
-        this._frameOffsetForwarder = new FrameOffsetForwarder(application.crossFrame, frameId);
+        this._frameOffsetForwarder = new FrameOffsetForwarder(application.crossFrame);
         /** @type {Map<string, import('popup').PopupAny>} */
         this._popups = new Map();
         /** @type {Map<string, {popup: import('popup').PopupAny, token: string}[]>} */
@@ -115,6 +112,9 @@ export class PopupFactory {
             depth = 0;
         }
 
+        const currentFrameId = this._application.frameId;
+        if (currentFrameId === null) { throw new Error('Cannot create popup: no frameId'); }
+
         if (popupWindow) {
             // New unique id
             if (id === null) {
@@ -124,11 +124,11 @@ export class PopupFactory {
                 application: this._application,
                 id,
                 depth,
-                frameId: this._frameId
+                frameId: currentFrameId
             });
             this._popups.set(id, popup);
             return popup;
-        } else if (frameId === this._frameId) {
+        } else if (frameId === currentFrameId) {
             // New unique id
             if (id === null) {
                 id = generateId(16);
@@ -137,7 +137,7 @@ export class PopupFactory {
                 application: this._application,
                 id,
                 depth,
-                frameId: this._frameId,
+                frameId: currentFrameId,
                 childrenSupported
             });
             if (parent !== null) {
@@ -155,13 +155,12 @@ export class PopupFactory {
                 throw new Error('Invalid frameId');
             }
             const useFrameOffsetForwarder = (parentPopupId === null);
-            /** @type {{id: string, depth: number, frameId: number}} */
-            const info = await this._application.crossFrame.invoke(frameId, 'popupFactoryGetOrCreatePopup', /** @type {import('popup-factory').GetOrCreatePopupDetails} */ ({
+            const info = await this._application.crossFrame.invoke(frameId, 'popupFactoryGetOrCreatePopup', {
                 id,
                 parentPopupId,
                 frameId,
                 childrenSupported
-            }));
+            });
             id = info.id;
             const popup = new PopupProxy({
                 application: this._application,
diff --git a/ext/js/application.js b/ext/js/application.js
index d7ab6725..7a2f216c 100644
--- a/ext/js/application.js
+++ b/ext/js/application.js
@@ -108,7 +108,6 @@ export class Application extends EventDispatcher {
      * @type {API}
      */
     get api() {
-        if (this._api === null) { throw new Error('Not prepared'); }
         return this._api;
     }
 
@@ -118,11 +117,24 @@ export class Application extends EventDispatcher {
      * @type {CrossFrameAPI}
      */
     get crossFrame() {
-        if (this._crossFrame === null) { throw new Error('Not prepared'); }
         return this._crossFrame;
     }
 
     /**
+     * @type {?number}
+     */
+    get tabId() {
+        return this._crossFrame.tabId;
+    }
+
+    /**
+     * @type {?number}
+     */
+    get frameId() {
+        return this._crossFrame.frameId;
+    }
+
+    /**
      * Prepares the instance for use.
      */
     prepare() {
@@ -157,7 +169,7 @@ export class Application extends EventDispatcher {
         const webExtension = new WebExtension();
         const api = new API(webExtension);
         await this.waitForBackendReady(webExtension);
-        const {tabId = null, frameId = null} = await api.frameInformationGet();
+        const {tabId, frameId} = await api.frameInformationGet();
         const crossFrameApi = new CrossFrameAPI(api, tabId, frameId);
         crossFrameApi.prepare();
         const application = new Application(api, crossFrameApi);
diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js
index 31191612..ccd828f6 100644
--- a/ext/js/background/backend.js
+++ b/ext/js/background/backend.js
@@ -654,7 +654,10 @@ export class Backend {
         const tab = sender.tab;
         const tabId = tab ? tab.id : void 0;
         const frameId = sender.frameId;
-        return Promise.resolve({tabId, frameId});
+        return {
+            tabId: typeof tabId === 'number' ? tabId : null,
+            frameId: typeof frameId === 'number' ? frameId : null
+        };
     }
 
     /** @type {import('api').ApiHandler<'injectStylesheet'>} */
diff --git a/ext/js/comm/cross-frame-api.js b/ext/js/comm/cross-frame-api.js
index 4b4e9419..33a91c89 100644
--- a/ext/js/comm/cross-frame-api.js
+++ b/ext/js/comm/cross-frame-api.js
@@ -313,6 +313,20 @@ export class CrossFrameAPI {
         this._frameId = frameId;
     }
 
+    /**
+     * @type {?number}
+     */
+    get tabId() {
+        return this._tabId;
+    }
+
+    /**
+     * @type {?number}
+     */
+    get frameId() {
+        return this._frameId;
+    }
+
     /** */
     prepare() {
         chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
diff --git a/ext/js/comm/frame-ancestry-handler.js b/ext/js/comm/frame-ancestry-handler.js
index 3e58d57b..92ed3b8c 100644
--- a/ext/js/comm/frame-ancestry-handler.js
+++ b/ext/js/comm/frame-ancestry-handler.js
@@ -28,13 +28,10 @@ export class FrameAncestryHandler {
     /**
      * Creates a new instance.
      * @param {import('../comm/cross-frame-api.js').CrossFrameAPI} crossFrameApi
-     * @param {number} frameId The frame ID of the current frame the instance is instantiated in.
      */
-    constructor(crossFrameApi, frameId) {
+    constructor(crossFrameApi) {
         /** @type {import('../comm/cross-frame-api.js').CrossFrameAPI} */
         this._crossFrameApi = crossFrameApi;
-        /** @type {number} */
-        this._frameId = frameId;
         /** @type {boolean} */
         this._isPrepared = false;
         /** @type {string} */
@@ -48,14 +45,6 @@ export class FrameAncestryHandler {
     }
 
     /**
-     * Gets the frame ID that the instance is instantiated in.
-     * @type {number}
-     */
-    get frameId() {
-        return this._frameId;
-    }
-
-    /**
      * Initializes event event listening.
      */
     prepare() {
@@ -116,8 +105,9 @@ export class FrameAncestryHandler {
      */
     _getFrameAncestryInfo(timeout = 5000) {
         return new Promise((resolve, reject) => {
+            const {frameId} = this._crossFrameApi;
             const targetWindow = window.parent;
-            if (window === targetWindow) {
+            if (frameId === null || window === targetWindow) {
                 resolve([]);
                 return;
             }
@@ -141,11 +131,10 @@ export class FrameAncestryHandler {
                 if (params.nonce !== nonce) { return null; }
 
                 // Add result
-                const {frameId, more} = params;
-                results.push(frameId);
+                results.push(params.frameId);
                 nonce = generateId(16);
 
-                if (!more) {
+                if (!params.more) {
                     // Cleanup
                     cleanup();
 
@@ -167,7 +156,6 @@ export class FrameAncestryHandler {
             // Start
             this._addResponseHandler(uniqueId, onMessage);
             resetTimeout();
-            const frameId = this._frameId;
             this._requestFrameInfo(targetWindow, frameId, frameId, uniqueId, nonce);
         });
     }
@@ -208,7 +196,9 @@ export class FrameAncestryHandler {
                 return;
             }
 
-            const frameId = this._frameId;
+            const {frameId} = this._crossFrameApi;
+            if (frameId === null) { return; }
+
             const {parent} = window;
             const more = (window !== parent);
 
diff --git a/ext/js/comm/frame-offset-forwarder.js b/ext/js/comm/frame-offset-forwarder.js
index fe1ff98a..59659606 100644
--- a/ext/js/comm/frame-offset-forwarder.js
+++ b/ext/js/comm/frame-offset-forwarder.js
@@ -21,15 +21,12 @@ import {FrameAncestryHandler} from './frame-ancestry-handler.js';
 export class FrameOffsetForwarder {
     /**
      * @param {import('../comm/cross-frame-api.js').CrossFrameAPI} crossFrameApi
-     * @param {number} frameId
      */
-    constructor(crossFrameApi, frameId) {
+    constructor(crossFrameApi) {
         /** @type {import('../comm/cross-frame-api.js').CrossFrameAPI} */
         this._crossFrameApi = crossFrameApi;
-        /** @type {number} */
-        this._frameId = frameId;
         /** @type {FrameAncestryHandler} */
-        this._frameAncestryHandler = new FrameAncestryHandler(crossFrameApi, frameId);
+        this._frameAncestryHandler = new FrameAncestryHandler(crossFrameApi);
     }
 
     /**
@@ -50,15 +47,18 @@ export class FrameOffsetForwarder {
             return [0, 0];
         }
 
+        const {frameId} = this._crossFrameApi;
+        if (frameId === null) { return null; }
+
         try {
             const ancestorFrameIds = await this._frameAncestryHandler.getFrameAncestryInfo();
 
-            let childFrameId = this._frameId;
+            let childFrameId = frameId;
             /** @type {Promise<?import('frame-offset-forwarder').ChildFrameRect>[]} */
             const promises = [];
-            for (const frameId of ancestorFrameIds) {
-                promises.push(this._crossFrameApi.invoke(frameId, 'frameOffsetForwarderGetChildFrameRect', {frameId: childFrameId}));
-                childFrameId = frameId;
+            for (const ancestorFrameId of ancestorFrameIds) {
+                promises.push(this._crossFrameApi.invoke(ancestorFrameId, 'frameOffsetForwarderGetChildFrameRect', {frameId: childFrameId}));
+                childFrameId = ancestorFrameId;
             }
 
             const results = await Promise.all(promises);
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index d30ed8a0..f1cd4caf 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -46,20 +46,14 @@ import {QueryParser} from './query-parser.js';
 export class Display extends EventDispatcher {
     /**
      * @param {import('../application.js').Application} application
-     * @param {number|undefined} tabId
-     * @param {number|undefined} frameId
      * @param {import('display').DisplayPageType} pageType
      * @param {import('../dom/document-focus-controller.js').DocumentFocusController} documentFocusController
      * @param {import('../input/hotkey-handler.js').HotkeyHandler} hotkeyHandler
      */
-    constructor(application, tabId, frameId, pageType, documentFocusController, hotkeyHandler) {
+    constructor(application, pageType, documentFocusController, hotkeyHandler) {
         super();
         /** @type {import('../application.js').Application} */
         this._application = application;
-        /** @type {number|undefined} */
-        this._tabId = tabId;
-        /** @type {number|undefined} */
-        this._frameId = frameId;
         /** @type {import('display').DisplayPageType} */
         this._pageType = pageType;
         /** @type {import('../dom/document-focus-controller.js').DocumentFocusController} */
@@ -159,10 +153,10 @@ export class Display extends EventDispatcher {
         this._parentPopupId = null;
         /** @type {?number} */
         this._parentFrameId = null;
-        /** @type {number|undefined} */
-        this._contentOriginTabId = tabId;
-        /** @type {number|undefined} */
-        this._contentOriginFrameId = frameId;
+        /** @type {?number} */
+        this._contentOriginTabId = application.tabId;
+        /** @type {?number} */
+        this._contentOriginFrameId = application.frameId;
         /** @type {boolean} */
         this._childrenSupported = true;
         /** @type {?FrameEndpoint} */
@@ -588,10 +582,10 @@ export class Display extends EventDispatcher {
      * @returns {Promise<import('cross-frame-api').ApiReturn<TName>>}
      */
     async invokeContentOrigin(action, params) {
-        if (this._contentOriginTabId === this._tabId && this._contentOriginFrameId === this._frameId) {
+        if (this._contentOriginTabId === this._application.tabId && this._contentOriginFrameId === this._application.frameId) {
             throw new Error('Content origin is same page');
         }
-        if (typeof this._contentOriginTabId !== 'number' || typeof this._contentOriginFrameId !== 'number') {
+        if (this._contentOriginTabId === null || this._contentOriginFrameId === null) {
             throw new Error('No content origin is assigned');
         }
         return await this._application.crossFrame.invokeTab(this._contentOriginTabId, this._contentOriginFrameId, action, params);
@@ -604,7 +598,8 @@ export class Display extends EventDispatcher {
      * @returns {Promise<import('cross-frame-api').ApiReturn<TName>>}
      */
     async invokeParentFrame(action, params) {
-        if (this._parentFrameId === null || this._parentFrameId === this._frameId) {
+        const {frameId} = this._application;
+        if (frameId === null || this._parentFrameId === null || this._parentFrameId === frameId) {
             throw new Error('Invalid parent frame');
         }
         return await this._application.crossFrame.invoke(this._parentFrameId, action, params);
@@ -832,6 +827,7 @@ export class Display extends EventDispatcher {
     _onExtensionUnloaded() {
         const type = 'unloaded';
         if (this._contentType === type) { return; }
+        const {tabId, frameId} = this._application;
         /** @type {import('display').ContentDetails} */
         const details = {
             focus: false,
@@ -839,10 +835,7 @@ export class Display extends EventDispatcher {
             params: {type},
             state: {},
             content: {
-                contentOrigin: {
-                    tabId: this._tabId,
-                    frameId: this._frameId
-                }
+                contentOrigin: {tabId, frameId}
             }
         };
         this.setContent(details);
@@ -1222,7 +1215,7 @@ export class Display extends EventDispatcher {
         const {contentOrigin} = content;
         if (typeof contentOrigin === 'object' && contentOrigin !== null) {
             const {tabId, frameId} = contentOrigin;
-            if (typeof tabId === 'number' && typeof frameId === 'number') {
+            if (tabId !== null && frameId !== null) {
                 this._contentOriginTabId = tabId;
                 this._contentOriginFrameId = frameId;
                 contentOriginValid = true;
@@ -1673,12 +1666,12 @@ export class Display extends EventDispatcher {
      * @param {import('settings').ProfileOptions} options
      */
     async _updateNestedFrontend(options) {
-        if (typeof this._frameId !== 'number') { return; }
+        const {tabId, frameId} = this._application;
+        if (tabId === null || frameId === null) { return; }
 
         const isSearchPage = (this._pageType === 'search');
         const isEnabled = (
             this._childrenSupported &&
-            typeof this._tabId === 'number' &&
             (
                 (isSearchPage) ?
                 (options.scanning.enableOnSearchPage) :
@@ -1707,10 +1700,6 @@ export class Display extends EventDispatcher {
 
     /** */
     async _setupNestedFrontend() {
-        if (typeof this._frameId !== 'number') {
-            throw new Error('No frameId assigned');
-        }
-
         const useProxyPopup = this._parentFrameId !== null;
         const parentPopupId = this._parentPopupId;
         const parentFrameId = this._parentFrameId;
@@ -1720,7 +1709,7 @@ export class Display extends EventDispatcher {
             import('../app/frontend.js')
         ]);
 
-        const popupFactory = new PopupFactory(this._application, this._frameId);
+        const popupFactory = new PopupFactory(this._application);
         popupFactory.prepare();
 
         /** @type {import('frontend').ConstructorDetails} */
@@ -1730,8 +1719,6 @@ export class Display extends EventDispatcher {
             parentPopupId,
             parentFrameId,
             depth: this._depth + 1,
-            tabId: this._tabId,
-            frameId: this._frameId,
             popupFactory,
             pageType: this._pageType,
             allowRootFramePopupProxy: true,
diff --git a/ext/js/display/popup-main.js b/ext/js/display/popup-main.js
index a244c2e0..8f92aaa8 100644
--- a/ext/js/display/popup-main.js
+++ b/ext/js/display/popup-main.js
@@ -29,12 +29,10 @@ await Application.main(async (application) => {
     const documentFocusController = new DocumentFocusController();
     documentFocusController.prepare();
 
-    const {tabId, frameId} = await application.api.frameInformationGet();
-
     const hotkeyHandler = new HotkeyHandler();
     hotkeyHandler.prepare(application.crossFrame);
 
-    const display = new Display(application, tabId, frameId, 'popup', documentFocusController, hotkeyHandler);
+    const display = new Display(application, 'popup', documentFocusController, hotkeyHandler);
     await display.prepare();
 
     const displayAudio = new DisplayAudio(display);
diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 6767dce7..4b8141e1 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -24,17 +24,11 @@ import {querySelectorNotNull} from '../dom/query-selector.js';
 
 export class SearchDisplayController {
     /**
-     * @param {number|undefined} tabId
-     * @param {number|undefined} frameId
      * @param {import('./display.js').Display} display
      * @param {import('./display-audio.js').DisplayAudio} displayAudio
      * @param {import('./search-persistent-state-controller.js').SearchPersistentStateController} searchPersistentStateController
      */
-    constructor(tabId, frameId, display, displayAudio, searchPersistentStateController) {
-        /** @type {number|undefined} */
-        this._tabId = tabId;
-        /** @type {number|undefined} */
-        this._frameId = frameId;
+    constructor(display, displayAudio, searchPersistentStateController) {
         /** @type {import('./display.js').Display} */
         this._display = display;
         /** @type {import('./display-audio.js').DisplayAudio} */
@@ -519,6 +513,7 @@ export class SearchDisplayController {
         if (flags !== null) {
             optionsContext.flags = flags;
         }
+        const {tabId, frameId} = this._display.application;
         /** @type {import('display').ContentDetails} */
         const details = {
             focus: false,
@@ -536,10 +531,7 @@ export class SearchDisplayController {
             content: {
                 dictionaryEntries: void 0,
                 animate,
-                contentOrigin: {
-                    tabId: this._tabId,
-                    frameId: this._frameId
-                }
+                contentOrigin: {tabId, frameId}
             }
         };
         if (!lookup) { details.params.lookup = 'false'; }
diff --git a/ext/js/display/search-main.js b/ext/js/display/search-main.js
index 5c6a31ca..fd90ee0e 100644
--- a/ext/js/display/search-main.js
+++ b/ext/js/display/search-main.js
@@ -36,12 +36,10 @@ await Application.main(async (application) => {
     const searchActionPopupController = new SearchActionPopupController(searchPersistentStateController);
     searchActionPopupController.prepare();
 
-    const {tabId, frameId} = await application.api.frameInformationGet();
-
     const hotkeyHandler = new HotkeyHandler();
     hotkeyHandler.prepare(application.crossFrame);
 
-    const display = new Display(application, tabId, frameId, 'search', documentFocusController, hotkeyHandler);
+    const display = new Display(application, 'search', documentFocusController, hotkeyHandler);
     await display.prepare();
 
     const displayAudio = new DisplayAudio(display);
@@ -50,7 +48,7 @@ await Application.main(async (application) => {
     const displayAnki = new DisplayAnki(display, displayAudio);
     displayAnki.prepare();
 
-    const searchDisplayController = new SearchDisplayController(tabId, frameId, display, displayAudio, searchPersistentStateController);
+    const searchDisplayController = new SearchDisplayController(display, displayAudio, searchPersistentStateController);
     await searchDisplayController.prepare();
 
     display.initializeState();
diff --git a/ext/js/pages/settings/popup-preview-frame-main.js b/ext/js/pages/settings/popup-preview-frame-main.js
index cffbf01b..c6c694cd 100644
--- a/ext/js/pages/settings/popup-preview-frame-main.js
+++ b/ext/js/pages/settings/popup-preview-frame-main.js
@@ -22,21 +22,13 @@ import {HotkeyHandler} from '../../input/hotkey-handler.js';
 import {PopupPreviewFrame} from './popup-preview-frame.js';
 
 await Application.main(async (application) => {
-    const {tabId, frameId} = await application.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(application.crossFrame);
 
-    const popupFactory = new PopupFactory(application, frameId);
+    const popupFactory = new PopupFactory(application);
     popupFactory.prepare();
 
-    const preview = new PopupPreviewFrame(application, tabId, frameId, popupFactory, hotkeyHandler);
+    const preview = new PopupPreviewFrame(application, popupFactory, hotkeyHandler);
     await preview.prepare();
 
     document.documentElement.dataset.loaded = 'true';
diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js
index 1ad4859b..2898eaa2 100644
--- a/ext/js/pages/settings/popup-preview-frame.js
+++ b/ext/js/pages/settings/popup-preview-frame.js
@@ -24,18 +24,12 @@ import {TextSourceRange} from '../../dom/text-source-range.js';
 export class PopupPreviewFrame {
     /**
      * @param {import('../../application.js').Application} application
-     * @param {number} tabId
-     * @param {number} frameId
      * @param {import('../../app/popup-factory.js').PopupFactory} popupFactory
      * @param {import('../../input/hotkey-handler.js').HotkeyHandler} hotkeyHandler
      */
-    constructor(application, tabId, frameId, popupFactory, hotkeyHandler) {
+    constructor(application, popupFactory, hotkeyHandler) {
         /** @type {import('../../application.js').Application} */
         this._application = application;
-        /** @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} */
@@ -94,8 +88,6 @@ export class PopupPreviewFrame {
         // Overwrite frontend
         this._frontend = new Frontend({
             application: this._application,
-            tabId: this._tabId,
-            frameId: this._frameId,
             popupFactory: this._popupFactory,
             depth: 0,
             parentPopupId: null,
diff --git a/types/ext/application.d.ts b/types/ext/application.d.ts
index 930220f0..96f76714 100644
--- a/types/ext/application.d.ts
+++ b/types/ext/application.d.ts
@@ -81,7 +81,7 @@ export type ApiSurface = {
     };
     frontendRequestReadyBroadcast: {
         params: {
-            frameId: number;
+            frameId: number | null;
         };
         return: void;
     };
@@ -101,7 +101,7 @@ export type ApiSurface = {
     };
     frontendReady: {
         params: {
-            frameId: number;
+            frameId: number | null;
         };
         return: void;
     };
diff --git a/types/ext/extension.d.ts b/types/ext/extension.d.ts
index dc4657f0..c5e34d61 100644
--- a/types/ext/extension.d.ts
+++ b/types/ext/extension.d.ts
@@ -18,8 +18,8 @@
 export type HtmlElementWithContentWindow = HTMLIFrameElement | HTMLFrameElement | HTMLObjectElement;
 
 export type ContentOrigin = {
-    tabId?: number;
-    frameId?: number;
+    tabId: number | null;
+    frameId: number | null;
 };
 
 export type ChromeRuntimeOnMessageCallback<TMessage = unknown> = (
diff --git a/types/ext/frontend.d.ts b/types/ext/frontend.d.ts
index 17f3d121..ca07e30c 100644
--- a/types/ext/frontend.d.ts
+++ b/types/ext/frontend.d.ts
@@ -29,10 +29,6 @@ export type ConstructorDetails = {
     popupFactory: PopupFactory;
     /** The nesting depth value of the popup. */
     depth: number;
-    /** The tab ID of the host tab. */
-    tabId: number | undefined;
-    /** The frame ID of the host frame. */
-    frameId: number;
     /** The popup ID of the parent popup if one exists, otherwise null. */
     parentPopupId: string | null;
     /** The frame ID of the parent popup if one exists, otherwise null. */