Merge pull request #97 from yakisova41/dev-script-use-gm-xhr

✨ feature: It can disable to websocket in dev userscript.

docs/docs/Configuring/dev-server.md

@@ -8,23 +8,34 @@ The host and port used during development mode can be configured.
         host: 'localhost',
         port: 3000,
         websocket: 3001,
+        disableWsUserscript: false
     }
 }
 ```
 
 ## devServer
 
 ### host
+
 `string`
 
 Common host name used by the development server
 
 ### port
+
 `number`
 
 Port to serve js resource.
 
 ### websocket
+
 `number`
 
-Port on websocket server for reloading
+Port on websocket server for reloading
+
+### disableWsUserscript
+
+`boolean`
+
+If websocket is blocked by WSS,
+When this option is enabled, Websocket is not used for automatic reloading in development user scripts. Instead, it retrieves the code at 1000ms intervals and reloads if differences appear in the code.

packages/crx-monkey/src/node/config.ts

@@ -14,6 +14,7 @@ const defaultConfig: CrxMonkeyConfig = {
     port: 3000,
     host: 'localhost',
     websocket: 3001,
+    disableWsUserscript: false,
   },
   publicDir: path.join(process.cwd(), './public'),
   userScriptHeader: [],

packages/crx-monkey/src/node/handlers/dev/create-client/create-dev-userscript.ts

@@ -3,6 +3,7 @@ import path from 'path';
 import fse from 'fs-extra';
 import { UserscriptHeaderFactory } from 'src/node/userscript-header-factory';
 import { loadStaticFile } from 'src/node/static/main';
+import { CrxMonkeyConfig } from 'src/node/types';
 
 export function createDevUserscript(headerFactory: UserscriptHeaderFactory) {
   const fileName = 'crx-monkey-dev.user.js';
@@ -24,12 +25,21 @@ export function createDevUserscript(headerFactory: UserscriptHeaderFactory) {
   }
 }
 
-function generateDevUserscriptCode(devServer: { port: number; host: string; websocket: number }) {
-  const code = loadStaticFile(path.join(import.meta.dirname, './static/userScriptDev.js'), {
-    'devServer.host': devServer.host,
-    'devServer.port': String(devServer.port),
-    'devServer.websocket': String(devServer.websocket),
-  });
+function generateDevUserscriptCode(devServer: CrxMonkeyConfig['devServer']) {
+  let code: string;
+
+  if (devServer.disableWsUserscript) {
+    code = loadStaticFile(path.join(import.meta.dirname, './static/userScriptDevUseGmXhr.js'), {
+      'devServer.host': devServer.host,
+      'devServer.port': String(devServer.port),
+    });
+  } else {
+    code = loadStaticFile(path.join(import.meta.dirname, './static/userScriptDev.js'), {
+      'devServer.host': devServer.host,
+      'devServer.port': String(devServer.port),
+      'devServer.websocket': String(devServer.websocket),
+    });
+  }
 
   return code;
 }

packages/crx-monkey/src/node/static/files/userScriptDevUseGmXhr.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-undef */
+async function getResponse() {
+  return new Promise((resolve) => {
+    GM.xmlHttpRequest({
+      url: 'http://${devServer.host}:${devServer.port}/userscript',
+      onload: (e) => {
+        resolve(e.responseText);
+      },
+    });
+  });
+}
+
+function watchScriptDiff(initialCode) {
+  let scriptContentTmp = initialCode;
+
+  setInterval(() => {
+    getResponse().then((code) => {
+      if (scriptContentTmp !== code) {
+        location.reload();
+      }
+    });
+  }, 1000);
+
+  return scriptContentTmp;
+}
+
+getResponse().then((code) => {
+  watchScriptDiff(code);
+
+  const scriptElem = document.createElement('script');
+  scriptElem.textContent = code;
+  unsafeWindow.document.body.appendChild(scriptElem);
+});

packages/crx-monkey/src/node/types.ts

@@ -10,6 +10,7 @@ export interface CrxMonkeyConfig {
     port: number;
     host: string;
     websocket: number;
+    disableWsUserscript: boolean;
   };
   publicDir: string;
   userScriptHeader: UserScriptHeader;