Update nested initialization parameters passed via message rather than using the URL query string

ext/fg/js/float.js

@@ -72,6 +72,10 @@ class DisplayFloat extends Display {
                 if (css) {
                     this.setStyle(css);
                 }
+            },
+
+            popupNestedInitialize: ({id, depth, parentFrameId}) => {
+                popupNestedInitialize(id, depth, parentFrameId);
             }
         };
 

ext/fg/js/frontend.js

@@ -37,23 +37,9 @@ class Frontend {
     }
 
     static create() {
-        const floatUrl = chrome.extension.getURL('/fg/float.html');
+        const initializationData = window.frontendInitializationData;
-        const currentUrl = location.href.replace(/[\?#][\w\W]*$/, "");
+        const isNested = (initializationData !== null && typeof initializationData === 'object');
-        const isNested = (currentUrl === floatUrl);
+        const {id, parentFrameId} = initializationData || {};
-
-        let id = null;
-        let parentFrameId = null;
-        if (isNested) {
-            let match = /[&?]id=([^&]*?)(?:&|$)/.exec(location.href);
-            if (match !== null) {
-                id = match[1];
-            }
-
-            match = /[&?]parent=(\d+)(?:&|$)/.exec(location.href);
-            if (match !== null) {
-                parentFrameId = parseInt(match[1], 10);
-            }
-        }
 
         const popup = isNested ? new PopupProxy(id, parentFrameId) : PopupProxyHost.instance.createPopup(null);
         const frontend = new Frontend(popup);

ext/fg/js/popup-nested.js

@@ -17,20 +17,23 @@
  */
 
 
-async function popupNestedSetup() {
+let popupNestedInitialized = false;
+
+async function popupNestedInitialize(id, depth, parentFrameId) {
+    if (popupNestedInitialized) {
+        return;
+    }
+    popupNestedInitialized = true;
+
     const options = await apiOptionsGet();
     const popupNestingMaxDepth = options.scanning.popupNestingMaxDepth;
 
-    let depth = null;
-    const match = /[&?]depth=([^&]*?)(?:&|$)/.exec(location.href);
-    if (match !== null) {
-        depth = parseInt(match[1], 10);
-    }
-
     if (!(typeof popupNestingMaxDepth === 'number' && typeof depth === 'number' && depth < popupNestingMaxDepth)) {
         return;
     }
 
+    window.frontendInitializationData = {id, depth, parentFrameId};
+
     const scriptSrcs = [
         '/fg/js/frontend-api-sender.js',
         '/fg/js/popup.js',
@@ -44,5 +47,3 @@ async function popupNestedSetup() {
         document.body.appendChild(script);
     }
 }
-
-popupNestedSetup();

ext/fg/js/popup.js

@@ -29,6 +29,7 @@ class Popup {
         this.container.id = 'yomichan-float';
         this.container.addEventListener('mousedown', e => e.stopPropagation());
         this.container.addEventListener('scroll', e => e.stopPropagation());
+        this.container.setAttribute('src', chrome.extension.getURL('/fg/float.html'));
         this.container.style.width = '0px';
         this.container.style.height = '0px';
         this.injectPromise = null;
@@ -53,9 +54,13 @@ class Popup {
         }
 
         return new Promise((resolve) => {
-            const parent = (typeof this.frameId === 'number' ? this.frameId : '');
+            const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
-            this.container.setAttribute('src', chrome.extension.getURL(`/fg/float.html?id=${this.id}&depth=${this.depth}&parent=${parent}`));
             this.container.addEventListener('load', () => {
+                this.invokeApi('popupNestedInitialize', {
+                    id: this.id,
+                    depth: this.depth,
+                    parentFrameId
+                });
                 this.invokeApi('setOptions', {
                     general: {
                         customPopupCss: options.general.customPopupCss