Merge branch 'master' into testing

13 files changed, 1504 insertions, 617 deletions

diff --git a/ext/fg/js/frontend-initialize.js b/ext/fg/js/content-script-main.js
index 2b942258..57386b85 100644
--- a/ext/fg/js/frontend-initialize.js
+++ b/ext/fg/js/content-script-main.js
@@ -16,15 +16,18 @@
  */
 
 /* global
+ * DOM
  * FrameOffsetForwarder
  * Frontend
+ * PopupFactory
  * PopupProxy
- * PopupProxyHost
  * apiBroadcastTab
+ * apiForwardLogsToBackend
+ * apiFrameInformationGet
  * apiOptionsGet
  */
 
-async function createIframePopupProxy(url, frameOffsetForwarder) {
+async function createIframePopupProxy(frameOffsetForwarder, setDisabled) {
     const rootPopupInformationPromise = yomichan.getTemporaryListenerResult(
         chrome.runtime.onMessage,
         ({action, params}, {resolve}) => {
@@ -34,33 +37,41 @@ async function createIframePopupProxy(url, frameOffsetForwarder) {
         }
     );
     apiBroadcastTab('rootPopupRequestInformationBroadcast');
-    const {popupId, frameId} = await rootPopupInformationPromise;
+    const {popupId, frameId: parentFrameId} = await rootPopupInformationPromise;
 
     const getFrameOffset = frameOffsetForwarder.getOffset.bind(frameOffsetForwarder);
 
-    const popup = new PopupProxy(popupId, 0, null, frameId, url, getFrameOffset);
+    const popup = new PopupProxy(popupId, 0, null, parentFrameId, getFrameOffset, setDisabled);
     await popup.prepare();
 
     return popup;
 }
 
 async function getOrCreatePopup(depth) {
-    const popupHost = new PopupProxyHost();
-    await popupHost.prepare();
+    const {frameId} = await apiFrameInformationGet();
+    if (typeof frameId !== 'number') {
+        const error = new Error('Failed to get frameId');
+        yomichan.logError(error);
+        throw error;
+    }
 
-    const popup = popupHost.getOrCreatePopup(null, null, depth);
+    const popupFactory = new PopupFactory(frameId);
+    await popupFactory.prepare();
+
+    const popup = popupFactory.getOrCreatePopup(null, null, depth);
 
     return popup;
 }
 
-async function createPopupProxy(depth, id, parentFrameId, url) {
-    const popup = new PopupProxy(null, depth + 1, id, parentFrameId, url);
+async function createPopupProxy(depth, id, parentFrameId) {
+    const popup = new PopupProxy(null, depth + 1, id, parentFrameId);
     await popup.prepare();
 
     return popup;
 }
 
-async function main() {
+(async () => {
+    apiForwardLogsToBackend();
     await yomichan.prepare();
 
     const data = window.frontendInitializationData || {};
@@ -78,8 +89,29 @@ async function main() {
     let frontendPreparePromise = null;
     let frameOffsetForwarder = 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};
+        const optionsContext = {
+            depth: isSearchPage ? 0 : depth,
+            url: proxy ? await getPopupProxyUrl() : window.location.href
+        };
         const options = await apiOptionsGet(optionsContext);
 
         if (!proxy && frameOffsetForwarder === null) {
@@ -88,11 +120,11 @@ async function main() {
         }
 
         let popup;
-        if (isIframe && options.general.showIframePopupsInRootFrame) {
-            popup = popups.iframe || await createIframePopupProxy(url, frameOffsetForwarder);
+        if (isIframe && options.general.showIframePopupsInRootFrame && DOM.getFullscreenElement() === null && iframePopupsInRootFrameAvailable) {
+            popup = popups.iframe || await createIframePopupProxy(frameOffsetForwarder, disableIframePopupsInRootFrame);
             popups.iframe = popup;
         } else if (proxy) {
-            popup = popups.proxy || await createPopupProxy(depth, id, parentFrameId, url);
+            popup = popups.proxy || await createPopupProxy(depth, id, parentFrameId);
             popups.proxy = popup;
         } else {
             popup = popups.normal || await getOrCreatePopup(depth);
@@ -100,7 +132,8 @@ async function main() {
         }
 
         if (frontend === null) {
-            frontend = new Frontend(popup);
+            const getUrl = proxy ? getPopupProxyUrl : null;
+            frontend = new Frontend(popup, getUrl);
             frontendPreparePromise = frontend.prepare();
             await frontendPreparePromise;
         } else {
@@ -117,8 +150,7 @@ async function main() {
     };
 
     yomichan.on('optionsUpdated', applyOptions);
+    window.addEventListener('fullscreenchange', applyOptions, false);
 
     await applyOptions();
-}
-
-main();
+})();
diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index 3b4cc28f..d639bc86 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -28,6 +28,9 @@ function docSetImposterStyle(style, propertyName, value) {
 }
 
 function docImposterCreate(element, isTextarea) {
+    const body = document.body;
+    if (body === null) { return [null, null]; }
+
     const elementStyle = window.getComputedStyle(element);
     const elementRect = element.getBoundingClientRect();
     const documentRect = document.documentElement.getBoundingClientRect();
@@ -78,7 +81,7 @@ function docImposterCreate(element, isTextarea) {
     }
 
     container.appendChild(imposter);
-    document.body.appendChild(container);
+    body.appendChild(container);
 
     // Adjust size
     const imposterRect = imposter.getBoundingClientRect();
@@ -156,7 +159,7 @@ function docSentenceExtract(source, extent) {
 
     const sourceLocal = source.clone();
     const position = sourceLocal.setStartOffset(extent);
-    sourceLocal.setEndOffset(position + extent);
+    sourceLocal.setEndOffset(extent * 2 - position, true);
     const content = sourceLocal.text();
 
     let quoteStack = [];
diff --git a/ext/fg/js/dom-text-scanner.js b/ext/fg/js/dom-text-scanner.js
new file mode 100644
index 00000000..8fa67ede
--- /dev/null
+++ b/ext/fg/js/dom-text-scanner.js
@@ -0,0 +1,551 @@
+/*
+ * Copyright (C) 2020  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * A class used to scan text in a document.
+ */
+class DOMTextScanner {
+    /**
+     * Creates a new instance of a DOMTextScanner.
+     * @param node The DOM Node to start at.
+     * @param offset The character offset in to start at when node is a text node.
+     *   Use 0 for non-text nodes.
+     */
+    constructor(node, offset, forcePreserveWhitespace=false, generateLayoutContent=true) {
+        const ruby = DOMTextScanner.getParentRubyElement(node);
+        const resetOffset = (ruby !== null);
+        if (resetOffset) { node = ruby; }
+
+        this._node = node;
+        this._offset = offset;
+        this._content = '';
+        this._remainder = 0;
+        this._resetOffset = resetOffset;
+        this._newlines = 0;
+        this._lineHasWhitespace = false;
+        this._lineHasContent = false;
+        this._forcePreserveWhitespace = forcePreserveWhitespace;
+        this._generateLayoutContent = generateLayoutContent;
+    }
+
+    /**
+     * Gets the current node being scanned.
+     * @returns A DOM Node.
+     */
+    get node() {
+        return this._node;
+    }
+
+    /**
+     * Gets the current offset corresponding to the node being scanned.
+     * This value is only applicable for text nodes.
+     * @returns An integer.
+     */
+    get offset() {
+        return this._offset;
+    }
+
+    /**
+     * Gets the remaining number of characters that weren't scanned in the last seek() call.
+     * This value is usually 0 unless the end of the document was reached.
+     * @returns An integer.
+     */
+    get remainder() {
+        return this._remainder;
+    }
+
+    /**
+     * Gets the accumulated content string resulting from calls to seek().
+     * @returns A string.
+     */
+    get content() {
+        return this._content;
+    }
+
+    /**
+     * Seeks a given length in the document and accumulates the text content.
+     * @param length A positive or negative integer corresponding to how many characters
+     *   should be added to content. Content is only added to the accumulation string,
+     *   never removed, so mixing seek calls with differently signed length values
+     *   may give unexpected results.
+     * @returns this
+     */
+    seek(length) {
+        const forward = (length >= 0);
+        this._remainder = (forward ? length : -length);
+        if (length === 0) { return this; }
+
+        const TEXT_NODE = Node.TEXT_NODE;
+        const ELEMENT_NODE = Node.ELEMENT_NODE;
+
+        const generateLayoutContent = this._generateLayoutContent;
+        let node = this._node;
+        let lastNode = node;
+        let resetOffset = this._resetOffset;
+        let newlines = 0;
+        while (node !== null) {
+            let enterable = false;
+            const nodeType = node.nodeType;
+
+            if (nodeType === TEXT_NODE) {
+                lastNode = node;
+                if (!(
+                    forward ?
+                    this._seekTextNodeForward(node, resetOffset) :
+                    this._seekTextNodeBackward(node, resetOffset)
+                )) {
+                    // Length reached
+                    break;
+                }
+            } else if (nodeType === ELEMENT_NODE) {
+                lastNode = node;
+                this._offset = 0;
+                [enterable, newlines] = DOMTextScanner.getElementSeekInfo(node);
+                if (newlines > this._newlines && generateLayoutContent) {
+                    this._newlines = newlines;
+                }
+            }
+
+            const exitedNodes = [];
+            node = DOMTextScanner.getNextNode(node, forward, enterable, exitedNodes);
+
+            for (const exitedNode of exitedNodes) {
+                if (exitedNode.nodeType !== ELEMENT_NODE) { continue; }
+                newlines = DOMTextScanner.getElementSeekInfo(exitedNode)[1];
+                if (newlines > this._newlines && generateLayoutContent) {
+                    this._newlines = newlines;
+                }
+            }
+
+            resetOffset = true;
+        }
+
+        this._node = lastNode;
+        this._resetOffset = resetOffset;
+
+        return this;
+    }
+
+    // Private
+
+    /**
+     * Seeks forward in a text node.
+     * @param textNode The text node to use.
+     * @param resetOffset Whether or not the text offset should be reset.
+     * @returns true if scanning should continue, or false if the scan length has been reached.
+     */
+    _seekTextNodeForward(textNode, resetOffset) {
+        const nodeValue = textNode.nodeValue;
+        const nodeValueLength = nodeValue.length;
+        const [preserveNewlines, preserveWhitespace] = (
+            this._forcePreserveWhitespace ?
+            [true, true] :
+            DOMTextScanner.getWhitespaceSettings(textNode)
+        );
+
+        let lineHasWhitespace = this._lineHasWhitespace;
+        let lineHasContent = this._lineHasContent;
+        let content = this._content;
+        let offset = resetOffset ? 0 : this._offset;
+        let remainder = this._remainder;
+        let newlines = this._newlines;
+
+        while (offset < nodeValueLength) {
+            const char = nodeValue[offset];
+            const charAttributes = DOMTextScanner.getCharacterAttributes(char, preserveNewlines, preserveWhitespace);
+            ++offset;
+
+            if (charAttributes === 0) {
+                // Character should be ignored
+                continue;
+            } else if (charAttributes === 1) {
+                // Character is collapsable whitespace
+                lineHasWhitespace = true;
+            } else {
+                // Character should be added to the content
+                if (newlines > 0) {
+                    if (content.length > 0) {
+                        const useNewlineCount = Math.min(remainder, newlines);
+                        content += '\n'.repeat(useNewlineCount);
+                        remainder -= useNewlineCount;
+                        newlines -= useNewlineCount;
+                    } else {
+                        newlines = 0;
+                    }
+                    lineHasContent = false;
+                    lineHasWhitespace = false;
+                    if (remainder <= 0) {
+                        --offset; // Revert character offset
+                        break;
+                    }
+                }
+
+                lineHasContent = (charAttributes === 2); // 3 = character is a newline
+
+                if (lineHasWhitespace) {
+                    if (lineHasContent) {
+                        content += ' ';
+                        lineHasWhitespace = false;
+                        if (--remainder <= 0) {
+                            --offset; // Revert character offset
+                            break;
+                        }
+                    } else {
+                        lineHasWhitespace = false;
+                    }
+                }
+
+                content += char;
+
+                if (--remainder <= 0) { break; }
+            }
+        }
+
+        this._lineHasWhitespace = lineHasWhitespace;
+        this._lineHasContent = lineHasContent;
+        this._content = content;
+        this._offset = offset;
+        this._remainder = remainder;
+        this._newlines = newlines;
+
+        return (remainder > 0);
+    }
+
+    /**
+     * Seeks backward in a text node.
+     * This function is nearly the same as _seekTextNodeForward, with the following differences:
+     * - Iteration condition is reversed to check if offset is greater than 0.
+     * - offset is reset to nodeValueLength instead of 0.
+     * - offset is decremented instead of incremented.
+     * - offset is decremented before getting the character.
+     * - offset is reverted by incrementing instead of decrementing.
+     * - content string is prepended instead of appended.
+     * @param textNode The text node to use.
+     * @param resetOffset Whether or not the text offset should be reset.
+     * @returns true if scanning should continue, or false if the scan length has been reached.
+     */
+    _seekTextNodeBackward(textNode, resetOffset) {
+        const nodeValue = textNode.nodeValue;
+        const nodeValueLength = nodeValue.length;
+        const [preserveNewlines, preserveWhitespace] = (
+            this._forcePreserveWhitespace ?
+            [true, true] :
+            DOMTextScanner.getWhitespaceSettings(textNode)
+        );
+
+        let lineHasWhitespace = this._lineHasWhitespace;
+        let lineHasContent = this._lineHasContent;
+        let content = this._content;
+        let offset = resetOffset ? nodeValueLength : this._offset;
+        let remainder = this._remainder;
+        let newlines = this._newlines;
+
+        while (offset > 0) {
+            --offset;
+            const char = nodeValue[offset];
+            const charAttributes = DOMTextScanner.getCharacterAttributes(char, preserveNewlines, preserveWhitespace);
+
+            if (charAttributes === 0) {
+                // Character should be ignored
+                continue;
+            } else if (charAttributes === 1) {
+                // Character is collapsable whitespace
+                lineHasWhitespace = true;
+            } else {
+                // Character should be added to the content
+                if (newlines > 0) {
+                    if (content.length > 0) {
+                        const useNewlineCount = Math.min(remainder, newlines);
+                        content = '\n'.repeat(useNewlineCount) + content;
+                        remainder -= useNewlineCount;
+                        newlines -= useNewlineCount;
+                    } else {
+                        newlines = 0;
+                    }
+                    lineHasContent = false;
+                    lineHasWhitespace = false;
+                    if (remainder <= 0) {
+                        ++offset; // Revert character offset
+                        break;
+                    }
+                }
+
+                lineHasContent = (charAttributes === 2); // 3 = character is a newline
+
+                if (lineHasWhitespace) {
+                    if (lineHasContent) {
+                        content = ' ' + content;
+                        lineHasWhitespace = false;
+                        if (--remainder <= 0) {
+                            ++offset; // Revert character offset
+                            break;
+                        }
+                    } else {
+                        lineHasWhitespace = false;
+                    }
+                }
+
+                content = char + content;
+
+                if (--remainder <= 0) { break; }
+            }
+        }
+
+        this._lineHasWhitespace = lineHasWhitespace;
+        this._lineHasContent = lineHasContent;
+        this._content = content;
+        this._offset = offset;
+        this._remainder = remainder;
+        this._newlines = newlines;
+
+        return (remainder > 0);
+    }
+
+    // Static helpers
+
+    /**
+     * Gets the next node in the document for a specified scanning direction.
+     * @param node The current DOM Node.
+     * @param forward Whether to scan forward in the document or backward.
+     * @param visitChildren Whether the children of the current node should be visited.
+     * @param exitedNodes An array which stores nodes which were exited.
+     * @returns The next node in the document, or null if there is no next node.
+     */
+    static getNextNode(node, forward, visitChildren, exitedNodes) {
+        let next = visitChildren ? (forward ? node.firstChild : node.lastChild) : null;
+        if (next === null) {
+            while (true) {
+                exitedNodes.push(node);
+
+                next = (forward ? node.nextSibling : node.previousSibling);
+                if (next !== null) { break; }
+
+                next = node.parentNode;
+                if (next === null) { break; }
+
+                node = next;
+            }
+        }
+        return next;
+    }
+
+    /**
+     * Gets the parent element of a given Node.
+     * @param node The node to check.
+     * @returns The parent element if one exists, otherwise null.
+     */
+    static getParentElement(node) {
+        while (node !== null && node.nodeType !== Node.ELEMENT_NODE) {
+            node = node.parentNode;
+        }
+        return node;
+    }
+
+    /**
+     * Gets the parent <ruby> element of a given node, if one exists. For efficiency purposes,
+     * this only checks the immediate parent elements and does not check all ancestors, so
+     * there are cases where the node may be in a ruby element but it is not returned.
+     * @param node The node to check.
+     * @returns A <ruby> node if the input node is contained in one, otherwise null.
+     */
+    static getParentRubyElement(node) {
+        node = DOMTextScanner.getParentElement(node);
+        if (node !== null && node.nodeName.toUpperCase() === 'RT') {
+            node = node.parentNode;
+            if (node !== null && node.nodeName.toUpperCase() === 'RUBY') {
+                return node;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * @returns [enterable: boolean, newlines: integer]
+     *   The enterable value indicates whether the content of this node should be entered.
+     *   The newlines value corresponds to the number of newline characters that should be added.
+     *     1 newline corresponds to a simple new line in the layout.
+     *     2 newlines corresponds to a significant visual distinction since the previous content.
+     */
+    static getElementSeekInfo(element) {
+        let enterable = true;
+        switch (element.nodeName.toUpperCase()) {
+            case 'HEAD':
+            case 'RT':
+            case 'SCRIPT':
+            case 'STYLE':
+                return [false, 0];
+            case 'BR':
+                return [false, 1];
+            case 'TEXTAREA':
+            case 'INPUT':
+            case 'BUTTON':
+                enterable = false;
+                break;
+        }
+
+        const style = window.getComputedStyle(element);
+        const display = style.display;
+
+        const visible = (display !== 'none' && DOMTextScanner.isStyleVisible(style));
+        let newlines = 0;
+
+        if (!visible) {
+            enterable = false;
+        } else {
+            switch (style.position) {
+                case 'absolute':
+                case 'fixed':
+                case 'sticky':
+                    newlines = 2;
+                    break;
+            }
+            if (newlines === 0 && DOMTextScanner.doesCSSDisplayChangeLayout(display)) {
+                newlines = 1;
+            }
+        }
+
+        return [enterable, newlines];
+    }
+
+    /**
+     * Gets information about how whitespace characters are treated.
+     * @param textNode The Text node to check.
+     * @returns [preserveNewlines: boolean, preserveWhitespace: boolean]
+     *   The value of preserveNewlines indicates whether or not newline characters are treated as line breaks.
+     *   The value of preserveWhitespace indicates whether or not sequences of whitespace characters are collapsed.
+     */
+    static getWhitespaceSettings(textNode) {
+        const element = DOMTextScanner.getParentElement(textNode);
+        if (element !== null) {
+            const style = window.getComputedStyle(element);
+            switch (style.whiteSpace) {
+                case 'pre':
+                case 'pre-wrap':
+                case 'break-spaces':
+                    return [true, true];
+                case 'pre-line':
+                    return [true, false];
+            }
+        }
+        return [false, false];
+    }
+
+    /**
+     * Gets attributes for the specified character.
+     * @param character A string containing a single character.
+     * @returns An integer representing the attributes of the character.
+     *   0: Character should be ignored.
+     *   1: Character is collapsable whitespace.
+     *   2: Character should be added to the content.
+     *   3: Character should be added to the content and is a newline.
+     */
+    static getCharacterAttributes(character, preserveNewlines, preserveWhitespace) {
+        switch (character.charCodeAt(0)) {
+            case 0x09: // Tab ('\t')
+            case 0x0c: // Form feed ('\f')
+            case 0x0d: // Carriage return ('\r')
+            case 0x20: // Space (' ')
+                return preserveWhitespace ? 2 : 1;
+            case 0x0a: // Line feed ('\n')
+                return preserveNewlines ? 3 : 1;
+            case 0x200c: // Zero-width non-joiner ('\u200c')
+                return 0;
+            default: // Other
+                return 2;
+        }
+    }
+
+    /**
+     * Checks whether a given style is visible or not.
+     * This function does not check style.display === 'none'.
+     * @param style An object implementing the CSSStyleDeclaration interface.
+     * @returns true if the style should result in an element being visible, otherwise false.
+     */
+    static isStyleVisible(style) {
+        return !(
+            style.visibility === 'hidden' ||
+            parseFloat(style.opacity) <= 0 ||
+            parseFloat(style.fontSize) <= 0 ||
+            (
+                !DOMTextScanner.isStyleSelectable(style) &&
+                (
+                    DOMTextScanner.isCSSColorTransparent(style.color) ||
+                    DOMTextScanner.isCSSColorTransparent(style.webkitTextFillColor)
+                )
+            )
+        );
+    }
+
+    /**
+     * Checks whether a given style is selectable or not.
+     * @param style An object implementing the CSSStyleDeclaration interface.
+     * @returns true if the style is selectable, otherwise false.
+     */
+    static isStyleSelectable(style) {
+        return !(
+            style.userSelect === 'none' ||
+            style.webkitUserSelect === 'none' ||
+            style.MozUserSelect === 'none' ||
+            style.msUserSelect === 'none'
+        );
+    }
+
+    /**
+     * Checks whether a CSS color is transparent or not.
+     * @param cssColor A CSS color string, expected to be encoded in rgb(a) form.
+     * @returns true if the color is transparent, otherwise false.
+     */
+    static isCSSColorTransparent(cssColor) {
+        return (
+            typeof cssColor === 'string' &&
+            cssColor.startsWith('rgba(') &&
+            /,\s*0.?0*\)$/.test(cssColor)
+        );
+    }
+
+    /**
+     * Checks whether a CSS display value will cause a layout change for text.
+     * @param cssDisplay A CSS string corresponding to the value of the display property.
+     * @returns true if the layout is changed by this value, otherwise false.
+     */
+    static doesCSSDisplayChangeLayout(cssDisplay) {
+        let pos = cssDisplay.indexOf(' ');
+        if (pos >= 0) {
+            // Truncate to <display-outside> part
+            cssDisplay = cssDisplay.substring(0, pos);
+        }
+
+        pos = cssDisplay.indexOf('-');
+        if (pos >= 0) {
+            // Truncate to first part of kebab-case value
+            cssDisplay = cssDisplay.substring(0, pos);
+        }
+
+        switch (cssDisplay) {
+            case 'block':
+            case 'flex':
+            case 'grid':
+            case 'list': // list-item
+            case 'table': // table, table-*
+                return true;
+            case 'ruby': // rubt-*
+                return (pos >= 0);
+            default:
+                return false;
+        }
+    }
+}
diff --git a/ext/fg/js/popup-nested.js b/ext/fg/js/float-main.js
index c140f9c8..20771910 100644
--- a/ext/fg/js/popup-nested.js
+++ b/ext/fg/js/float-main.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2020  Yomichan Authors
+ * Copyright (C) 2020  Yomichan Authors
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -16,24 +16,21 @@
  */
 
 /* global
+ * DisplayFloat
+ * apiForwardLogsToBackend
  * apiOptionsGet
+ * dynamicLoader
  */
 
-function injectPopupNested() {
-    const scriptSrcs = [
+async function injectPopupNested() {
+    await dynamicLoader.loadScripts([
         '/mixed/js/text-scanner.js',
         '/fg/js/frontend-api-sender.js',
         '/fg/js/popup.js',
         '/fg/js/popup-proxy.js',
         '/fg/js/frontend.js',
-        '/fg/js/frontend-initialize.js'
-    ];
-    for (const src of scriptSrcs) {
-        const script = document.createElement('script');
-        script.async = false;
-        script.src = src;
-        document.body.appendChild(script);
-    }
+        '/fg/js/content-script-main.js'
+    ]);
 }
 
 async function popupNestedInitialize(id, depth, parentFrameId, url) {
@@ -42,26 +39,23 @@ async function popupNestedInitialize(id, depth, parentFrameId, url) {
     const applyOptions = async () => {
         const optionsContext = {depth, url};
         const options = await apiOptionsGet(optionsContext);
-        const popupNestingMaxDepth = options.scanning.popupNestingMaxDepth;
-
-        const maxPopupDepthExceeded = !(
-            typeof popupNestingMaxDepth === 'number' &&
-            typeof depth === 'number' &&
-            depth < popupNestingMaxDepth
-        );
-        if (maxPopupDepthExceeded || optionsApplied) {
-            return;
-        }
+        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};
-        injectPopupNested();
-
-        yomichan.off('optionsUpdated', applyOptions);
+        await injectPopupNested();
     };
 
     yomichan.on('optionsUpdated', applyOptions);
 
     await applyOptions();
 }
+
+(async () => {
+    apiForwardLogsToBackend();
+    const display = new DisplayFloat();
+    await display.prepare();
+})();
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 5c2c50c2..845bf7f6 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -18,7 +18,7 @@
 /* global
  * Display
  * apiBroadcastTab
- * apiGetMessageToken
+ * apiSendMessageToFrame
  * popupNestedInitialize
  */
 
@@ -27,17 +27,11 @@ class DisplayFloat extends Display {
         super(document.querySelector('#spinner'), document.querySelector('#definitions'));
         this.autoPlayAudioTimer = null;
 
-        this._popupId = null;
-
-        this.optionsContext = {
-            depth: 0,
-            url: window.location.href
-        };
+        this._secret = yomichan.generateId(16);
+        this._token = null;
 
         this._orphaned = false;
-        this._prepareInvoked = false;
-        this._messageToken = null;
-        this._messageTokenPromise = null;
+        this._initializedNestedPopups = false;
 
         this._onKeyDownHandlers = new Map([
             ['C', (e) => {
@@ -51,42 +45,30 @@ class DisplayFloat extends Display {
         ]);
 
         this._windowMessageHandlers = new Map([
-            ['setContent', ({type, details}) => this.setContent(type, details)],
-            ['clearAutoPlayTimer', () => this.clearAutoPlayTimer()],
-            ['setCustomCss', ({css}) => this.setCustomCss(css)],
-            ['prepare', ({popupInfo, url, childrenSupported, scale}) => this.prepare(popupInfo, url, childrenSupported, scale)],
-            ['setContentScale', ({scale}) => this.setContentScale(scale)]
+            ['initialize', {handler: this._initialize.bind(this), authenticate: false}],
+            ['configure', {handler: this._configure.bind(this)}],
+            ['setOptionsContext', {handler: ({optionsContext}) => this.setOptionsContext(optionsContext)}],
+            ['setContent', {handler: ({type, details}) => this.setContent(type, details)}],
+            ['clearAutoPlayTimer', {handler: () => this.clearAutoPlayTimer()}],
+            ['setCustomCss', {handler: ({css}) => this.setCustomCss(css)}],
+            ['setContentScale', {handler: ({scale}) => this.setContentScale(scale)}]
         ]);
-
-        yomichan.on('orphaned', this.onOrphaned.bind(this));
-        window.addEventListener('message', this.onMessage.bind(this), false);
     }
 
-    async prepare(popupInfo, url, childrenSupported, scale) {
-        if (this._prepareInvoked) { return; }
-        this._prepareInvoked = true;
-
-        const {id, depth, parentFrameId} = popupInfo;
-        this._popupId = id;
-        this.optionsContext.depth = depth;
-        this.optionsContext.url = url;
-
+    async prepare() {
         await super.prepare();
 
-        if (childrenSupported) {
-            popupNestedInitialize(id, depth, parentFrameId, url);
-        }
-
-        this.setContentScale(scale);
+        yomichan.on('orphaned', this.onOrphaned.bind(this));
+        window.addEventListener('message', this.onMessage.bind(this), false);
 
-        apiBroadcastTab('popupPrepareCompleted', {targetPopupId: this._popupId});
+        apiBroadcastTab('popupPrepared', {secret: this._secret});
     }
 
     onError(error) {
         if (this._orphaned) {
             this.setContent('orphaned');
         } else {
-            logError(error, true);
+            yomichan.logError(error);
         }
     }
 
@@ -94,7 +76,7 @@ class DisplayFloat extends Display {
         this._orphaned = true;
     }
 
-    onSearchClear() {
+    onEscape() {
         window.parent.postMessage('popupClose', '*');
     }
 
@@ -104,46 +86,30 @@ class DisplayFloat extends Display {
 
     onMessage(e) {
         const data = e.data;
-        if (typeof data !== 'object' || data === null) { return; } // Invalid data
-
-        const token = data.token;
-        if (typeof token !== 'string') { return; } // Invalid data
-
-        if (this._messageToken === null) {
-            // Async
-            this.getMessageToken()
-                .then(
-                    () => { this.handleAction(token, data); },
-                    () => {}
-                );
-        } else {
-            // Sync
-            this.handleAction(token, data);
+        if (typeof data !== 'object' || data === null) {
+            this._logMessageError(e, 'Invalid data');
+            return;
         }
-    }
 
-    async getMessageToken() {
-        // this._messageTokenPromise is used to ensure that only one call to apiGetMessageToken is made.
-        if (this._messageTokenPromise === null) {
-            this._messageTokenPromise = apiGetMessageToken();
-        }
-        const messageToken = await this._messageTokenPromise;
-        if (this._messageToken === null) {
-            this._messageToken = messageToken;
+        const action = data.action;
+        if (typeof action !== 'string') {
+            this._logMessageError(e, 'Invalid data');
+            return;
         }
-        this._messageTokenPromise = null;
-    }
 
-    handleAction(token, {action, params}) {
-        if (token !== this._messageToken) {
-            // Invalid token
+        const handlerInfo = this._windowMessageHandlers.get(action);
+        if (typeof handlerInfo === 'undefined') {
+            this._logMessageError(e, `Invalid action: ${JSON.stringify(action)}`);
             return;
         }
 
-        const handler = this._windowMessageHandlers.get(action);
-        if (typeof handler !== 'function') { return; }
+        if (handlerInfo.authenticate !== false && !this._isMessageAuthenticated(data)) {
+            this._logMessageError(e, 'Invalid authentication');
+            return;
+        }
 
-        handler(params);
+        const handler = handlerInfo.handler;
+        handler(data.params);
     }
 
     autoPlayAudio() {
@@ -158,8 +124,15 @@ class DisplayFloat extends Display {
         }
     }
 
+    async setOptionsContext(optionsContext) {
+        this.optionsContext = optionsContext;
+        await this.updateOptions();
+    }
+
     setContentScale(scale) {
-        document.body.style.fontSize = `${scale}em`;
+        const body = document.body;
+        if (body === null) { return; }
+        body.style.fontSize = `${scale}em`;
     }
 
     async getDocumentTitle() {
@@ -188,6 +161,45 @@ class DisplayFloat extends Display {
             return '';
         }
     }
-}
 
-DisplayFloat.instance = new DisplayFloat();
+    _logMessageError(event, type) {
+        yomichan.logWarning(new Error(`Popup received invalid message from origin ${JSON.stringify(event.origin)}: ${type}`));
+    }
+
+    _initialize(params) {
+        if (this._token !== null) { return; } // Already initialized
+        if (!isObject(params)) { return; } // Invalid data
+
+        const secret = params.secret;
+        if (secret !== this._secret) { return; } // Invalid authentication
+
+        const {token, frameId} = params;
+        this._token = token;
+
+        apiSendMessageToFrame(frameId, 'popupInitialized', {secret, token});
+    }
+
+    async _configure({messageId, frameId, popupId, optionsContext, childrenSupported, scale}) {
+        this.optionsContext = optionsContext;
+
+        await this.updateOptions();
+
+        if (childrenSupported && !this._initializedNestedPopups) {
+            const {depth, url} = optionsContext;
+            popupNestedInitialize(popupId, depth, frameId, url);
+            this._initializedNestedPopups = true;
+        }
+
+        this.setContentScale(scale);
+
+        apiSendMessageToFrame(frameId, 'popupConfigured', {messageId});
+    }
+
+    _isMessageAuthenticated(message) {
+        return (
+            this._token !== null &&
+            this._token === message.token &&
+            this._secret === message.secret
+        );
+    }
+}
diff --git a/ext/fg/js/frame-offset-forwarder.js b/ext/fg/js/frame-offset-forwarder.js
index c658c55a..9b68d34e 100644
--- a/ext/fg/js/frame-offset-forwarder.js
+++ b/ext/fg/js/frame-offset-forwarder.js
@@ -23,6 +23,10 @@ class FrameOffsetForwarder {
     constructor() {
         this._started = false;
 
+        this._cacheMaxSize = 1000;
+        this._frameCache = new Set();
+        this._unreachableContentWindowCache = new Set();
+
         this._forwardFrameOffset = (
             window !== window.parent ?
             this._forwardFrameOffsetParent.bind(this) :
@@ -74,12 +78,12 @@ class FrameOffsetForwarder {
 
     _onGetFrameOffset(offset, uniqueId, e) {
         let sourceFrame = null;
-        for (const frame of document.querySelectorAll('frame, iframe:not(.yomichan-float)')) {
-            if (frame.contentWindow !== e.source) { continue; }
-            sourceFrame = frame;
-            break;
+        if (!this._unreachableContentWindowCache.has(e.source)) {
+            sourceFrame = this._findFrameWithContentWindow(e.source);
         }
         if (sourceFrame === null) {
+            // closed shadow root etc.
+            this._addToCache(this._unreachableContentWindowCache, e.source);
             this._forwardFrameOffsetOrigin(null, uniqueId);
             return;
         }
@@ -91,6 +95,67 @@ class FrameOffsetForwarder {
         this._forwardFrameOffset(offset, uniqueId);
     }
 
+    _findFrameWithContentWindow(contentWindow) {
+        const ELEMENT_NODE = Node.ELEMENT_NODE;
+        for (const elements of this._getFrameElementSources()) {
+            while (elements.length > 0) {
+                const element = elements.shift();
+                if (element.contentWindow === contentWindow) {
+                    this._addToCache(this._frameCache, element);
+                    return element;
+                }
+
+                const shadowRoot = (
+                    element.shadowRoot ||
+                    element.openOrClosedShadowRoot // Available to Firefox 63+ for WebExtensions
+                );
+                if (shadowRoot) {
+                    for (const child of shadowRoot.children) {
+                        if (child.nodeType === ELEMENT_NODE) {
+                            elements.push(child);
+                        }
+                    }
+                }
+
+                for (const child of element.children) {
+                    if (child.nodeType === ELEMENT_NODE) {
+                        elements.push(child);
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+
+    *_getFrameElementSources() {
+        const frameCache = [];
+        for (const frame of this._frameCache) {
+            // removed from DOM
+            if (!frame.isConnected) {
+                this._frameCache.delete(frame);
+                continue;
+            }
+            frameCache.push(frame);
+        }
+        yield frameCache;
+        // will contain duplicates, but frame elements are cheap to handle
+        yield [...document.querySelectorAll('frame, iframe:not(.yomichan-float)')];
+        yield [document.documentElement];
+    }
+
+    _addToCache(cache, value) {
+        let freeSlots = this._cacheMaxSize - cache.size;
+        if (freeSlots <= 0) {
+            for (const cachedValue of cache) {
+                cache.delete(cachedValue);
+                ++freeSlots;
+                if (freeSlots > 0) { break; }
+            }
+        }
+        cache.add(value);
+    }
+
     _forwardFrameOffsetParent(offset, uniqueId) {
         window.parent.postMessage({action: 'getFrameOffset', params: {offset, uniqueId}}, '*');
     }
diff --git a/ext/fg/js/frontend-api-receiver.js b/ext/fg/js/frontend-api-receiver.js
index 4abd4e81..3fa9e8b6 100644
--- a/ext/fg/js/frontend-api-receiver.js
+++ b/ext/fg/js/frontend-api-receiver.js
@@ -17,41 +17,60 @@
 
 
 class FrontendApiReceiver {
-    constructor(source='', handlers=new Map()) {
+    constructor(source, messageHandlers) {
         this._source = source;
-        this._handlers = handlers;
+        this._messageHandlers = messageHandlers;
+    }
 
-        chrome.runtime.onConnect.addListener(this.onConnect.bind(this));
+    prepare() {
+        chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
     }
 
-    onConnect(port) {
+    _onConnect(port) {
         if (port.name !== 'frontend-api-receiver') { return; }
 
-        port.onMessage.addListener(this.onMessage.bind(this, port));
+        port.onMessage.addListener(this._onMessage.bind(this, port));
     }
 
-    onMessage(port, {id, action, params, target, senderId}) {
+    _onMessage(port, {id, action, params, target, senderId}) {
         if (target !== this._source) { return; }
 
-        const handler = this._handlers.get(action);
-        if (typeof handler !== 'function') { return; }
+        const messageHandler = this._messageHandlers.get(action);
+        if (typeof messageHandler === 'undefined') { return; }
+
+        const {handler, async} = messageHandler;
 
-        this.sendAck(port, id, senderId);
+        this._sendAck(port, id, senderId);
+        if (async) {
+            this._invokeHandlerAsync(handler, params, port, id, senderId);
+        } else {
+            this._invokeHandler(handler, params, port, id, senderId);
+        }
+    }
+
+    _invokeHandler(handler, params, port, id, senderId) {
+        try {
+            const result = handler(params);
+            this._sendResult(port, id, senderId, {result});
+        } catch (error) {
+            this._sendResult(port, id, senderId, {error: errorToJson(error)});
+        }
+    }
 
-        handler(params).then(
-            (result) => {
-                this.sendResult(port, id, senderId, {result});
-            },
-            (error) => {
-                this.sendResult(port, id, senderId, {error: errorToJson(error)});
-            });
+    async _invokeHandlerAsync(handler, params, port, id, senderId) {
+        try {
+            const result = await handler(params);
+            this._sendResult(port, id, senderId, {result});
+        } catch (error) {
+            this._sendResult(port, id, senderId, {error: errorToJson(error)});
+        }
     }
 
-    sendAck(port, id, senderId) {
+    _sendAck(port, id, senderId) {
         port.postMessage({type: 'ack', id, senderId});
     }
 
-    sendResult(port, id, senderId, data) {
+    _sendResult(port, id, senderId, data) {
         port.postMessage({type: 'result', id, senderId, data});
     }
 }
diff --git a/ext/fg/js/frontend-api-sender.js b/ext/fg/js/frontend-api-sender.js
index 1d539cab..4dcde638 100644
--- a/ext/fg/js/frontend-api-sender.js
+++ b/ext/fg/js/frontend-api-sender.js
@@ -17,97 +17,97 @@
 
 
 class FrontendApiSender {
-    constructor() {
-        this.senderId = yomichan.generateId(16);
-        this.ackTimeout = 3000; // 3 seconds
-        this.responseTimeout = 10000; // 10 seconds
-        this.callbacks = new Map();
-        this.disconnected = false;
-        this.nextId = 0;
-
-        this.port = null;
+    constructor(target) {
+        this._target = target;
+        this._senderId = yomichan.generateId(16);
+        this._ackTimeout = 3000; // 3 seconds
+        this._responseTimeout = 10000; // 10 seconds
+        this._callbacks = new Map();
+        this._disconnected = false;
+        this._nextId = 0;
+        this._port = null;
     }
 
-    invoke(action, params, target) {
-        if (this.disconnected) {
+    invoke(action, params) {
+        if (this._disconnected) {
             // attempt to reconnect the next time
-            this.disconnected = false;
+            this._disconnected = false;
             return Promise.reject(new Error('Disconnected'));
         }
 
-        if (this.port === null) {
-            this.createPort();
+        if (this._port === null) {
+            this._createPort();
         }
 
-        const id = `${this.nextId}`;
-        ++this.nextId;
+        const id = `${this._nextId}`;
+        ++this._nextId;
 
         return new Promise((resolve, reject) => {
             const info = {id, resolve, reject, ack: false, timer: null};
-            this.callbacks.set(id, info);
-            info.timer = setTimeout(() => this.onError(id, 'Timeout (ack)'), this.ackTimeout);
+            this._callbacks.set(id, info);
+            info.timer = setTimeout(() => this._onError(id, 'Timeout (ack)'), this._ackTimeout);
 
-            this.port.postMessage({id, action, params, target, senderId: this.senderId});
+            this._port.postMessage({id, action, params, target: this._target, senderId: this._senderId});
         });
     }
 
-    createPort() {
-        this.port = chrome.runtime.connect(null, {name: 'backend-api-forwarder'});
-        this.port.onDisconnect.addListener(this.onDisconnect.bind(this));
-        this.port.onMessage.addListener(this.onMessage.bind(this));
+    _createPort() {
+        this._port = chrome.runtime.connect(null, {name: 'backend-api-forwarder'});
+        this._port.onDisconnect.addListener(this._onDisconnect.bind(this));
+        this._port.onMessage.addListener(this._onMessage.bind(this));
     }
 
-    onMessage({type, id, data, senderId}) {
-        if (senderId !== this.senderId) { return; }
+    _onMessage({type, id, data, senderId}) {
+        if (senderId !== this._senderId) { return; }
         switch (type) {
             case 'ack':
-                this.onAck(id);
+                this._onAck(id);
                 break;
             case 'result':
-                this.onResult(id, data);
+                this._onResult(id, data);
                 break;
         }
     }
 
-    onDisconnect() {
-        this.disconnected = true;
-        this.port = null;
+    _onDisconnect() {
+        this._disconnected = true;
+        this._port = null;
 
-        for (const id of this.callbacks.keys()) {
-            this.onError(id, 'Disconnected');
+        for (const id of this._callbacks.keys()) {
+            this._onError(id, 'Disconnected');
         }
     }
 
-    onAck(id) {
-        const info = this.callbacks.get(id);
+    _onAck(id) {
+        const info = this._callbacks.get(id);
         if (typeof info === 'undefined') {
-            console.warn(`ID ${id} not found for ack`);
+            yomichan.logWarning(new Error(`ID ${id} not found for ack`));
             return;
         }
 
         if (info.ack) {
-            console.warn(`Request ${id} already ack'd`);
+            yomichan.logWarning(new Error(`Request ${id} already ack'd`));
             return;
         }
 
         info.ack = true;
         clearTimeout(info.timer);
-        info.timer = setTimeout(() => this.onError(id, 'Timeout (response)'), this.responseTimeout);
+        info.timer = setTimeout(() => this._onError(id, 'Timeout (response)'), this._responseTimeout);
     }
 
-    onResult(id, data) {
-        const info = this.callbacks.get(id);
+    _onResult(id, data) {
+        const info = this._callbacks.get(id);
         if (typeof info === 'undefined') {
-            console.warn(`ID ${id} not found`);
+            yomichan.logWarning(new Error(`ID ${id} not found`));
             return;
         }
 
         if (!info.ack) {
-            console.warn(`Request ${id} not ack'd`);
+            yomichan.logWarning(new Error(`Request ${id} not ack'd`));
             return;
         }
 
-        this.callbacks.delete(id);
+        this._callbacks.delete(id);
         clearTimeout(info.timer);
         info.timer = null;
 
@@ -118,10 +118,10 @@ class FrontendApiSender {
         }
     }
 
-    onError(id, reason) {
-        const info = this.callbacks.get(id);
+    _onError(id, reason) {
+        const info = this._callbacks.get(id);
         if (typeof info === 'undefined') { return; }
-        this.callbacks.delete(id);
+        this._callbacks.delete(id);
         info.timer = null;
         info.reject(new Error(reason));
     }
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index eecfe2e1..575dc413 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -25,73 +25,155 @@
  * docSentenceExtract
  */
 
-class Frontend extends TextScanner {
-    constructor(popup) {
-        super(
-            window,
-            () => this.popup.isProxy() ? [] : [this.popup.getContainer()],
-            [(x, y) => this.popup.containsPoint(x, y)]
-        );
-
-        this.popup = popup;
-
+class Frontend {
+    constructor(popup, getUrl=null) {
+        this._id = yomichan.generateId(16);
+        this._popup = popup;
+        this._getUrl = getUrl;
         this._disabledOverride = false;
-
-        this.options = null;
-
-        this.optionsContext = {
-            depth: popup.depth,
-            url: popup.url
-        };
-
+        this._options = null;
         this._pageZoomFactor = 1.0;
         this._contentScale = 1.0;
         this._orphaned = false;
         this._lastShowPromise = Promise.resolve();
+        this._enabledEventListeners = new EventListenerCollection();
+        this._activeModifiers = new Set();
+        this._optionsUpdatePending = false;
+        this._textScanner = new TextScanner({
+            node: window,
+            ignoreElements: () => this._popup.isProxy() ? [] : [this._popup.getFrame()],
+            ignorePoint: (x, y) => this._popup.containsPoint(x, y),
+            search: this._search.bind(this)
+        });
 
         this._windowMessageHandlers = new Map([
-            ['popupClose', () => this.onSearchClear(true)],
-            ['selectionCopy', () => document.execCommand('copy')]
+            ['popupClose', this._onMessagePopupClose.bind(this)],
+            ['selectionCopy', this._onMessageSelectionCopy.bind()]
         ]);
 
         this._runtimeMessageHandlers = new Map([
-            ['popupSetVisibleOverride', ({visible}) => { this.popup.setVisibleOverride(visible); }],
-            ['rootPopupRequestInformationBroadcast', () => { this._broadcastRootPopupInformation(); }],
-            ['requestDocumentInformationBroadcast', ({uniqueId}) => { this._broadcastDocumentInformation(uniqueId); }]
+            ['popupSetVisibleOverride', this._onMessagePopupSetVisibleOverride.bind(this)],
+            ['rootPopupRequestInformationBroadcast', this._onMessageRootPopupRequestInformationBroadcast.bind(this)],
+            ['requestDocumentInformationBroadcast', this._onMessageRequestDocumentInformationBroadcast.bind(this)]
         ]);
     }
 
+    get canClearSelection() {
+        return this._textScanner.canClearSelection;
+    }
+
+    set canClearSelection(value) {
+        this._textScanner.canClearSelection = value;
+    }
+
     async prepare() {
         try {
             await this.updateOptions();
             const {zoomFactor} = await apiGetZoom();
             this._pageZoomFactor = zoomFactor;
 
-            window.addEventListener('resize', this.onResize.bind(this), false);
+            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));
+                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('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));
+            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) {
-            this.onError(e);
+            yomichan.logError(e);
+        }
+    }
+
+    async setPopup(popup) {
+        this._textScanner.clearSelection(true);
+        this._popup = popup;
+        await popup.setOptionsContext(await this.getOptionsContext(), this._id);
+    }
+
+    setDisabledOverride(disabled) {
+        this._disabledOverride = disabled;
+        this._updateTextScannerEnabled();
+    }
+
+    async setTextSource(textSource) {
+        await this._search(textSource, 'script');
+        this._textScanner.setCurrentTextSource(textSource);
+    }
+
+    async getOptionsContext() {
+        const url = this._getUrl !== null ? await this._getUrl() : window.location.href;
+        const depth = this._popup.depth;
+        const modifierKeys = [...this._activeModifiers];
+        return {depth, url, modifierKeys};
+    }
+
+    async updateOptions() {
+        const optionsContext = await this.getOptionsContext();
+        this._options = await apiOptionsGet(optionsContext);
+        this._textScanner.setOptions(this._options);
+        this._updateTextScannerEnabled();
+
+        const ignoreNodes = ['.scan-disable', '.scan-disable *'];
+        if (!this._options.scanning.enableOnPopupExpressions) {
+            ignoreNodes.push('.source-text', '.source-text *');
+        }
+        this._textScanner.ignoreNodes = ignoreNodes.join(',');
+
+        await this._popup.setOptionsContext(optionsContext, this._id);
+
+        this._updateContentScale();
+
+        const textSourceCurrent = this._textScanner.getCurrentTextSource();
+        const causeCurrent = this._textScanner.causeCurrent;
+        if (textSourceCurrent !== null && causeCurrent !== null) {
+            await this._search(textSourceCurrent, causeCurrent);
         }
     }
 
-    onResize() {
+    showContentCompleted() {
+        return this._lastShowPromise;
+    }
+
+    // Message handlers
+
+    _onMessagePopupClose() {
+        this._textScanner.clearSelection(false);
+    }
+
+    _onMessageSelectionCopy() {
+        document.execCommand('copy');
+    }
+
+    _onMessagePopupSetVisibleOverride({visible}) {
+        this._popup.setVisibleOverride(visible);
+    }
+
+    _onMessageRootPopupRequestInformationBroadcast() {
+        this._broadcastRootPopupInformation();
+    }
+
+    _onMessageRequestDocumentInformationBroadcast({uniqueId}) {
+        this._broadcastDocumentInformation(uniqueId);
+    }
+
+    // Private
+
+    _onResize() {
         this._updatePopupPosition();
     }
 
-    onWindowMessage(e) {
+    _onWindowMessage(e) {
         const action = e.data;
         const handler = this._windowMessageHandlers.get(action);
         if (typeof handler !== 'function') { return false; }
@@ -99,10 +181,7 @@ class Frontend extends TextScanner {
         handler();
     }
 
-    onRuntimeMessage({action, params}, sender, callback) {
-        const {targetPopupId} = params || {};
-        if (typeof targetPopupId !== 'undefined' && targetPopupId !== this.popup.id) { return; }
-
+    _onRuntimeMessage({action, params}, sender, callback) {
         const handler = this._runtimeMessageHandlers.get(action);
         if (typeof handler !== 'function') { return false; }
 
@@ -111,112 +190,78 @@ class Frontend extends TextScanner {
         return false;
     }
 
-    onOrphaned() {
+    _onOrphaned() {
         this._orphaned = true;
     }
 
-    onZoomChanged({newZoomFactor}) {
+    _onZoomChanged({newZoomFactor}) {
         this._pageZoomFactor = newZoomFactor;
         this._updateContentScale();
     }
 
-    onVisualViewportScroll() {
+    _onVisualViewportScroll() {
         this._updatePopupPosition();
     }
 
-    onVisualViewportResize() {
+    _onVisualViewportResize() {
         this._updateContentScale();
     }
 
-    getMouseEventListeners() {
-        return [
-            ...super.getMouseEventListeners(),
-            [window, 'message', this.onWindowMessage.bind(this)]
-        ];
-    }
-
-    setDisabledOverride(disabled) {
-        this._disabledOverride = disabled;
-        this.setEnabled(this.options.general.enable, this._canEnable());
+    _onClearSelection({passive}) {
+        this._popup.hide(!passive);
+        this._popup.clearAutoPlayTimer();
+        this._updatePendingOptions();
     }
 
-    async setPopup(popup) {
-        this.onSearchClear(false);
-        this.popup = popup;
-        await popup.setOptions(this.options);
-    }
-
-    async updateOptions() {
-        this.options = await apiOptionsGet(this.getOptionsContext());
-        this.setOptions(this.options, this._canEnable());
-
-        const ignoreNodes = ['.scan-disable', '.scan-disable *'];
-        if (!this.options.scanning.enableOnPopupExpressions) {
-            ignoreNodes.push('.source-text', '.source-text *');
-        }
-        this.ignoreNodes = ignoreNodes.join(',');
-
-        await this.popup.setOptions(this.options);
-
-        this._updateContentScale();
-
-        if (this.textSourceCurrent !== null && this.causeCurrent !== null) {
-            await this.onSearchSource(this.textSourceCurrent, this.causeCurrent);
+    async _onActiveModifiersChanged({modifiers}) {
+        if (areSetsEqual(modifiers, this._activeModifiers)) { return; }
+        this._activeModifiers = modifiers;
+        if (await this._popup.isVisible()) {
+            this._optionsUpdatePending = true;
+            return;
         }
+        await this.updateOptions();
     }
 
-    async onSearchSource(textSource, cause) {
+    async _search(textSource, cause) {
+        await this._updatePendingOptions();
+
         let results = null;
 
         try {
             if (textSource !== null) {
+                const optionsContext = await this.getOptionsContext();
                 results = (
-                    await this.findTerms(textSource) ||
-                    await this.findKanji(textSource)
+                    await this._findTerms(textSource, optionsContext) ||
+                    await this._findKanji(textSource, optionsContext)
                 );
                 if (results !== null) {
                     const focus = (cause === 'mouse');
-                    this.showContent(textSource, focus, results.definitions, results.type);
+                    this._showContent(textSource, focus, results.definitions, results.type, optionsContext);
                 }
             }
         } catch (e) {
             if (this._orphaned) {
-                if (textSource !== null && this.options.scanning.modifier !== 'none') {
-                    this._showPopupContent(textSource, 'orphaned');
+                if (textSource !== null && this._options.scanning.modifier !== 'none') {
+                    this._showPopupContent(textSource, await this.getOptionsContext(), 'orphaned');
                 }
             } else {
-                this.onError(e);
+                yomichan.logError(e);
             }
         } finally {
-            if (results === null && this.options.scanning.autoHideResults) {
-                this.onSearchClear(true);
+            if (results === null && this._options.scanning.autoHideResults) {
+                this._textScanner.clearSelection(false);
             }
         }
 
         return results;
     }
 
-    showContent(textSource, focus, definitions, type) {
-        const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
-        const url = window.location.href;
-        this._showPopupContent(
-            textSource,
-            type,
-            {definitions, context: {sentence, url, focus, disableHistory: true}}
-        );
-    }
-
-    showContentCompleted() {
-        return this._lastShowPromise;
-    }
-
-    async findTerms(textSource) {
-        this.setTextSourceScanLength(textSource, this.options.scanning.length);
-
-        const searchText = textSource.text();
+    async _findTerms(textSource, optionsContext) {
+        const searchText = this._textScanner.getTextSourceContent(textSource, this._options.scanning.length);
         if (searchText.length === 0) { return null; }
 
-        const {definitions, length} = await apiTermsFind(searchText, {}, this.getOptionsContext());
+        const {definitions, length} = await apiTermsFind(searchText, {}, optionsContext);
         if (definitions.length === 0) { return null; }
 
         textSource.setEndOffset(length);
@@ -224,82 +269,97 @@ class Frontend extends TextScanner {
         return {definitions, type: 'terms'};
     }
 
-    async findKanji(textSource) {
-        this.setTextSourceScanLength(textSource, 1);
-
-        const searchText = textSource.text();
+    async _findKanji(textSource, optionsContext) {
+        const searchText = this._textScanner.getTextSourceContent(textSource, 1);
         if (searchText.length === 0) { return null; }
 
-        const definitions = await apiKanjiFind(searchText, this.getOptionsContext());
+        const definitions = await apiKanjiFind(searchText, optionsContext);
         if (definitions.length === 0) { return null; }
 
-        return {definitions, type: 'kanji'};
-    }
+        textSource.setEndOffset(1);
 
-    onSearchClear(changeFocus) {
-        this.popup.hide(changeFocus);
-        this.popup.clearAutoPlayTimer();
-        super.onSearchClear(changeFocus);
+        return {definitions, type: 'kanji'};
     }
 
-    getOptionsContext() {
-        this.optionsContext.url = this.popup.url;
-        return this.optionsContext;
+    _showContent(textSource, focus, definitions, type, optionsContext) {
+        const {url} = optionsContext;
+        const sentence = docSentenceExtract(textSource, this._options.anki.sentenceExt);
+        this._showPopupContent(
+            textSource,
+            optionsContext,
+            type,
+            {definitions, context: {sentence, url, focus, disableHistory: true}}
+        );
     }
 
-    _showPopupContent(textSource, type=null, details=null) {
-        this._lastShowPromise = this.popup.showContent(
+    _showPopupContent(textSource, optionsContext, type=null, details=null) {
+        const context = {optionsContext, source: this._id};
+        this._lastShowPromise = this._popup.showContent(
             textSource.getRect(),
             textSource.getWritingMode(),
             type,
-            details
+            details,
+            context
         );
         return this._lastShowPromise;
     }
 
+    async _updatePendingOptions() {
+        if (this._optionsUpdatePending) {
+            this._optionsUpdatePending = false;
+            await this.updateOptions();
+        }
+    }
+
+    _updateTextScannerEnabled() {
+        const enabled = (
+            this._options.general.enable &&
+            this._popup.depth <= this._options.scanning.popupNestingMaxDepth &&
+            !this._disabledOverride
+        );
+        this._enabledEventListeners.removeAllEventListeners();
+        this._textScanner.setEnabled(enabled);
+        if (enabled) {
+            this._enabledEventListeners.addEventListener(window, 'message', this._onWindowMessage.bind(this));
+        }
+    }
+
     _updateContentScale() {
-        const {popupScalingFactor, popupScaleRelativeToPageZoom, popupScaleRelativeToVisualViewport} = this.options.general;
+        const {popupScalingFactor, popupScaleRelativeToPageZoom, popupScaleRelativeToVisualViewport} = this._options.general;
         let contentScale = popupScalingFactor;
         if (popupScaleRelativeToPageZoom) {
             contentScale /= this._pageZoomFactor;
         }
         if (popupScaleRelativeToVisualViewport) {
-            contentScale /= Frontend._getVisualViewportScale();
+            const visualViewport = window.visualViewport;
+            const visualViewportScale = (visualViewport !== null && typeof visualViewport === 'object' ? visualViewport.scale : 1.0);
+            contentScale /= visualViewportScale;
         }
         if (contentScale === this._contentScale) { return; }
 
         this._contentScale = contentScale;
-        this.popup.setContentScale(this._contentScale);
+        this._popup.setContentScale(this._contentScale);
         this._updatePopupPosition();
     }
 
+    async _updatePopupPosition() {
+        const textSource = this._textScanner.getCurrentTextSource();
+        if (textSource !== null && await this._popup.isVisible()) {
+            this._showPopupContent(textSource, await this.getOptionsContext());
+        }
+    }
+
     _broadcastRootPopupInformation() {
-        if (!this.popup.isProxy() && this.popup.depth === 0 && this.popup.frameId === 0) {
-            apiBroadcastTab('rootPopupInformation', {popupId: this.popup.id, frameId: this.popup.frameId});
+        if (!this._popup.isProxy() && this._popup.depth === 0 && this._popup.frameId === 0) {
+            apiBroadcastTab('rootPopupInformation', {popupId: this._popup.id, frameId: this._popup.frameId});
         }
     }
 
     _broadcastDocumentInformation(uniqueId) {
         apiBroadcastTab('documentInformationBroadcast', {
             uniqueId,
-            frameId: this.popup.frameId,
+            frameId: this._popup.frameId,
             title: document.title
         });
     }
-
-    _canEnable() {
-        return this.popup.depth <= this.options.scanning.popupNestingMaxDepth && !this._disabledOverride;
-    }
-
-    async _updatePopupPosition() {
-        const textSource = this.getCurrentTextSource();
-        if (textSource !== null && await this.popup.isVisible()) {
-            this._showPopupContent(textSource);
-        }
-    }
-
-    static _getVisualViewportScale() {
-        const visualViewport = window.visualViewport;
-        return visualViewport !== null && typeof visualViewport === 'object' ? visualViewport.scale : 1.0;
-    }
 }
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-factory.js
index 958462ff..b10acbaf 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-factory.js
@@ -18,35 +18,31 @@
 /* global
  * FrontendApiReceiver
  * Popup
- * apiFrameInformationGet
  */
 
-class PopupProxyHost {
-    constructor() {
+class PopupFactory {
+    constructor(frameId) {
         this._popups = new Map();
-        this._apiReceiver = null;
-        this._frameId = null;
+        this._frameId = frameId;
     }
 
     // Public functions
 
     async prepare() {
-        const {frameId} = await apiFrameInformationGet();
-        if (typeof frameId !== 'number') { return; }
-        this._frameId = frameId;
-
-        this._apiReceiver = new FrontendApiReceiver(`popup-proxy-host#${this._frameId}`, new Map([
-            ['getOrCreatePopup', this._onApiGetOrCreatePopup.bind(this)],
-            ['setOptions', this._onApiSetOptions.bind(this)],
-            ['hide', this._onApiHide.bind(this)],
-            ['isVisible', this._onApiIsVisibleAsync.bind(this)],
-            ['setVisibleOverride', this._onApiSetVisibleOverride.bind(this)],
-            ['containsPoint', this._onApiContainsPoint.bind(this)],
-            ['showContent', this._onApiShowContent.bind(this)],
-            ['setCustomCss', this._onApiSetCustomCss.bind(this)],
-            ['clearAutoPlayTimer', this._onApiClearAutoPlayTimer.bind(this)],
-            ['setContentScale', this._onApiSetContentScale.bind(this)]
+        const apiReceiver = new FrontendApiReceiver(`popup-factory#${this._frameId}`, new Map([
+            ['getOrCreatePopup',   {async: false, handler: this._onApiGetOrCreatePopup.bind(this)}],
+            ['setOptionsContext',  {async: true,  handler: this._onApiSetOptionsContext.bind(this)}],
+            ['hide',               {async: false, handler: this._onApiHide.bind(this)}],
+            ['isVisible',          {async: true,  handler: this._onApiIsVisibleAsync.bind(this)}],
+            ['setVisibleOverride', {async: true,  handler: this._onApiSetVisibleOverride.bind(this)}],
+            ['containsPoint',      {async: true,  handler: this._onApiContainsPoint.bind(this)}],
+            ['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)}],
+            ['getUrl',             {async: false, handler: this._onApiGetUrl.bind(this)}]
         ]));
+        apiReceiver.prepare();
     }
 
     getOrCreatePopup(id=null, parentId=null, depth=null) {
@@ -91,24 +87,25 @@ class PopupProxyHost {
             popup.setParent(parent);
         }
         this._popups.set(id, popup);
+        popup.prepare();
         return popup;
     }
 
     // API message handlers
 
-    async _onApiGetOrCreatePopup({id, parentId}) {
+    _onApiGetOrCreatePopup({id, parentId}) {
         const popup = this.getOrCreatePopup(id, parentId);
         return {
             id: popup.id
         };
     }
 
-    async _onApiSetOptions({id, options}) {
+    async _onApiSetOptionsContext({id, optionsContext, source}) {
         const popup = this._getPopup(id);
-        return await popup.setOptions(options);
+        return await popup.setOptionsContext(optionsContext, source);
     }
 
-    async _onApiHide({id, changeFocus}) {
+    _onApiHide({id, changeFocus}) {
         const popup = this._getPopup(id);
         return popup.hide(changeFocus);
     }
@@ -125,32 +122,36 @@ class PopupProxyHost {
 
     async _onApiContainsPoint({id, x, y}) {
         const popup = this._getPopup(id);
-        [x, y] = PopupProxyHost._convertPopupPointToRootPagePoint(popup, x, y);
+        [x, y] = this._convertPopupPointToRootPagePoint(popup, x, y);
         return await popup.containsPoint(x, y);
     }
 
-    async _onApiShowContent({id, elementRect, writingMode, type, details}) {
+    async _onApiShowContent({id, elementRect, writingMode, type, details, context}) {
         const popup = this._getPopup(id);
-        elementRect = PopupProxyHost._convertJsonRectToDOMRect(popup, elementRect);
-        if (!PopupProxyHost._popupCanShow(popup)) { return; }
-        return await popup.showContent(elementRect, writingMode, type, details);
+        elementRect = this._convertJsonRectToDOMRect(popup, elementRect);
+        if (!this._popupCanShow(popup)) { return; }
+        return await popup.showContent(elementRect, writingMode, type, details, context);
     }
 
-    async _onApiSetCustomCss({id, css}) {
+    _onApiSetCustomCss({id, css}) {
         const popup = this._getPopup(id);
         return popup.setCustomCss(css);
     }
 
-    async _onApiClearAutoPlayTimer({id}) {
+    _onApiClearAutoPlayTimer({id}) {
         const popup = this._getPopup(id);
         return popup.clearAutoPlayTimer();
     }
 
-    async _onApiSetContentScale({id, scale}) {
+    _onApiSetContentScale({id, scale}) {
         const popup = this._getPopup(id);
         return popup.setContentScale(scale);
     }
 
+    _onApiGetUrl() {
+        return window.location.href;
+    }
+
     // Private functions
 
     _getPopup(id) {
@@ -161,21 +162,21 @@ class PopupProxyHost {
         return popup;
     }
 
-    static _convertJsonRectToDOMRect(popup, jsonRect) {
-        const [x, y] = PopupProxyHost._convertPopupPointToRootPagePoint(popup, jsonRect.x, jsonRect.y);
+    _convertJsonRectToDOMRect(popup, jsonRect) {
+        const [x, y] = this._convertPopupPointToRootPagePoint(popup, jsonRect.x, jsonRect.y);
         return new DOMRect(x, y, jsonRect.width, jsonRect.height);
     }
 
-    static _convertPopupPointToRootPagePoint(popup, x, y) {
+    _convertPopupPointToRootPagePoint(popup, x, y) {
         if (popup.parent !== null) {
-            const popupRect = popup.parent.getContainerRect();
+            const popupRect = popup.parent.getFrameRect();
             x += popupRect.x;
             y += popupRect.y;
         }
         return [x, y];
     }
 
-    static _popupCanShow(popup) {
+    _popupCanShow(popup) {
         return popup.parent === null || popup.parent.isVisibleSync();
     }
 }
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 82ad9a8f..82da839a 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -20,14 +20,13 @@
  */
 
 class PopupProxy {
-    constructor(id, depth, parentId, parentFrameId, url, getFrameOffset=null) {
-        this._parentId = parentId;
-        this._parentFrameId = parentFrameId;
+    constructor(id, depth, parentPopupId, parentFrameId, getFrameOffset=null, setDisabled=null) {
         this._id = id;
         this._depth = depth;
-        this._url = url;
-        this._apiSender = new FrontendApiSender();
+        this._parentPopupId = parentPopupId;
+        this._apiSender = new FrontendApiSender(`popup-factory#${parentFrameId}`);
         this._getFrameOffset = getFrameOffset;
+        this._setDisabled = setDisabled;
 
         this._frameOffset = null;
         this._frameOffsetPromise = null;
@@ -48,14 +47,10 @@ class PopupProxy {
         return this._depth;
     }
 
-    get url() {
-        return this._url;
-    }
-
     // Public functions
 
     async prepare() {
-        const {id} = await this._invokeHostApi('getOrCreatePopup', {id: this._id, parentId: this._parentId});
+        const {id} = await this._invoke('getOrCreatePopup', {id: this._id, parentId: this._parentPopupId});
         this._id = id;
     }
 
@@ -63,20 +58,20 @@ class PopupProxy {
         return true;
     }
 
-    async setOptions(options) {
-        return await this._invokeHostApi('setOptions', {id: this._id, options});
+    async setOptionsContext(optionsContext, source) {
+        return await this._invoke('setOptionsContext', {id: this._id, optionsContext, source});
     }
 
     hide(changeFocus) {
-        this._invokeHostApi('hide', {id: this._id, changeFocus});
+        this._invoke('hide', {id: this._id, changeFocus});
     }
 
     async isVisible() {
-        return await this._invokeHostApi('isVisible', {id: this._id});
+        return await this._invoke('isVisible', {id: this._id});
     }
 
     setVisibleOverride(visible) {
-        this._invokeHostApi('setVisibleOverride', {id: this._id, visible});
+        this._invoke('setVisibleOverride', {id: this._id, visible});
     }
 
     async containsPoint(x, y) {
@@ -84,38 +79,39 @@ class PopupProxy {
             await this._updateFrameOffset();
             [x, y] = this._applyFrameOffset(x, y);
         }
-        return await this._invokeHostApi('containsPoint', {id: this._id, x, y});
+        return await this._invoke('containsPoint', {id: this._id, x, y});
     }
 
-    async showContent(elementRect, writingMode, type=null, details=null) {
+    async showContent(elementRect, writingMode, type, details, context) {
         let {x, y, width, height} = elementRect;
         if (this._getFrameOffset !== null) {
             await this._updateFrameOffset();
             [x, y] = this._applyFrameOffset(x, y);
         }
         elementRect = {x, y, width, height};
-        return await this._invokeHostApi('showContent', {id: this._id, elementRect, writingMode, type, details});
+        return await this._invoke('showContent', {id: this._id, elementRect, writingMode, type, details, context});
     }
 
-    async setCustomCss(css) {
-        return await this._invokeHostApi('setCustomCss', {id: this._id, css});
+    setCustomCss(css) {
+        this._invoke('setCustomCss', {id: this._id, css});
     }
 
     clearAutoPlayTimer() {
-        this._invokeHostApi('clearAutoPlayTimer', {id: this._id});
+        this._invoke('clearAutoPlayTimer', {id: this._id});
+    }
+
+    setContentScale(scale) {
+        this._invoke('setContentScale', {id: this._id, scale});
     }
 
-    async setContentScale(scale) {
-        this._invokeHostApi('setContentScale', {id: this._id, scale});
+    async getUrl() {
+        return await this._invoke('getUrl', {});
     }
 
     // Private
 
-    _invokeHostApi(action, params={}) {
-        if (typeof this._parentFrameId !== 'number') {
-            return Promise.reject(new Error('Invalid frame'));
-        }
-        return this._apiSender.invoke(action, params, `popup-proxy-host#${this._parentFrameId}`);
+    _invoke(action, params={}) {
+        return this._apiSender.invoke(action, params);
     }
 
     async _updateFrameOffset() {
@@ -142,9 +138,13 @@ class PopupProxy {
         try {
             const offset = await this._frameOffsetPromise;
             this._frameOffset = offset !== null ? offset : [0, 0];
+            if (offset === null && this._setDisabled !== null) {
+                this._setDisabled();
+                return;
+            }
             this._frameOffsetUpdatedAt = now;
         } catch (e) {
-            logError(e);
+            yomichan.logError(e);
         } finally {
             this._frameOffsetPromise = null;
         }
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 42f08afa..b7d4b57e 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -16,8 +16,9 @@
  */
 
 /* global
- * apiGetMessageToken
- * apiInjectStylesheet
+ * DOM
+ * apiOptionsGet
+ * dynamicLoader
  */
 
 class Popup {
@@ -29,24 +30,24 @@ class Popup {
         this._child = null;
         this._childrenSupported = true;
         this._injectPromise = null;
+        this._injectPromiseComplete = false;
         this._visible = false;
         this._visibleOverride = null;
         this._options = null;
+        this._optionsContext = null;
         this._contentScale = 1.0;
-        this._containerSizeContentScale = null;
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
-        this._messageToken = null;
+        this._previousOptionsContextSource = null;
 
-        this._container = document.createElement('iframe');
-        this._container.className = 'yomichan-float';
-        this._container.addEventListener('mousedown', (e) => e.stopPropagation());
-        this._container.addEventListener('scroll', (e) => e.stopPropagation());
-        this._container.style.width = '0px';
-        this._container.style.height = '0px';
+        this._frameSizeContentScale = null;
+        this._frameSecret = null;
+        this._frameToken = null;
+        this._frame = document.createElement('iframe');
+        this._frame.className = 'yomichan-float';
+        this._frame.style.width = '0';
+        this._frame.style.height = '0';
 
         this._fullscreenEventListeners = new EventListenerCollection();
-
-        this._updateVisibility();
     }
 
     // Public properties
@@ -71,19 +72,27 @@ class Popup {
         return this._frameId;
     }
 
-    get url() {
-        return window.location.href;
-    }
-
     // Public functions
 
+    prepare() {
+        this._updateVisibility();
+        this._frame.addEventListener('mousedown', (e) => e.stopPropagation());
+        this._frame.addEventListener('scroll', (e) => e.stopPropagation());
+        this._frame.addEventListener('load', this._onFrameLoad.bind(this));
+    }
+
     isProxy() {
         return false;
     }
 
-    async setOptions(options) {
-        this._options = options;
+    async setOptionsContext(optionsContext, source) {
+        this._optionsContext = optionsContext;
+        this._previousOptionsContextSource = source;
+
+        this._options = await apiOptionsGet(optionsContext);
         this.updateTheme();
+
+        this._invokeApi('setOptionsContext', {optionsContext});
     }
 
     hide(changeFocus) {
@@ -111,7 +120,7 @@ class Popup {
 
     async containsPoint(x, y) {
         for (let popup = this; popup !== null && popup.isVisibleSync(); popup = popup._child) {
-            const rect = popup._container.getBoundingClientRect();
+            const rect = popup._frame.getBoundingClientRect();
             if (x >= rect.left && y >= rect.top && x < rect.right && y < rect.bottom) {
                 return true;
             }
@@ -119,14 +128,20 @@ class Popup {
         return false;
     }
 
-    async showContent(elementRect, writingMode, type=null, details=null) {
+    async showContent(elementRect, writingMode, type, details, context) {
         if (this._options === null) { throw new Error('Options not assigned'); }
+
+        const {optionsContext, source} = context;
+        if (source !== this._previousOptionsContextSource) {
+            await this.setOptionsContext(optionsContext, source);
+        }
+
         await this._show(elementRect, writingMode);
         if (type === null) { return; }
         this._invokeApi('setContent', {type, details});
     }
 
-    async setCustomCss(css) {
+    setCustomCss(css) {
         this._invokeApi('setCustomCss', {css});
     }
 
@@ -160,82 +175,218 @@ class Popup {
     }
 
     updateTheme() {
-        this._container.dataset.yomichanTheme = this._options.general.popupOuterTheme;
-        this._container.dataset.yomichanSiteColor = this._getSiteColor();
+        this._frame.dataset.yomichanTheme = this._options.general.popupOuterTheme;
+        this._frame.dataset.yomichanSiteColor = this._getSiteColor();
     }
 
     async setCustomOuterCss(css, useWebExtensionApi) {
-        return await Popup._injectStylesheet(
-            'yomichan-popup-outer-user-stylesheet',
-            'code',
-            css,
-            useWebExtensionApi
-        );
+        return await dynamicLoader.loadStyle('yomichan-popup-outer-user-stylesheet', 'code', css, useWebExtensionApi);
     }
 
     setChildrenSupported(value) {
         this._childrenSupported = value;
     }
 
-    getContainer() {
-        return this._container;
+    getFrame() {
+        return this._frame;
     }
 
-    getContainerRect() {
-        return this._container.getBoundingClientRect();
+    getFrameRect() {
+        return this._frame.getBoundingClientRect();
     }
 
     // Private functions
 
     _inject() {
-        if (this._injectPromise === null) {
-            this._injectPromise = this._createInjectPromise();
+        let injectPromise = this._injectPromise;
+        if (injectPromise === null) {
+            injectPromise = this._createInjectPromise();
+            this._injectPromise = injectPromise;
+            injectPromise.then(
+                () => {
+                    if (injectPromise !== this._injectPromise) { return; }
+                    this._injectPromiseComplete = true;
+                },
+                () => { this._resetFrame(); }
+            );
         }
-        return this._injectPromise;
+        return injectPromise;
+    }
+
+    _initializeFrame(frame, targetOrigin, frameId, setupFrame, timeout=10000) {
+        return new Promise((resolve, reject) => {
+            const tokenMap = new Map();
+            let timer = null;
+            let frameLoadedResolve = null;
+            let frameLoadedReject = null;
+            const frameLoaded = new Promise((resolve2, reject2) => {
+                frameLoadedResolve = resolve2;
+                frameLoadedReject = reject2;
+            });
+
+            const postMessage = (action, params) => {
+                const contentWindow = frame.contentWindow;
+                if (contentWindow === null) { throw new Error('Frame missing content window'); }
+
+                let validOrigin = true;
+                try {
+                    validOrigin = (contentWindow.location.origin === targetOrigin);
+                } catch (e) {
+                    // NOP
+                }
+                if (!validOrigin) { throw new Error('Unexpected frame origin'); }
+
+                contentWindow.postMessage({action, params}, targetOrigin);
+            };
+
+            const onMessage = (message) => {
+                onMessageInner(message);
+                return false;
+            };
+
+            const onMessageInner = async (message) => {
+                try {
+                    if (!isObject(message)) { return; }
+                    const {action, params} = message;
+                    if (!isObject(params)) { return; }
+                    await frameLoaded;
+                    if (timer === null) { return; } // Done
+
+                    switch (action) {
+                        case 'popupPrepared':
+                            {
+                                const {secret} = params;
+                                const token = yomichan.generateId(16);
+                                tokenMap.set(secret, token);
+                                postMessage('initialize', {secret, token, frameId});
+                            }
+                            break;
+                        case 'popupInitialized':
+                            {
+                                const {secret, token} = params;
+                                const token2 = tokenMap.get(secret);
+                                if (typeof token2 !== 'undefined' && token === token2) {
+                                    cleanup();
+                                    resolve({secret, token});
+                                }
+                            }
+                            break;
+                    }
+                } catch (e) {
+                    cleanup();
+                    reject(e);
+                }
+            };
+
+            const onLoad = () => {
+                if (frameLoadedResolve === null) {
+                    cleanup();
+                    reject(new Error('Unexpected load event'));
+                    return;
+                }
+
+                if (Popup.isFrameAboutBlank(frame)) {
+                    return;
+                }
+
+                frameLoadedResolve();
+                frameLoadedResolve = null;
+                frameLoadedReject = null;
+            };
+
+            const cleanup = () => {
+                if (timer === null) { return; } // Done
+                clearTimeout(timer);
+                timer = null;
+
+                frameLoadedResolve = null;
+                if (frameLoadedReject !== null) {
+                    frameLoadedReject(new Error('Terminated'));
+                    frameLoadedReject = null;
+                }
+
+                chrome.runtime.onMessage.removeListener(onMessage);
+                frame.removeEventListener('load', onLoad);
+            };
+
+            // Start
+            timer = setTimeout(() => {
+                cleanup();
+                reject(new Error('Timeout'));
+            }, timeout);
+
+            chrome.runtime.onMessage.addListener(onMessage);
+            frame.addEventListener('load', onLoad);
+
+            // Prevent unhandled rejections
+            frameLoaded.catch(() => {}); // NOP
+
+            setupFrame(frame);
+        });
     }
 
     async _createInjectPromise() {
-        if (this._messageToken === null) {
-            this._messageToken = await apiGetMessageToken();
-        }
+        this._injectStyles();
+
+        const {secret, token} = await this._initializeFrame(this._frame, this._targetOrigin, this._frameId, (frame) => {
+            frame.removeAttribute('src');
+            frame.removeAttribute('srcdoc');
+            this._observeFullscreen(true);
+            this._onFullscreenChanged();
+            frame.contentDocument.location.href = chrome.runtime.getURL('/fg/float.html');
+        });
+        this._frameSecret = secret;
+        this._frameToken = token;
 
+        // Configure
+        const messageId = yomichan.generateId(16);
         const popupPreparedPromise = yomichan.getTemporaryListenerResult(
             chrome.runtime.onMessage,
-            ({action, params}, {resolve}) => {
+            (message, {resolve}) => {
                 if (
-                    action === 'popupPrepareCompleted' &&
-                    isObject(params) &&
-                    params.targetPopupId === this._id
+                    isObject(message) &&
+                    message.action === 'popupConfigured' &&
+                    isObject(message.params) &&
+                    message.params.messageId === messageId
                 ) {
                     resolve();
                 }
             }
         );
-
-        const parentFrameId = (typeof this._frameId === 'number' ? this._frameId : null);
-        this._container.setAttribute('src', chrome.runtime.getURL('/fg/float.html'));
-        this._container.addEventListener('load', () => {
-            this._invokeApi('prepare', {
-                popupInfo: {
-                    id: this._id,
-                    depth: this._depth,
-                    parentFrameId
-                },
-                url: this.url,
-                childrenSupported: this._childrenSupported,
-                scale: this._contentScale
-            });
+        this._invokeApi('configure', {
+            messageId,
+            frameId: this._frameId,
+            popupId: this._id,
+            optionsContext: this._optionsContext,
+            childrenSupported: this._childrenSupported,
+            scale: this._contentScale
         });
-        this._observeFullscreen(true);
-        this._onFullscreenChanged();
-        this._injectStyles();
 
         return popupPreparedPromise;
     }
 
+    _onFrameLoad() {
+        if (!this._injectPromiseComplete) { return; }
+        this._resetFrame();
+    }
+
+    _resetFrame() {
+        const parent = this._frame.parentNode;
+        if (parent !== null) {
+            parent.removeChild(this._frame);
+        }
+        this._frame.removeAttribute('src');
+        this._frame.removeAttribute('srcdoc');
+
+        this._frameSecret = null;
+        this._frameToken = null;
+        this._injectPromise = null;
+        this._injectPromiseComplete = false;
+    }
+
     async _injectStyles() {
         try {
-            await Popup._injectStylesheet('yomichan-popup-outer-stylesheet', 'file', '/fg/css/client.css', true);
+            await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', 'file', '/fg/css/client.css', true);
         } catch (e) {
             // NOP
         }
@@ -271,9 +422,9 @@ class Popup {
     }
 
     _onFullscreenChanged() {
-        const parent = (Popup._getFullscreenElement() || document.body || null);
-        if (parent !== null && this._container.parentNode !== parent) {
-            parent.appendChild(this._container);
+        const parent = this._getFrameParentElement();
+        if (parent !== null && this._frame.parentNode !== parent) {
+            parent.appendChild(this._frame);
         }
     }
 
@@ -281,31 +432,31 @@ class Popup {
         await this._inject();
 
         const optionsGeneral = this._options.general;
-        const container = this._container;
-        const containerRect = container.getBoundingClientRect();
-        const getPosition = (
-            writingMode === 'horizontal-tb' || optionsGeneral.popupVerticalTextPosition === 'default' ?
-            Popup._getPositionForHorizontalText :
-            Popup._getPositionForVerticalText
-        );
+        const frame = this._frame;
+        const frameRect = frame.getBoundingClientRect();
 
-        const viewport = Popup._getViewport(optionsGeneral.popupScaleRelativeToVisualViewport);
+        const viewport = this._getViewport(optionsGeneral.popupScaleRelativeToVisualViewport);
         const scale = this._contentScale;
-        const scaleRatio = this._containerSizeContentScale === null ? 1.0 : scale / this._containerSizeContentScale;
-        this._containerSizeContentScale = scale;
-        let [x, y, width, height, below] = getPosition(
+        const scaleRatio = this._frameSizeContentScale === null ? 1.0 : scale / this._frameSizeContentScale;
+        this._frameSizeContentScale = scale;
+        const getPositionArgs = [
             elementRect,
-            Math.max(containerRect.width * scaleRatio, optionsGeneral.popupWidth * scale),
-            Math.max(containerRect.height * scaleRatio, optionsGeneral.popupHeight * scale),
+            Math.max(frameRect.width * scaleRatio, optionsGeneral.popupWidth * scale),
+            Math.max(frameRect.height * scaleRatio, optionsGeneral.popupHeight * scale),
             viewport,
             scale,
             optionsGeneral,
             writingMode
+        ];
+        let [x, y, width, height, below] = (
+            writingMode === 'horizontal-tb' || optionsGeneral.popupVerticalTextPosition === 'default' ?
+            this._getPositionForHorizontalText(...getPositionArgs) :
+            this._getPositionForVerticalText(...getPositionArgs)
         );
 
         const fullWidth = (optionsGeneral.popupDisplayMode === 'full-width');
-        container.classList.toggle('yomichan-float-full-width', fullWidth);
-        container.classList.toggle('yomichan-float-above', !below);
+        frame.classList.toggle('yomichan-float-full-width', fullWidth);
+        frame.classList.toggle('yomichan-float-above', !below);
 
         if (optionsGeneral.popupDisplayMode === 'full-width') {
             x = viewport.left;
@@ -313,10 +464,10 @@ class Popup {
             width = viewport.right - viewport.left;
         }
 
-        container.style.left = `${x}px`;
-        container.style.top = `${y}px`;
-        container.style.width = `${width}px`;
-        container.style.height = `${height}px`;
+        frame.style.left = `${x}px`;
+        frame.style.top = `${y}px`;
+        frame.style.width = `${width}px`;
+        frame.style.height = `${height}px`;
 
         this._setVisible(true);
         if (this._child !== null) {
@@ -330,20 +481,20 @@ class Popup {
     }
 
     _updateVisibility() {
-        this._container.style.setProperty('visibility', this.isVisibleSync() ? 'visible' : 'hidden', 'important');
+        this._frame.style.setProperty('visibility', this.isVisibleSync() ? 'visible' : 'hidden', 'important');
     }
 
     _focusParent() {
         if (this._parent !== null) {
             // Chrome doesn't like focusing iframe without contentWindow.
-            const contentWindow = this._parent._container.contentWindow;
+            const contentWindow = this._parent.getFrame().contentWindow;
             if (contentWindow !== null) {
                 contentWindow.focus();
             }
         } else {
             // Firefox doesn't like focusing window without first blurring the iframe.
-            // this.container.contentWindow.blur() doesn't work on Firefox for some reason.
-            this._container.blur();
+            // this._frame.contentWindow.blur() doesn't work on Firefox for some reason.
+            this._frame.blur();
             // This is needed for Chrome.
             window.focus();
         }
@@ -351,36 +502,52 @@ class Popup {
 
     _getSiteColor() {
         const color = [255, 255, 255];
-        Popup._addColor(color, Popup._getColorInfo(window.getComputedStyle(document.documentElement).backgroundColor));
-        Popup._addColor(color, Popup._getColorInfo(window.getComputedStyle(document.body).backgroundColor));
+        const {documentElement, body} = document;
+        if (documentElement !== null) {
+            this._addColor(color, window.getComputedStyle(documentElement).backgroundColor);
+        }
+        if (body !== null) {
+            this._addColor(color, window.getComputedStyle(body).backgroundColor);
+        }
         const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128);
         return dark ? 'dark' : 'light';
     }
 
     _invokeApi(action, params={}) {
-        const token = this._messageToken;
-        const contentWindow = this._container.contentWindow;
-        if (token === null || contentWindow === null) { return; }
+        const secret = this._frameSecret;
+        const token = this._frameToken;
+        const contentWindow = this._frame.contentWindow;
+        if (secret === null || token === null || contentWindow === null) { return; }
 
-        contentWindow.postMessage({action, params, token}, this._targetOrigin);
+        contentWindow.postMessage({action, params, secret, token}, this._targetOrigin);
     }
 
-    static _getFullscreenElement() {
-        return (
-            document.fullscreenElement ||
-            document.msFullscreenElement ||
-            document.mozFullScreenElement ||
-            document.webkitFullscreenElement ||
-            null
-        );
+    _getFrameParentElement() {
+        const defaultParent = document.body;
+        const fullscreenElement = DOM.getFullscreenElement();
+        if (
+            fullscreenElement === null ||
+            fullscreenElement.shadowRoot ||
+            fullscreenElement.openOrClosedShadowRoot // Available to Firefox 63+ for WebExtensions
+        ) {
+            return defaultParent;
+        }
+
+        switch (fullscreenElement.nodeName.toUpperCase()) {
+            case 'IFRAME':
+            case 'FRAME':
+                return defaultParent;
+        }
+
+        return fullscreenElement;
     }
 
-    static _getPositionForHorizontalText(elementRect, width, height, viewport, offsetScale, optionsGeneral) {
+    _getPositionForHorizontalText(elementRect, width, height, viewport, offsetScale, optionsGeneral) {
         const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below');
         const horizontalOffset = optionsGeneral.popupHorizontalOffset * offsetScale;
         const verticalOffset = optionsGeneral.popupVerticalOffset * offsetScale;
 
-        const [x, w] = Popup._getConstrainedPosition(
+        const [x, w] = this._getConstrainedPosition(
             elementRect.right - horizontalOffset,
             elementRect.left + horizontalOffset,
             width,
@@ -388,7 +555,7 @@ class Popup {
             viewport.right,
             true
         );
-        const [y, h, below] = Popup._getConstrainedPositionBinary(
+        const [y, h, below] = this._getConstrainedPositionBinary(
             elementRect.top - verticalOffset,
             elementRect.bottom + verticalOffset,
             height,
@@ -399,12 +566,12 @@ class Popup {
         return [x, y, w, h, below];
     }
 
-    static _getPositionForVerticalText(elementRect, width, height, viewport, offsetScale, optionsGeneral, writingMode) {
-        const preferRight = Popup._isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode);
+    _getPositionForVerticalText(elementRect, width, height, viewport, offsetScale, optionsGeneral, writingMode) {
+        const preferRight = this._isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode);
         const horizontalOffset = optionsGeneral.popupHorizontalOffset2 * offsetScale;
         const verticalOffset = optionsGeneral.popupVerticalOffset2 * offsetScale;
 
-        const [x, w] = Popup._getConstrainedPositionBinary(
+        const [x, w] = this._getConstrainedPositionBinary(
             elementRect.left - horizontalOffset,
             elementRect.right + horizontalOffset,
             width,
@@ -412,7 +579,7 @@ class Popup {
             viewport.right,
             preferRight
         );
-        const [y, h, below] = Popup._getConstrainedPosition(
+        const [y, h, below] = this._getConstrainedPosition(
             elementRect.bottom - verticalOffset,
             elementRect.top + verticalOffset,
             height,
@@ -423,20 +590,22 @@ class Popup {
         return [x, y, w, h, below];
     }
 
-    static _isVerticalTextPopupOnRight(positionPreference, writingMode) {
+    _isVerticalTextPopupOnRight(positionPreference, writingMode) {
         switch (positionPreference) {
             case 'before':
-                return !Popup._isWritingModeLeftToRight(writingMode);
+                return !this._isWritingModeLeftToRight(writingMode);
             case 'after':
-                return Popup._isWritingModeLeftToRight(writingMode);
+                return this._isWritingModeLeftToRight(writingMode);
             case 'left':
                 return false;
             case 'right':
                 return true;
+            default:
+                return false;
         }
     }
 
-    static _isWritingModeLeftToRight(writingMode) {
+    _isWritingModeLeftToRight(writingMode) {
         switch (writingMode) {
             case 'vertical-lr':
             case 'sideways-lr':
@@ -446,7 +615,7 @@ class Popup {
         }
     }
 
-    static _getConstrainedPosition(positionBefore, positionAfter, size, minLimit, maxLimit, after) {
+    _getConstrainedPosition(positionBefore, positionAfter, size, minLimit, maxLimit, after) {
         size = Math.min(size, maxLimit - minLimit);
 
         let position;
@@ -461,7 +630,7 @@ class Popup {
         return [position, size, after];
     }
 
-    static _getConstrainedPositionBinary(positionBefore, positionAfter, size, minLimit, maxLimit, after) {
+    _getConstrainedPositionBinary(positionBefore, positionAfter, size, minLimit, maxLimit, after) {
         const overflowBefore = minLimit - (positionBefore - size);
         const overflowAfter = (positionAfter + size) - maxLimit;
 
@@ -481,7 +650,10 @@ class Popup {
         return [position, size, after];
     }
 
-    static _addColor(target, color) {
+    _addColor(target, cssColor) {
+        if (typeof cssColor !== 'string') { return; }
+
+        const color = this._getColorInfo(cssColor);
         if (color === null) { return; }
 
         const a = color[3];
@@ -493,7 +665,7 @@ class Popup {
         }
     }
 
-    static _getColorInfo(cssColor) {
+    _getColorInfo(cssColor) {
         const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)\s*$/.exec(cssColor);
         if (m === null) { return null; }
 
@@ -506,7 +678,7 @@ class Popup {
         ];
     }
 
-    static _getViewport(useVisualViewport) {
+    _getViewport(useVisualViewport) {
         const visualViewport = window.visualViewport;
         if (visualViewport !== null && typeof visualViewport === 'object') {
             const left = visualViewport.offsetLeft;
@@ -531,87 +703,23 @@ class Popup {
             }
         }
 
+        const body = document.body;
         return {
             left: 0,
             top: 0,
-            right: document.body.clientWidth,
+            right: (body !== null ? body.clientWidth : 0),
             bottom: window.innerHeight
         };
     }
 
-    static _isOnExtensionPage() {
+    static isFrameAboutBlank(frame) {
         try {
-            const url = chrome.runtime.getURL('/');
-            return window.location.href.substring(0, url.length) === url;
+            const contentDocument = frame.contentDocument;
+            if (contentDocument === null) { return false; }
+            const url = contentDocument.location.href;
+            return /^about:blank(?:[#?]|$)/.test(url);
         } catch (e) {
-            // NOP
-        }
-    }
-
-    static async _injectStylesheet(id, type, value, useWebExtensionApi) {
-        const injectedStylesheets = Popup._injectedStylesheets;
-
-        if (Popup._isOnExtensionPage()) {
-            // Permissions error will occur if trying to use the WebExtension API to inject
-            // into an extension page.
-            useWebExtensionApi = false;
-        }
-
-        let styleNode = injectedStylesheets.get(id);
-        if (typeof styleNode !== 'undefined') {
-            if (styleNode === null) {
-                // Previously injected via WebExtension API
-                throw new Error(`Stylesheet with id ${id} has already been injected using the WebExtension API`);
-            }
-        } else {
-            styleNode = null;
+            return false;
         }
-
-        if (useWebExtensionApi) {
-            // Inject via WebExtension API
-            if (styleNode !== null && styleNode.parentNode !== null) {
-                styleNode.parentNode.removeChild(styleNode);
-            }
-
-            await apiInjectStylesheet(type, value);
-
-            injectedStylesheets.set(id, null);
-            return null;
-        }
-
-        // Create node in document
-        const parentNode = document.head;
-        if (parentNode === null) {
-            throw new Error('No parent node');
-        }
-
-        // Create or reuse node
-        const isFile = (type === 'file');
-        const tagName = isFile ? 'link' : 'style';
-        if (styleNode === null || styleNode.nodeName.toLowerCase() !== tagName) {
-            if (styleNode !== null && styleNode.parentNode !== null) {
-                styleNode.parentNode.removeChild(styleNode);
-            }
-            styleNode = document.createElement(tagName);
-            styleNode.id = id;
-        }
-
-        // Update node style
-        if (isFile) {
-            styleNode.rel = value;
-        } else {
-            styleNode.textContent = value;
-        }
-
-        // Update parent
-        if (styleNode.parentNode !== parentNode) {
-            parentNode.appendChild(styleNode);
-        }
-
-        // Add to map
-        injectedStylesheets.set(id, styleNode);
-        return styleNode;
     }
 }
-
-Popup._injectedStylesheets = new Map();
diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js
index 3d9afe0f..fa4706f2 100644
--- a/ext/fg/js/source.js
+++ b/ext/fg/js/source.js
@@ -46,10 +46,14 @@ class TextSourceRange {
         return this.content;
     }
 
-    setEndOffset(length) {
-        const state = TextSourceRange.seekForward(this.range.startContainer, this.range.startOffset, length);
+    setEndOffset(length, fromEnd=false) {
+        const state = (
+            fromEnd ?
+            TextSourceRange.seekForward(this.range.endContainer, this.range.endOffset, length) :
+            TextSourceRange.seekForward(this.range.startContainer, this.range.startOffset, length)
+        );
         this.range.setEnd(state.node, state.offset);
-        this.content = state.content;
+        this.content = (fromEnd ? this.content + state.content : state.content);
         return length - state.remainder;
     }
 
@@ -57,7 +61,7 @@ class TextSourceRange {
         const state = TextSourceRange.seekBackward(this.range.startContainer, this.range.startOffset, length);
         this.range.setStart(state.node, state.offset);
         this.rangeStartOffset = this.range.startOffset;
-        this.content = state.content;
+        this.content = state.content + this.content;
         return length - state.remainder;
     }
 
@@ -94,7 +98,15 @@ class TextSourceRange {
                 this.rangeStartOffset === other.rangeStartOffset
             );
         } else {
-            return this.range.compareBoundaryPoints(Range.START_TO_START, other.range) === 0;
+            try {
+                return this.range.compareBoundaryPoints(Range.START_TO_START, other.range) === 0;
+            } catch (e) {
+                if (e.name === 'WrongDocumentError') {
+                    // This can happen with shadow DOMs if the ranges are in different documents.
+                    return false;
+                }
+                throw e;
+            }
         }
     }
 
@@ -110,7 +122,8 @@ class TextSourceRange {
         return !(
             style.visibility === 'hidden' ||
             style.display === 'none' ||
-            parseFloat(style.fontSize) === 0);
+            parseFloat(style.fontSize) === 0
+        );
     }
 
     static getRubyElement(node) {
@@ -345,13 +358,32 @@ class TextSourceRange {
  */
 
 class TextSourceElement {
-    constructor(element, content='') {
-        this.element = element;
-        this.content = content;
+    constructor(element, fullContent=null, startOffset=0, endOffset=0) {
+        this._element = element;
+        this._fullContent = (typeof fullContent === 'string' ? fullContent : TextSourceElement.getElementContent(element));
+        this._startOffset = startOffset;
+        this._endOffset = endOffset;
+        this._content = this._fullContent.substring(this._startOffset, this._endOffset);
+    }
+
+    get element() {
+        return this._element;
+    }
+
+    get fullContent() {
+        return this._fullContent;
+    }
+
+    get startOffset() {
+        return this._startOffset;
+    }
+
+    get endOffset() {
+        return this._endOffset;
     }
 
     clone() {
-        return new TextSourceElement(this.element, this.content);
+        return new TextSourceElement(this._element, this._fullContent, this._startOffset, this._endOffset);
     }
 
     cleanup() {
@@ -359,44 +391,32 @@ class TextSourceElement {
     }
 
     text() {
-        return this.content;
+        return this._content;
     }
 
-    setEndOffset(length) {
-        switch (this.element.nodeName.toUpperCase()) {
-            case 'BUTTON':
-                this.content = this.element.textContent;
-                break;
-            case 'IMG':
-                this.content = this.element.getAttribute('alt');
-                break;
-            default:
-                this.content = this.element.value;
-                break;
-        }
-
-        let consumed = 0;
-        let content = '';
-        for (const currentChar of this.content || '') {
-            if (consumed >= length) {
-                break;
-            } else if (!currentChar.match(IGNORE_TEXT_PATTERN)) {
-                consumed++;
-                content += currentChar;
-            }
+    setEndOffset(length, fromEnd=false) {
+        if (fromEnd) {
+            const delta = Math.min(this._fullContent.length - this._endOffset, length);
+            this._endOffset += delta;
+            this._content = this._fullContent.substring(this._startOffset, this._endOffset);
+            return delta;
+        } else {
+            const delta = Math.min(this._fullContent.length - this._startOffset, length);
+            this._endOffset = this._startOffset + delta;
+            this._content = this._fullContent.substring(this._startOffset, this._endOffset);
+            return delta;
         }
-
-        this.content = content;
-
-        return this.content.length;
     }
 
-    setStartOffset() {
-        return 0;
+    setStartOffset(length) {
+        const delta = Math.min(this._startOffset, length);
+        this._startOffset -= delta;
+        this._content = this._fullContent.substring(this._startOffset, this._endOffset);
+        return delta;
     }
 
     getRect() {
-        return this.element.getBoundingClientRect();
+        return this._element.getBoundingClientRect();
     }
 
     getWritingMode() {
@@ -416,8 +436,30 @@ class TextSourceElement {
             typeof other === 'object' &&
             other !== null &&
             other instanceof TextSourceElement &&
-            other.element === this.element &&
-            other.content === this.content
+            this._element === other.element &&
+            this._fullContent === other.fullContent &&
+            this._startOffset === other.startOffset &&
+            this._endOffset === other.endOffset
         );
     }
+
+    static getElementContent(element) {
+        let content;
+        switch (element.nodeName.toUpperCase()) {
+            case 'BUTTON':
+                content = element.textContent;
+                break;
+            case 'IMG':
+                content = element.getAttribute('alt') || '';
+                break;
+            default:
+                content = `${element.value}`;
+                break;
+        }
+
+        // Remove zero-width non-joiner
+        content = content.replace(/\u200c/g, '');
+
+        return content;
+    }
 }