Frontend initialization refactor (#610)

* Create member functions for ignoreElements and ignorePoint

* Create addFullscreenChangeEventListener utility

* Move popup creation management into Frontend

* Move getUrl implementation

* Remove old setup

* Remove try/catch block

* Error wrap

* Add prepare call to TextScanner

* Update depth when popup changes

* Refactor how Frontend gets PopupFactory and frameId

* Update popup preview to work

* Update popup preview frame to use the frontend's popup

* Update how nested popups are set up

* Error wrap

* Update how popups are set up on the search page

* Error wrap

* Error unwrap

* Add missing prepare

* Remove use of frontendInitializationData

* Catch and log errors

ext/bg/js/search-main.js

@@ -18,42 +18,16 @@
 /* global
  * DisplaySearch
  * api
- * dynamicLoader
  */
 
-async function injectSearchFrontend() {
-    await dynamicLoader.loadScripts([
-        '/mixed/js/text-scanner.js',
-        '/fg/js/frame-offset-forwarder.js',
-        '/fg/js/popup.js',
-        '/fg/js/popup-factory.js',
-        '/fg/js/frontend.js',
-        '/fg/js/content-script-main.js'
-    ]);
-}
-
 (async () => {
-    api.forwardLogsToBackend();
+    try {
-    await yomichan.prepare();
+        api.forwardLogsToBackend();
+        await yomichan.prepare();
 
-    const displaySearch = new DisplaySearch();
+        const displaySearch = new DisplaySearch();
-    await displaySearch.prepare();
+        await displaySearch.prepare();
-
+    } catch (e) {
-    let optionsApplied = false;
+        yomichan.logError(e);
-
+    }
-    const applyOptions = async () => {
-        const optionsContext = {depth: 0, url: window.location.href};
-        const options = await api.optionsGet(optionsContext);
-        if (!options.scanning.enableOnSearchPage || optionsApplied) { return; }
-
-        optionsApplied = true;
-        yomichan.off('optionsUpdated', applyOptions);
-
-        window.frontendInitializationData = {depth: 1, proxy: false, isSearchPage: true};
-        await injectSearchFrontend();
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-
-    await applyOptions();
 })();

ext/bg/js/search-query-parser.js

@@ -42,6 +42,7 @@ class QueryParser {
 
     async prepare() {
         await this._queryParserGenerator.prepare();
+        this._textScanner.prepare();
         this._queryParser.addEventListener('click', this._onClick.bind(this));
     }
 

ext/bg/js/search.js

@@ -19,8 +19,11 @@
  * ClipboardMonitor
  * DOM
  * Display
+ * Frontend
+ * PopupFactory
  * QueryParser
  * api
+ * dynamicLoader
  * wanakana
  */
 
@@ -73,51 +76,49 @@ class DisplaySearch extends Display {
     }
 
     async prepare() {
-        try {
+        await super.prepare();
-            await super.prepare();
+        await this.updateOptions();
-            await this.updateOptions();
+        yomichan.on('optionsUpdated', () => this.updateOptions());
-            yomichan.on('optionsUpdated', () => this.updateOptions());
+        await this.queryParser.prepare();
-            await this.queryParser.prepare();
 
-            const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
+        const {queryParams: {query='', mode=''}} = parseUrl(window.location.href);
 
-            document.documentElement.dataset.searchMode = mode;
+        document.documentElement.dataset.searchMode = mode;
 
-            if (this.options.general.enableWanakana === true) {
+        if (this.options.general.enableWanakana === true) {
-                this.wanakanaEnable.checked = true;
+            this.wanakanaEnable.checked = true;
-                wanakana.bind(this.query);
+            wanakana.bind(this.query);
-            } else {
+        } else {
-                this.wanakanaEnable.checked = false;
+            this.wanakanaEnable.checked = false;
-            }
-
-            this.setQuery(query);
-            this.onSearchQueryUpdated(this.query.value, false);
-
-            if (mode !== 'popup') {
-                if (this.options.general.enableClipboardMonitor === true) {
-                    this.clipboardMonitorEnable.checked = true;
-                    this.clipboardMonitor.start();
-                } else {
-                    this.clipboardMonitorEnable.checked = false;
-                }
-                this.clipboardMonitorEnable.addEventListener('change', this.onClipboardMonitorEnableChange.bind(this));
-            }
-
-            chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
-
-            this.search.addEventListener('click', this.onSearch.bind(this), false);
-            this.query.addEventListener('input', this.onSearchInput.bind(this), false);
-            this.wanakanaEnable.addEventListener('change', this.onWanakanaEnableChange.bind(this));
-            window.addEventListener('popstate', this.onPopState.bind(this));
-            window.addEventListener('copy', this.onCopy.bind(this));
-            this.clipboardMonitor.on('change', this.onExternalSearchUpdate.bind(this));
-
-            this.updateSearchButton();
-
-            this._isPrepared = true;
-        } catch (e) {
-            this.onError(e);
         }
+
+        this.setQuery(query);
+        this.onSearchQueryUpdated(this.query.value, false);
+
+        if (mode !== 'popup') {
+            if (this.options.general.enableClipboardMonitor === true) {
+                this.clipboardMonitorEnable.checked = true;
+                this.clipboardMonitor.start();
+            } else {
+                this.clipboardMonitorEnable.checked = false;
+            }
+            this.clipboardMonitorEnable.addEventListener('change', this.onClipboardMonitorEnableChange.bind(this));
+        }
+
+        chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
+
+        this.search.addEventListener('click', this.onSearch.bind(this), false);
+        this.query.addEventListener('input', this.onSearchInput.bind(this), false);
+        this.wanakanaEnable.addEventListener('change', this.onWanakanaEnableChange.bind(this));
+        window.addEventListener('popstate', this.onPopState.bind(this));
+        window.addEventListener('copy', this.onCopy.bind(this));
+        this.clipboardMonitor.on('change', this.onExternalSearchUpdate.bind(this));
+
+        this.updateSearchButton();
+
+        await this._prepareNestedPopups();
+
+        this._isPrepared = true;
     }
 
     onError(error) {
@@ -401,4 +402,53 @@ class DisplaySearch extends Display {
             document.title = `${text} - Yomichan Search`;
         }
     }
+
+    async _prepareNestedPopups() {
+        let complete = false;
+
+        const onOptionsUpdated = async () => {
+            const optionsContext = this.getOptionsContext();
+            const options = await api.optionsGet(optionsContext);
+            if (!options.scanning.enableOnSearchPage || complete) { return; }
+
+            complete = true;
+            yomichan.off('optionsUpdated', onOptionsUpdated);
+
+            try {
+                await this._setupNestedPopups();
+            } catch (e) {
+                yomichan.logError(e);
+            }
+        };
+
+        yomichan.on('optionsUpdated', onOptionsUpdated);
+
+        await onOptionsUpdated();
+    }
+
+    async _setupNestedPopups() {
+        await dynamicLoader.loadScripts([
+            '/mixed/js/text-scanner.js',
+            '/fg/js/frame-offset-forwarder.js',
+            '/fg/js/popup.js',
+            '/fg/js/popup-factory.js',
+            '/fg/js/frontend.js'
+        ]);
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {
+                depth: 1,
+                proxy: false,
+                isSearchPage: true
+            }
+        );
+        await frontend.prepare();
+    }
 }

ext/bg/js/settings/popup-preview-frame-main.js

@@ -16,12 +16,23 @@
  */
 
 /* global
+ * PopupFactory
  * PopupPreviewFrame
  * api
  */
 
 (async () => {
-    api.forwardLogsToBackend();
+    try {
-    const preview = new PopupPreviewFrame();
+        api.forwardLogsToBackend();
-    await preview.prepare();
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const preview = new PopupPreviewFrame(frameId, popupFactory);
+        await preview.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();

ext/bg/js/settings/popup-preview-frame.js

@@ -18,17 +18,17 @@
 /* global
  * Frontend
  * Popup
- * PopupFactory
  * TextSourceRange
  * api
  */
 
 class PopupPreviewFrame {
-    constructor() {
+    constructor(frameId, popupFactory) {
+        this._frameId = frameId;
+        this._popupFactory = popupFactory;
         this._frontend = null;
         this._frontendGetOptionsContextOld = null;
         this._apiOptionsGetOld = null;
-        this._popup = null;
         this._popupSetCustomOuterCssOld = null;
         this._popupShown = false;
         this._themeChangeTimeout = null;
@@ -55,24 +55,25 @@ class PopupPreviewFrame {
         api.optionsGet = this._apiOptionsGet.bind(this);
 
         // Overwrite frontend
-        const {frameId} = await api.frameInformationGet();
+        this._frontend = new Frontend(
-
+            this._frameId,
-        const popupFactory = new PopupFactory(frameId);
+            this._popupFactory,
-        await popupFactory.prepare();
+            {
-
+                allowRootFramePopupProxy: false
-        this._popup = popupFactory.getOrCreatePopup();
+            }
-        this._popup.setChildrenSupported(false);
+        );
-
-        this._popupSetCustomOuterCssOld = this._popup.setCustomOuterCss.bind(this._popup);
-        this._popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
-
-        this._frontend = new Frontend(this._popup);
         this._frontendGetOptionsContextOld = this._frontend.getOptionsContext.bind(this._frontend);
         this._frontend.getOptionsContext = this._getOptionsContext.bind(this);
         await this._frontend.prepare();
         this._frontend.setDisabledOverride(true);
         this._frontend.canClearSelection = false;
 
+        const popup = this._frontend.popup;
+        popup.setChildrenSupported(false);
+
+        this._popupSetCustomOuterCssOld = popup.setCustomOuterCss.bind(popup);
+        popup.setCustomOuterCss = this._popupSetCustomOuterCss.bind(this);
+
         // Update search
         this._updateSearch();
     }
@@ -132,7 +133,9 @@ class PopupPreviewFrame {
         }
         this._themeChangeTimeout = setTimeout(() => {
             this._themeChangeTimeout = null;
-            this._popup.updateTheme();
+            const popup = this._frontend.popup;
+            if (popup === null) { return; }
+            popup.updateTheme();
         }, 300);
     }
 
@@ -154,12 +157,16 @@ class PopupPreviewFrame {
 
     _setCustomCss({css}) {
         if (this._frontend === null) { return; }
-        this._popup.setCustomCss(css);
+        const popup = this._frontend.popup;
+        if (popup === null) { return; }
+        popup.setCustomCss(css);
     }
 
     _setCustomOuterCss({css}) {
         if (this._frontend === null) { return; }
-        this._popup.setCustomOuterCss(css, false);
+        const popup = this._frontend.popup;
+        if (popup === null) { return; }
+        popup.setCustomOuterCss(css, false);
     }
 
     async _updateOptionsContext({optionsContext}) {
@@ -188,7 +195,8 @@ class PopupPreviewFrame {
         this._textSource = source;
         await this._frontend.showContentCompleted();
 
-        if (this._popup.isVisibleSync()) {
+        const popup = this._frontend.popup;
+        if (popup !== null && popup.isVisibleSync()) {
             this._popupShown = true;
         }
 

ext/bg/settings-popup-preview.html

@@ -131,6 +131,7 @@
         <script src="/fg/js/source.js"></script>
         <script src="/fg/js/popup-factory.js"></script>
         <script src="/fg/js/frontend.js"></script>
+        <script src="/fg/js/frame-offset-forwarder.js"></script>
         <script src="/bg/js/settings/popup-preview-frame.js"></script>
 
         <script src="/bg/js/settings/popup-preview-frame-main.js"></script>

ext/fg/js/content-script-main.js

@@ -16,147 +16,31 @@
  */
 
 /* global
- * DOM
- * FrameOffsetForwarder
  * Frontend
  * PopupFactory
- * PopupProxy
  * api
  */
 
-async function createPopupFactory() {
-    const {frameId} = await api.frameInformationGet();
-    if (typeof frameId !== 'number') {
-        const error = new Error('Failed to get frameId');
-        yomichan.logError(error);
-        throw error;
-    }
-
-    const popupFactory = new PopupFactory(frameId);
-    await popupFactory.prepare();
-    return popupFactory;
-}
-
-async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
-    const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
-        chrome.runtime.onMessage,
-        ({action, params}, {resolve}) => {
-            if (action === 'rootPopupInformation') {
-                resolve(params);
-            }
-        }
-    );
-    api.broadcastTab('rootPopupRequestInformationBroadcast');
-    const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
-
-    const popup = new PopupProxy(popupId, 0, null, parentFrameId, frameOffsetForwarder);
-    popup.on('offsetNotFound', setDisabled);
-    await popup.prepare();
-
-    return popup;
-}
-
-async function getOrCreatePopup(depth, popupFactory) {
-    return popupFactory.getOrCreatePopup(null, null, depth);
-}
-
-async function createPopupProxy(depth, id, parentFrameId) {
-    const popup = new PopupProxy(null, depth + 1, id, parentFrameId);
-    await popup.prepare();
-
-    return popup;
-}
-
 (async () => {
-    api.forwardLogsToBackend();
+    try {
-    await yomichan.prepare();
+        api.forwardLogsToBackend();
+        await yomichan.prepare();
 
-    const data = window.frontendInitializationData || {};
+        const {frameId} = await api.frameInformationGet();
-    const {id, depth=0, parentFrameId, url=window.location.href, proxy=false, isSearchPage=false} = data;
+        if (typeof frameId !== 'number') {
-
+            throw new Error('Failed to get frameId');
-    const isIframe = !proxy && (window !== window.parent);
-
-    const popups = {
-        iframe: null,
-        proxy: null,
-        normal: null
-    };
-
-    let frontend = null;
-    let frontendPreparePromise = null;
-    let frameOffsetForwarder = null;
-    let popupFactoryPromise = null;
-
-    let iframePopupsInRootFrameAvailable = true;
-
-    const disableIframePopupsInRootFrame = () => {
-        iframePopupsInRootFrameAvailable = false;
-        applyOptions();
-    };
-
-    let urlUpdatedAt = 0;
-    let popupProxyUrlCached = url;
-    const getPopupProxyUrl = async () => {
-        const now = Date.now();
-        if (popups.proxy !== null && now - urlUpdatedAt > 500) {
-            popupProxyUrlCached = await popups.proxy.getUrl();
-            urlUpdatedAt = now;
-        }
-        return popupProxyUrlCached;
-    };
-
-    const applyOptions = async () => {
-        const optionsContext = {
-            depth: isSearchPage ? 0 : depth,
-            url: proxy ? await getPopupProxyUrl() : window.location.href
-        };
-        const options = await api.optionsGet(optionsContext);
-
-        if (!proxy && frameOffsetForwarder === null) {
-            frameOffsetForwarder = new FrameOffsetForwarder();
-            frameOffsetForwarder.prepare();
         }
 
-        let popup;
+        const popupFactory = new PopupFactory(frameId);
-        if (isIframe && options.general.showIframePopupsInRootFrame && DOM.getFullscreenElement() === null && iframePopupsInRootFrameAvailable) {
+        await popupFactory.prepare();
-            popup = popups.iframe || await createIframePopupProxy(frameOffsetForwarder, disableIframePopupsInRootFrame);
-            popups.iframe = popup;
-        } else if (proxy) {
-            popup = popups.proxy || await createPopupProxy(depth, id, parentFrameId);
-            popups.proxy = popup;
-        } else {
-            popup = popups.normal;
-            if (!popup) {
-                if (popupFactoryPromise === null) {
-                    popupFactoryPromise = createPopupFactory();
-                }
-                const popupFactory = await popupFactoryPromise;
-                const popupNormal = await getOrCreatePopup(depth, popupFactory);
-                popups.normal = popupNormal;
-                popup = popupNormal;
-            }
-        }
 
-        if (frontend === null) {
+        const frontend = new Frontend(
-            const getUrl = proxy ? getPopupProxyUrl : null;
+            frameId,
-            frontend = new Frontend(popup, getUrl);
+            popupFactory,
-            frontendPreparePromise = frontend.prepare();
+            {}
-            await frontendPreparePromise;
+        );
-        } else {
+        await frontend.prepare();
-            await frontendPreparePromise;
+    } catch (e) {
-            if (isSearchPage) {
+        yomichan.logError(e);
-                const disabled = !options.scanning.enableOnSearchPage;
+    }
-                frontend.setDisabledOverride(disabled);
-            }
-
-            if (isIframe) {
-                await frontend.setPopup(popup);
-            }
-        }
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-    window.addEventListener('fullscreenchange', applyOptions, false);
-
-    await applyOptions();
 })();

ext/fg/js/float-main.js

@@ -18,42 +18,15 @@
 /* global
  * DisplayFloat
  * api
- * dynamicLoader
  */
 
-async function injectPopupNested() {
-    await dynamicLoader.loadScripts([
-        '/mixed/js/text-scanner.js',
-        '/fg/js/popup.js',
-        '/fg/js/popup-proxy.js',
-        '/fg/js/frontend.js',
-        '/fg/js/content-script-main.js'
-    ]);
-}
-
-async function popupNestedInitialize(id, depth, parentFrameId, url) {
-    let optionsApplied = false;
-
-    const applyOptions = async () => {
-        const optionsContext = {depth, url};
-        const options = await api.optionsGet(optionsContext);
-        const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
-        if (maxPopupDepthExceeded || optionsApplied) { return; }
-
-        optionsApplied = true;
-        yomichan.off('optionsUpdated', applyOptions);
-
-        window.frontendInitializationData = {id, depth, parentFrameId, url, proxy: true};
-        await injectPopupNested();
-    };
-
-    yomichan.on('optionsUpdated', applyOptions);
-
-    await applyOptions();
-}
-
 (async () => {
-    api.forwardLogsToBackend();
+    try {
-    const display = new DisplayFloat();
+        api.forwardLogsToBackend();
-    await display.prepare();
+
+        const display = new DisplayFloat();
+        await display.prepare();
+    } catch (e) {
+        yomichan.logError(e);
+    }
 })();

ext/fg/js/float.js

@@ -17,8 +17,10 @@
 
 /* global
  * Display
+ * Frontend
+ * PopupFactory
  * api
- * popupNestedInitialize
+ * dynamicLoader
  */
 
 class DisplayFloat extends Display {
@@ -30,7 +32,7 @@ class DisplayFloat extends Display {
         this._token = null;
 
         this._orphaned = false;
-        this._initializedNestedPopups = false;
+        this._nestedPopupsPrepared = false;
 
         this._onKeyDownHandlers = new Map([
             ['C', (e) => {
@@ -183,10 +185,10 @@ class DisplayFloat extends Display {
 
         await this.updateOptions();
 
-        if (childrenSupported && !this._initializedNestedPopups) {
+        if (childrenSupported && !this._nestedPopupsPrepared) {
             const {depth, url} = optionsContext;
-            popupNestedInitialize(popupId, depth, frameId, url);
+            this._prepareNestedPopups(popupId, depth, frameId, url);
-            this._initializedNestedPopups = true;
+            this._nestedPopupsPrepared = true;
         }
 
         this.setContentScale(scale);
@@ -201,4 +203,57 @@ class DisplayFloat extends Display {
             this._secret === message.secret
         );
     }
+
+    async _prepareNestedPopups(id, depth, parentFrameId, url) {
+        let complete = false;
+
+        const onOptionsUpdated = async () => {
+            const optionsContext = this.optionsContext;
+            const options = await api.optionsGet(optionsContext);
+            const maxPopupDepthExceeded = !(typeof depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
+            if (maxPopupDepthExceeded || complete) { return; }
+
+            complete = true;
+            yomichan.off('optionsUpdated', onOptionsUpdated);
+
+            try {
+                await this._setupNestedPopups(id, depth, parentFrameId, url);
+            } catch (e) {
+                yomichan.logError(e);
+            }
+        };
+
+        yomichan.on('optionsUpdated', onOptionsUpdated);
+
+        await onOptionsUpdated();
+    }
+
+    async _setupNestedPopups(id, depth, parentFrameId, url) {
+        await dynamicLoader.loadScripts([
+            '/mixed/js/text-scanner.js',
+            '/fg/js/popup.js',
+            '/fg/js/popup-proxy.js',
+            '/fg/js/popup-factory.js',
+            '/fg/js/frame-offset-forwarder.js',
+            '/fg/js/frontend.js'
+        ]);
+
+        const {frameId} = await api.frameInformationGet();
+
+        const popupFactory = new PopupFactory(frameId);
+        await popupFactory.prepare();
+
+        const frontend = new Frontend(
+            frameId,
+            popupFactory,
+            {
+                id,
+                depth,
+                parentFrameId,
+                url,
+                proxy: true
+            }
+        );
+        await frontend.prepare();
+    }
 }

ext/fg/js/frontend.js

@@ -16,16 +16,18 @@
  */
 
 /* global
+ * DOM
+ * FrameOffsetForwarder
+ * PopupProxy
  * TextScanner
  * api
  * docSentenceExtract
  */
 
 class Frontend {
-    constructor(popup, getUrl=null) {
+    constructor(frameId, popupFactory, frontendInitializationData) {
         this._id = yomichan.generateId(16);
-        this._popup = popup;
+        this._popup = null;
-        this._getUrl = getUrl;
         this._disabledOverride = false;
         this._options = null;
         this._pageZoomFactor = 1.0;
@@ -37,11 +39,31 @@ class Frontend {
         this._optionsUpdatePending = false;
         this._textScanner = new TextScanner({
             node: window,
-            ignoreElements: () => this._popup.isProxy() ? [] : [this._popup.getFrame()],
+            ignoreElements: this._ignoreElements.bind(this),
-            ignorePoint: (x, y) => this._popup.containsPoint(x, y),
+            ignorePoint: this._ignorePoint.bind(this),
             search: this._search.bind(this)
         });
 
+        const {
+            depth=0,
+            id: proxyPopupId,
+            parentFrameId,
+            proxy: useProxyPopup=false,
+            isSearchPage=false,
+            allowRootFramePopupProxy=true
+        } = frontendInitializationData;
+        this._proxyPopupId = proxyPopupId;
+        this._parentFrameId = parentFrameId;
+        this._useProxyPopup = useProxyPopup;
+        this._isSearchPage = isSearchPage;
+        this._depth = depth;
+        this._frameId = frameId;
+        this._frameOffsetForwarder = new FrameOffsetForwarder();
+        this._popupFactory = popupFactory;
+        this._allowRootFramePopupProxy = allowRootFramePopupProxy;
+        this._popupCache = new Map();
+        this._updatePopupToken = null;
+
         this._windowMessageHandlers = new Map([
             ['popupClose', this._onMessagePopupClose.bind(this)],
             ['selectionCopy', this._onMessageSelectionCopy.bind()]
@@ -62,43 +84,46 @@ class Frontend {
         this._textScanner.canClearSelection = value;
     }
 
-    async prepare() {
+    get popup() {
-        try {
+        return this._popup;
-            await this.updateOptions();
-            try {
-                const {zoomFactor} = await api.getZoom();
-                this._pageZoomFactor = zoomFactor;
-            } catch (e) {
-                // Ignore exceptions which may occur due to being on an unsupported page (e.g. about:blank)
-            }
-
-            window.addEventListener('resize', this._onResize.bind(this), false);
-
-            const visualViewport = window.visualViewport;
-            if (visualViewport !== null && typeof visualViewport === 'object') {
-                window.visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this));
-                window.visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this));
-            }
-
-            yomichan.on('orphaned', this._onOrphaned.bind(this));
-            yomichan.on('optionsUpdated', this.updateOptions.bind(this));
-            yomichan.on('zoomChanged', this._onZoomChanged.bind(this));
-            chrome.runtime.onMessage.addListener(this._onRuntimeMessage.bind(this));
-
-            this._textScanner.on('clearSelection', this._onClearSelection.bind(this));
-            this._textScanner.on('activeModifiersChanged', this._onActiveModifiersChanged.bind(this));
-
-            this._updateContentScale();
-            this._broadcastRootPopupInformation();
-        } catch (e) {
-            yomichan.logError(e);
-        }
     }
 
-    async setPopup(popup) {
+    async prepare() {
-        this._textScanner.clearSelection(true);
+        this._frameOffsetForwarder.prepare();
-        this._popup = popup;
+
-        await popup.setOptionsContext(await this.getOptionsContext(), this._id);
+        await this.updateOptions();
+        try {
+            const {zoomFactor} = await api.getZoom();
+            this._pageZoomFactor = zoomFactor;
+        } catch (e) {
+            // Ignore exceptions which may occur due to being on an unsupported page (e.g. about:blank)
+        }
+
+        this._textScanner.prepare();
+
+        window.addEventListener('resize', this._onResize.bind(this), false);
+        DOM.addFullscreenChangeEventListener(this._updatePopup.bind(this));
+
+        const visualViewport = window.visualViewport;
+        if (visualViewport !== null && typeof visualViewport === 'object') {
+            window.visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this));
+            window.visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this));
+        }
+
+        yomichan.on('orphaned', this._onOrphaned.bind(this));
+        yomichan.on('optionsUpdated', this.updateOptions.bind(this));
+        yomichan.on('zoomChanged', this._onZoomChanged.bind(this));
+        chrome.runtime.onMessage.addListener(this._onRuntimeMessage.bind(this));
+
+        this._textScanner.on('clearSelection', this._onClearSelection.bind(this));
+        this._textScanner.on('activeModifiersChanged', this._onActiveModifiersChanged.bind(this));
+
+        api.crossFrame.registerHandlers([
+            ['getUrl', {async: false, handler: this._onApiGetUrl.bind(this)}]
+        ]);
+
+        this._updateContentScale();
+        this._broadcastRootPopupInformation();
     }
 
     setDisabledOverride(disabled) {
@@ -112,8 +137,16 @@ class Frontend {
     }
 
     async getOptionsContext() {
-        const url = this._getUrl !== null ? await this._getUrl() : window.location.href;
+        let url = window.location.href;
-        const depth = this._popup.depth;
+        if (this._useProxyPopup) {
+            try {
+                url = await api.crossFrame.invoke(this._parentFrameId, 'getUrl', {});
+            } catch (e) {
+                // NOP
+            }
+        }
+
+        const depth = this._depth;
         const modifierKeys = [...this._activeModifiers];
         return {depth, url, modifierKeys};
     }
@@ -121,6 +154,9 @@ class Frontend {
     async updateOptions() {
         const optionsContext = await this.getOptionsContext();
         this._options = await api.optionsGet(optionsContext);
+
+        await this._updatePopup();
+
         this._textScanner.setOptions(this._options);
         this._updateTextScannerEnabled();
 
@@ -130,8 +166,6 @@ class Frontend {
         }
         this._textScanner.ignoreNodes = ignoreNodes.join(',');
 
-        await this._popup.setOptionsContext(optionsContext, this._id);
-
         this._updateContentScale();
 
         const textSourceCurrent = this._textScanner.getCurrentTextSource();
@@ -167,6 +201,12 @@ class Frontend {
         this._broadcastDocumentInformation(uniqueId);
     }
 
+    // API message handlers
+
+    _onApiGetUrl() {
+        return window.location.href;
+    }
+
     // Private
 
     _onResize() {
@@ -223,6 +263,95 @@ class Frontend {
         await this.updateOptions();
     }
 
+    async _updatePopup() {
+        const showIframePopupsInRootFrame = this._options.general.showIframePopupsInRootFrame;
+        const isIframe = !this._useProxyPopup && (window !== window.parent);
+
+        let popupPromise;
+        if (
+            isIframe &&
+            showIframePopupsInRootFrame &&
+            DOM.getFullscreenElement() === null &&
+            this._allowRootFramePopupProxy
+        ) {
+            popupPromise = this._popupCache.get('iframe');
+            if (typeof popupPromise === 'undefined') {
+                popupPromise = this._getIframeProxyPopup();
+                this._popupCache.set('iframe', popupPromise);
+            }
+        } else if (this._useProxyPopup) {
+            popupPromise = this._popupCache.get('proxy');
+            if (typeof popupPromise === 'undefined') {
+                popupPromise = this._getProxyPopup();
+                this._popupCache.set('proxy', popupPromise);
+            }
+        } else {
+            popupPromise = this._popupCache.get('default');
+            if (typeof popupPromise === 'undefined') {
+                popupPromise = this._getDefaultPopup();
+                this._popupCache.set('default', popupPromise);
+            }
+        }
+
+        // The token below is used as a unique identifier to ensure that a new _updatePopup call
+        // hasn't been started during the await.
+        const token = {};
+        this._updatePopupToken = token;
+        const popup = await popupPromise;
+        const optionsContext = await this.getOptionsContext();
+        if (this._updatePopupToken !== token) { return; }
+        await popup.setOptionsContext(optionsContext, this._id);
+        if (this._updatePopupToken !== token) { return; }
+
+        if (this._isSearchPage) {
+            this.setDisabledOverride(!this._options.scanning.enableOnSearchPage);
+        }
+
+        this._textScanner.clearSelection(true);
+        this._popup = popup;
+        this._depth = popup.depth;
+    }
+
+    async _getDefaultPopup() {
+        return this._popupFactory.getOrCreatePopup(null, null, this._depth);
+    }
+
+    async _getProxyPopup() {
+        const popup = new PopupProxy(null, this._depth + 1, this._proxyPopupId, this._parentFrameId);
+        await popup.prepare();
+        return popup;
+    }
+
+    async _getIframeProxyPopup() {
+        const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
+            chrome.runtime.onMessage,
+            ({action, params}, {resolve}) => {
+                if (action === 'rootPopupInformation') {
+                    resolve(params);
+                }
+            }
+        );
+        api.broadcastTab('rootPopupRequestInformationBroadcast');
+        const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
+
+        const popup = new PopupProxy(popupId, 0, null, parentFrameId, this._frameOffsetForwarder);
+        popup.on('offsetNotFound', () => {
+            this._allowRootFramePopupProxy = false;
+            this._updatePopup();
+        });
+        await popup.prepare();
+
+        return popup;
+    }
+
+    _ignoreElements() {
+        return this._popup === null || this._popup.isProxy() ? [] : [this._popup.getFrame()];
+    }
+
+    _ignorePoint(x, y) {
+        return this._popup !== null && this._popup.containsPoint(x, y);
+    }
+
     async _search(textSource, cause) {
         await this._updatePendingOptions();
 
@@ -318,7 +447,7 @@ class Frontend {
     _updateTextScannerEnabled() {
         const enabled = (
             this._options.general.enable &&
-            this._popup.depth <= this._options.scanning.popupNestingMaxDepth &&
+            this._depth <= this._options.scanning.popupNestingMaxDepth &&
             !this._disabledOverride
         );
         this._enabledEventListeners.removeAllEventListeners();
@@ -342,27 +471,41 @@ class Frontend {
         if (contentScale === this._contentScale) { return; }
 
         this._contentScale = contentScale;
-        this._popup.setContentScale(this._contentScale);
+        if (this._popup !== null) {
+            this._popup.setContentScale(this._contentScale);
+        }
         this._updatePopupPosition();
     }
 
     async _updatePopupPosition() {
         const textSource = this._textScanner.getCurrentTextSource();
-        if (textSource !== null && await this._popup.isVisible()) {
+        if (
+            textSource !== null &&
+            this._popup !== null &&
+            await this._popup.isVisible()
+        ) {
             this._showPopupContent(textSource, await this.getOptionsContext());
         }
     }
 
     _broadcastRootPopupInformation() {
-        if (!this._popup.isProxy() && this._popup.depth === 0 && this._popup.frameId === 0) {
+        if (
-            api.broadcastTab('rootPopupInformation', {popupId: this._popup.id, frameId: this._popup.frameId});
+            this._popup !== null &&
+            !this._popup.isProxy() &&
+            this._depth === 0 &&
+            this._frameId === 0
+        ) {
+            api.broadcastTab('rootPopupInformation', {
+                popupId: this._popup.id,
+                frameId: this._frameId
+            });
         }
     }
 
     _broadcastDocumentInformation(uniqueId) {
         api.broadcastTab('documentInformationBroadcast', {
             uniqueId,
-            frameId: this._popup.frameId,
+            frameId: this._frameId,
             title: document.title
         });
     }

ext/fg/js/popup-factory.js

@@ -39,8 +39,7 @@ class PopupFactory {
             ['showContent',        {async: true,  handler: this._onApiShowContent.bind(this)}],
             ['setCustomCss',       {async: false, handler: this._onApiSetCustomCss.bind(this)}],
             ['clearAutoPlayTimer', {async: false, handler: this._onApiClearAutoPlayTimer.bind(this)}],
-            ['setContentScale',    {async: false, handler: this._onApiSetContentScale.bind(this)}],
+            ['setContentScale',    {async: false, handler: this._onApiSetContentScale.bind(this)}]
-            ['getUrl',             {async: false, handler: this._onApiGetUrl.bind(this)}]
         ]);
     }
 
@@ -147,10 +146,6 @@ class PopupFactory {
         return popup.setContentScale(scale);
     }
 
-    _onApiGetUrl() {
-        return window.location.href;
-    }
-
     // Private functions
 
     _getPopup(id) {

ext/fg/js/popup-proxy.js

@@ -104,10 +104,6 @@ class PopupProxy extends EventDispatcher {
         this._invoke('setContentScale', {id: this._id, scale});
     }
 
-    async getUrl() {
-        return await this._invoke('getUrl', {});
-    }
-
     // Private
 
     _invoke(action, params={}) {

ext/fg/js/popup.js

@@ -415,16 +415,7 @@ class Popup {
             return;
         }
 
-        const fullscreenEvents = [
+        DOM.addFullscreenChangeEventListener(this._onFullscreenChanged.bind(this), this._fullscreenEventListeners);
-            'fullscreenchange',
-            'MSFullscreenChange',
-            'mozfullscreenchange',
-            'webkitfullscreenchange'
-        ];
-        const onFullscreenChanged = this._onFullscreenChanged.bind(this);
-        for (const eventName of fullscreenEvents) {
-            this._fullscreenEventListeners.addEventListener(document, eventName, onFullscreenChanged, false);
-        }
     }
 
     _onFullscreenChanged() {

ext/mixed/js/dom.js

@@ -77,6 +77,24 @@ class DOM {
         return (typeof key === 'string' ? (key.length === 1 ? key.toUpperCase() : key) : '');
     }
 
+    static addFullscreenChangeEventListener(onFullscreenChanged, eventListenerCollection=null) {
+        const target = document;
+        const options = false;
+        const fullscreenEventNames = [
+            'fullscreenchange',
+            'MSFullscreenChange',
+            'mozfullscreenchange',
+            'webkitfullscreenchange'
+        ];
+        for (const eventName of fullscreenEventNames) {
+            if (eventListenerCollection === null) {
+                target.addEventListener(eventName, onFullscreenChanged, options);
+            } else {
+                eventListenerCollection.addEventListener(target, eventName, onFullscreenChanged, options);
+            }
+        }
+    }
+
     static getFullscreenElement() {
         return (
             document.fullscreenElement ||

ext/mixed/js/text-scanner.js

@@ -28,6 +28,7 @@ class TextScanner extends EventDispatcher {
         this._ignorePoint = ignorePoint;
         this._search = search;
 
+        this._isPrepared = false;
         this._ignoreNodes = null;
 
         this._causeCurrent = null;
@@ -69,10 +70,15 @@ class TextScanner extends EventDispatcher {
         return this._causeCurrent;
     }
 
+    prepare() {
+        this._isPrepared = true;
+        this.setEnabled(this._enabled);
+    }
+
     setEnabled(enabled) {
         this._eventListeners.removeAllEventListeners();
         this._enabled = enabled;
-        if (this._enabled) {
+        if (this._enabled && this._isPrepared) {
             this._hookEvents();
         } else {
             this.clearSelection(true);