Use dynamicLoader for main (#481)

* Update style of search-main and float-main to have better parity

* Use dynamicLoader to inject scripts and CSS

ext/bg/js/search-main.js

@@ -19,10 +19,14 @@
  * DisplaySearch
  * apiForwardLogsToBackend
  * apiOptionsGet
+ * dynamicLoader
  */
 
-function injectSearchFrontend() {
+async function injectSearchFrontend() {
-    const scriptSrcs = [
+    dynamicLoader.loadStyles([
+        '/fg/css/client.css'
+    ]);
+    await dynamicLoader.loadScripts([
         '/mixed/js/text-scanner.js',
         '/fg/js/frontend-api-receiver.js',
         '/fg/js/frame-offset-forwarder.js',
@@ -30,27 +34,7 @@ function injectSearchFrontend() {
         '/fg/js/popup-proxy-host.js',
         '/fg/js/frontend.js',
         '/fg/js/content-script-main.js'
-    ];
+    ]);
-    for (const src of scriptSrcs) {
-        const node = document.querySelector(`script[src='${src}']`);
-        if (node !== null) { continue; }
-
-        const script = document.createElement('script');
-        script.async = false;
-        script.src = src;
-        document.body.appendChild(script);
-    }
-
-    const styleSrcs = [
-        '/fg/css/client.css'
-    ];
-    for (const src of styleSrcs) {
-        const style = document.createElement('link');
-        style.rel = 'stylesheet';
-        style.type = 'text/css';
-        style.href = src;
-        document.head.appendChild(style);
-    }
 }
 
 (async () => {
@@ -63,18 +47,15 @@ function injectSearchFrontend() {
     let optionsApplied = false;
 
     const applyOptions = async () => {
-        const optionsContext = {
+        const optionsContext = {depth: 0, url: window.location.href};
-            depth: 0,
-            url: window.location.href
-        };
         const options = await apiOptionsGet(optionsContext);
         if (!options.scanning.enableOnSearchPage || optionsApplied) { return; }
+
         optionsApplied = true;
+        yomichan.off('optionsUpdated', applyOptions);
 
         window.frontendInitializationData = {depth: 1, proxy: false, isSearchPage: true};
-        injectSearchFrontend();
+        await injectSearchFrontend();
-
-        yomichan.off('optionsUpdated', applyOptions);
     };
 
     yomichan.on('optionsUpdated', applyOptions);

ext/bg/search.html

@@ -86,6 +86,7 @@
         <script src="/mixed/js/display-context.js"></script>
         <script src="/mixed/js/display.js"></script>
         <script src="/mixed/js/display-generator.js"></script>
+        <script src="/mixed/js/dynamic-loader.js"></script>
         <script src="/mixed/js/media-loader.js"></script>
         <script src="/mixed/js/scroll.js"></script>
         <script src="/mixed/js/text-scanner.js"></script>

ext/fg/float.html

@@ -52,6 +52,7 @@
         <script src="/mixed/js/display-context.js"></script>
         <script src="/mixed/js/display.js"></script>
         <script src="/mixed/js/display-generator.js"></script>
+        <script src="/mixed/js/dynamic-loader.js"></script>
         <script src="/mixed/js/media-loader.js"></script>
         <script src="/mixed/js/scroll.js"></script>
         <script src="/mixed/js/template-handler.js"></script>

ext/fg/js/float-main.js

@@ -19,23 +19,18 @@
  * DisplayFloat
  * apiForwardLogsToBackend
  * apiOptionsGet
+ * dynamicLoader
  */
 
-function injectPopupNested() {
+async function injectPopupNested() {
-    const scriptSrcs = [
+    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/content-script-main.js'
-    ];
+    ]);
-    for (const src of scriptSrcs) {
-        const script = document.createElement('script');
-        script.async = false;
-        script.src = src;
-        document.body.appendChild(script);
-    }
 }
 
 async function popupNestedInitialize(id, depth, parentFrameId, url) {
@@ -44,23 +39,14 @@ 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 depth === 'number' && depth < options.scanning.popupNestingMaxDepth);
-
+        if (maxPopupDepthExceeded || optionsApplied) { return; }
-        const maxPopupDepthExceeded = !(
-            typeof popupNestingMaxDepth === 'number' &&
-            typeof depth === 'number' &&
-            depth < popupNestingMaxDepth
-        );
-        if (maxPopupDepthExceeded || optionsApplied) {
-            return;
-        }
 
         optionsApplied = true;
+        yomichan.off('optionsUpdated', applyOptions);
 
         window.frontendInitializationData = {id, depth, parentFrameId, url, proxy: true};
-        injectPopupNested();
+        await injectPopupNested();
-
-        yomichan.off('optionsUpdated', applyOptions);
     };
 
     yomichan.on('optionsUpdated', applyOptions);