Move inline script to a file

Author: lexesj

src/scripts/window-proxy/script.ts

@@ -0,0 +1,39 @@
+/**
+ * Main function.
+ */
+((): void => {
+  const { currentScript } = document;
+
+  /**
+   * Retrieves the property and sets it as the data attribute.
+   */
+  const setAttribute = (): void => {
+    if (!currentScript) {
+      return;
+    }
+
+    const { property } = currentScript.dataset;
+
+    if (!property) {
+      return;
+    }
+
+    currentScript.dataset.value = JSON.stringify(
+      window[property as keyof Window]
+    );
+  };
+
+  if (document.readyState === 'complete') {
+    setAttribute();
+
+    return;
+  }
+
+  const listener = (): void => {
+    setAttribute();
+
+    window.removeEventListener('load', listener);
+  };
+
+  window.addEventListener('load', listener);
+})();

src/utils/window.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { browser } from 'webextension-polyfill-ts';
 
 /**
  * Adds an event listener to the window.
@@ -29,83 +30,31 @@ export class WindowProxy {
    * @param property Property to retrieve from proxy window.
    */
   getProperty<T = any>(property: string): Promise<T> {
-    /**
-     * Adds the proxy window script to the page.
-     */
-    const addProxyScript = (): HTMLScriptElement => {
+    return new Promise((resolve, reject) => {
       const script = document.createElement('script');
-      const scriptContent = document.createTextNode(`
-        const { currentScript } = document;
-
-        /**
-         * Retrieves the property and sets it as the data attribute.
-         */
-        const setAttribute = () => {
-          const { property } = currentScript.dataset;
-
-          currentScript.dataset.value = JSON.stringify(window[property]);
-        }
-
-        /**
-         * Main function.
-         */
-        (() => {
-          if (document.readyState === 'complete') {
-            setAttribute();
-
-            return;
-          }
-
-          const listener = () => {
-            setAttribute();
-
-            window.removeEventListener('load', listener);
-          };
-
-          window.addEventListener('load', listener);
-        })();
-      `);
 
+      script.src = browser.runtime.getURL('window-proxy-script.js');
       script.dataset.property = property;
-      script.appendChild(scriptContent);
 
-      document.head.appendChild(script);
+      (document.head || document.documentElement).appendChild(script);
 
-      return script;
-    };
+      new MutationObserver((_mutations, observer) => {
+        const { value } = script.dataset;
 
-    return new Promise((resolve, reject) => {
-      /**
-       * Retrieves the data from the script tag.
-       */
-      const getData = (): void => {
-        const script = addProxyScript();
-
-        try {
-          const { value } = script.dataset;
-          // script.remove();
-
-          if (!value) {
-            reject(new Error('The value is empty'));
+        if (!value) {
+          return;
+        }
 
-            return;
-          }
+        observer.disconnect();
 
+        try {
           resolve(JSON.parse(value));
         } catch (error: any) {
           reject(error);
         }
-      };
-
-      if (document.readyState === 'complete') {
-        getData();
-
-        return;
-      }
 
-      window.addEventListener('load', () => {
-        getData();
-      });
+        script.remove();
+      }).observe(script, { attributes: true });
     });
   }
 }

webpack/manifest.js

@@ -16,6 +16,7 @@ const manifest = {
   background: {
     scripts: ['background-script.js'],
   },
+  web_accessible_resources: ['window-proxy-script.js'],
   permissions: [
     'storage',
     '*://api.aniskip.com/*',

webpack/webpack.common.config.js

@@ -16,6 +16,7 @@ module.exports = {
     'background-script': './src/scripts/background/script.ts',
     'content-script': './src/scripts/content/script.ts',
     'player-script': './src/scripts/player/script.ts',
+    'window-proxy-script': './src/scripts/window-proxy/script.ts',
   },
   output: {
     path: path.join(__dirname, '..', 'dist'),