crx-monkey-next 0.0.1

package/src/node/development/CreateDevClient.ts

@@ -0,0 +1,168 @@
+import { inject, injectable } from 'inversify';
+import { TYPES } from '../types';
+import { ConfigLoader } from '../ConfigLoader';
+import { developSw } from './codes/sw';
+import { CrxmBundler } from '../CrxmBundler';
+import { UserscriptHeaderFactory } from '../userscript/UserscriptHeader';
+import { userjs } from './codes/userjs';
+import { resolve } from 'path';
+import { developmentContentScript, isolatedConnector } from './codes/extension';
+import fsExtra, { outputFileSync } from 'fs-extra/esm';
+import { ManifestFactory } from '../manifest/ManifestFactory';
+
+@injectable()
+export class CreateDevClient {
+  constructor(
+    @inject(TYPES.ConfigLoader) private readonly configLoader: ConfigLoader,
+    @inject(TYPES.CrxmBundler) private readonly bundler: CrxmBundler,
+    @inject(TYPES.UserscriptHeaderFactory) private readonly headerFactory: UserscriptHeaderFactory,
+    @inject(TYPES.ManifestFactory) private readonly manifestFactory: ManifestFactory,
+    @inject(TYPES.BuildID) private readonly buildId: string,
+  ) {}
+
+  /**
+   * Make code for service worker on developement.
+   */
+  public outputDevelomentSw(code: Uint8Array) {
+    const {
+      server: { host, websocket },
+    } = this.configLoader.useConfig();
+
+    if (host === undefined || websocket === undefined) {
+      throw new Error("Server host or websocket's port were not specificated");
+    }
+
+    const decoder = new TextDecoder('utf-8');
+    const originalCode = decoder.decode(code);
+
+    const devCode = stringifyFunction(developSw, [host, websocket]);
+
+    const result = devCode + '\n\n' + originalCode;
+
+    return result;
+  }
+
+  public outputDevelopmentUserjs() {
+    const {
+      server: { disable_sock_in_userjs, host, port, websocket },
+    } = this.configLoader.useConfig();
+
+    if (host === undefined || websocket === undefined || port === undefined) {
+      throw new Error("Server host, port or  websocket's port were not specificated");
+    }
+
+    const disableSock = disable_sock_in_userjs === undefined ? false : disable_sock_in_userjs;
+
+    const newFactory = new UserscriptHeaderFactory(this.headerFactory);
+
+    // for loading code from server in development mode.
+    newFactory.push('@grant', 'GM_xmlhttpRequest');
+
+    const code = [
+      newFactory.toString(),
+      '',
+      stringifyFunction(userjs, [host, port, websocket, false, disableSock, this.buildId]),
+    ].join('\n');
+
+    return code;
+  }
+
+  public outputDevExtension() {
+    const {
+      output: { chrome },
+      server: { host, websocket },
+    } = this.configLoader.useConfig();
+
+    if (chrome === undefined || host === undefined || websocket === undefined) {
+      throw new Error('');
+    }
+
+    /**
+     * Development contentscript in isolated env
+     */
+    const devScriptIsolatedFileName = 'crxm-development.js';
+    const devScriptIsolatedPath = resolve(chrome, devScriptIsolatedFileName);
+
+    const devScriptIsolatedCode = stringifyFunction(developmentContentScript, [
+      this.buildId,
+      host,
+      websocket,
+    ]);
+
+    fsExtra.outputFileSync(devScriptIsolatedPath, devScriptIsolatedCode);
+
+    this.manifestFactory.addContentScript(
+      [devScriptIsolatedFileName],
+      [],
+      ['<all_urls>'],
+      'ISOLATED',
+    );
+  }
+
+  /**
+   * Include isolated connector
+   */
+  public outputIsolatedConnector() {
+    const {
+      output: { chrome },
+      server: { host, websocket },
+    } = this.configLoader.useConfig();
+
+    if (chrome === undefined || host === undefined || websocket === undefined) {
+      throw new Error('');
+    }
+
+    let includeConnector = false;
+    const isolatedmatches: string[] = [];
+
+    this.manifestFactory.rawManifest.content_scripts.forEach(
+      ({ use_isolated_connection, matches }) => {
+        if (use_isolated_connection) {
+          isolatedmatches.push(...(matches !== undefined ? matches : []));
+          includeConnector = true;
+        }
+      },
+    );
+
+    if (includeConnector) {
+      const isoFileName = 'crxm-isolated-connector.js';
+      const isoConnectorPath = resolve(chrome, isoFileName);
+      outputFileSync(
+        isoConnectorPath,
+        `${stringifyFunction(isolatedConnector, [this.buildId, JSON.stringify(this.configLoader.useConfig())])}\n`,
+      );
+      this.manifestFactory.addContentScript(
+        [isoFileName],
+        [],
+        [...isolatedmatches],
+        'ISOLATED',
+        'document_start',
+      );
+    }
+  }
+}
+
+/**
+ * Stringify a function that binded args.
+ * @param target function
+ * @param args args
+ * @returns A function stringified.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function stringifyFunction<V extends (...args: any[]) => any>(
+  target: V,
+  args: Parameters<V>,
+): string {
+  const raw = target.toString();
+
+  const newArgs = args.map((arg) => {
+    if (typeof arg === 'string') {
+      return `'${arg}'`;
+    } else {
+      return String(arg);
+    }
+  });
+
+  const code = `(${raw})(${newArgs.join(', ')});`;
+  return code;
+}

package/src/node/development/codes/extension.ts

@@ -0,0 +1,187 @@
+import {
+  SockServerConsoleRecieved,
+  SockServerResponse,
+  SockServerResponseReload,
+} from 'src/node/server/SockServer';
+
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint, @typescript-eslint/no-explicit-any
+export interface IsolatedConnectorEvent<T extends any = any> {
+  type: string;
+  crxContentBuildId: string;
+  detail: T;
+  actionId: string;
+}
+
+export function developmentContentScript(
+  crxContentBuildId: string,
+  host: string,
+  websocketPort: number,
+) {
+  const websocket = new WebSocket(`ws://${host}:${websocketPort}`);
+
+  websocket.addEventListener('open', () => {
+    console.log('[crxm] A reload server connected..');
+  });
+
+  websocket.addEventListener('close', () => {
+    console.log('[crxm] A reload server disconnected..');
+  });
+
+  websocket.addEventListener('message', ({ data }) => {
+    const response = JSON.parse(data) as SockServerResponse<SockServerResponseReload>;
+
+    if (response.type === 'reload') {
+      switch (response.content) {
+        case 'RELOAD_CSS':
+        case 'RELOAD_CONTENT_SCRIPT':
+          location.reload();
+          break;
+        default:
+          break;
+      }
+    }
+  });
+
+  window.addEventListener('message', (e: MessageEvent<IsolatedConnectorEvent>) => {
+    const { data } = e;
+
+    /**
+     * Client can listen a result by using of this.
+     */
+    const handlers: Record<string, () => void> = {
+      'console-log': () => {
+        const preload: SockServerConsoleRecieved = {
+          type: 'console',
+          content: {
+            type: 'log',
+            contents: data.detail,
+          },
+        };
+        websocket.send(JSON.stringify(preload));
+      },
+      'console-error': () => {
+        const preload: SockServerConsoleRecieved = {
+          type: 'console',
+          content: {
+            type: 'error',
+            contents: data.detail,
+          },
+        };
+        websocket.send(JSON.stringify(preload));
+      },
+      'console-warn': () => {
+        const preload: SockServerConsoleRecieved = {
+          type: 'console',
+          content: {
+            type: 'warn',
+            contents: data.detail,
+          },
+        };
+        websocket.send(JSON.stringify(preload));
+      },
+    };
+
+    /**
+     * # BuildId Check
+     * If a build id of recieved message isn't equiavalent with a buildId of isolatedConnector,
+     * wouldn't be runned the handler so It can prevent being runned from other scripts.
+     */
+    if (data.crxContentBuildId === crxContentBuildId) {
+      const handler = handlers[data.type];
+      if (handler !== undefined) {
+        handler();
+      }
+    }
+  });
+}
+
+export function isolatedConnector(crxContentBuildId: string, config: string) {
+  const messageListeners: Record<
+    string,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (request: any, sender: chrome.runtime.MessageSender) => void
+  > = {};
+
+  /**
+   * How it works?
+   *
+   * 1. A client (e.g. contentscripts.ts in MAIN world) : dispatch message to window.
+   * 2. This EventListener recieved.
+   * 3. This EventListener dispatchs CustomEvent that 'crx-isolated-connector-result' to window.
+   * 4. A client recieved CustomEvent as result.
+   */
+  window.addEventListener('message', (e: MessageEvent<IsolatedConnectorEvent>) => {
+    const { data, target } = e;
+
+    /**
+     * Send event of response to target.
+     * @param name custom event name.
+     * @param type custom event type.
+     * @param detail custom event detail.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint, @typescript-eslint/no-explicit-any
+    function dispatch<T extends any = any>(name: string, type: string, detail: T) {
+      if (target !== null) {
+        target.dispatchEvent(
+          new CustomEvent(name, {
+            detail: {
+              type,
+              data: detail,
+              actionId: data.actionId,
+            },
+          }),
+        );
+      }
+    }
+
+    /**
+     * Client can listen a result by using of this.
+     */
+    const responseEventName = 'crx-isolated-connector-result';
+
+    const handlers: Record<string, () => void> = {
+      'get-id': () => {
+        // Send extension runtime id.
+        dispatch(responseEventName, 'get-id', chrome.runtime.id);
+      },
+      'get-conf': () => {
+        // Send crx-monkey config stringified.
+        dispatch(responseEventName, 'get-conf', config);
+      },
+      'on-message': () => {
+        // Append a message listener from client.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const handleMessage = (request: any, sender: chrome.runtime.MessageSender) => {
+          dispatch(responseEventName, 'on-message', { request, sender });
+        };
+        messageListeners[data.actionId] = handleMessage;
+        chrome.runtime.onMessage.addListener(handleMessage);
+      },
+      'remove-on-message': () => {
+        // Remove a message listener from client.
+        if (messageListeners[data.actionId] !== undefined) {
+          chrome.runtime.onMessage.removeListener(messageListeners[data.actionId]);
+        }
+      },
+      'send-message': () => {
+        // Send a message from client.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        chrome.runtime.sendMessage(data.detail.message, data.detail.options, (response: any) => {
+          dispatch(responseEventName, 'send-message', { response });
+        });
+      },
+    };
+
+    /**
+     * # BuildId Check
+     * If a build id of recieved message isn't equiavalent with a buildId of isolatedConnector,
+     * wouldn't be runned the handler so It can prevent being runned from other scripts.
+     */
+    if (data.crxContentBuildId === crxContentBuildId) {
+      const handler = handlers[data.type];
+      if (handler !== undefined) {
+        handler();
+      }
+    }
+  });
+}

package/src/node/development/codes/sw.ts

@@ -0,0 +1,41 @@
+import { SockServerResponse, SockServerResponseReload } from 'src/node/server/SockServer';
+
+/**
+ * A content to be convined with service_worker of development script generated by crx-monkey.
+ * @param host SockServer host
+ * @param sockPort SockServer port
+ */
+export function developSw(host: string, sockPort: number) {
+  function startWebsocket25secLife() {
+    const websocket = new WebSocket(`ws://${host}:${sockPort}`);
+
+    websocket.addEventListener('message', ({ data }) => {
+      const response = JSON.parse(data) as SockServerResponse<SockServerResponseReload>;
+
+      if (response.type === 'reload') {
+        switch (response.content) {
+          case 'RELOAD_CONTENT_SCRIPT':
+          case 'RELOAD_SW':
+          case 'RELOAD_CSS':
+          case 'RELOAD_POPUP_JS':
+          case 'RELOAD_POPUP_HTML':
+          case 'ALL':
+            chrome.runtime.reload();
+            break;
+
+          default:
+            break;
+        }
+      }
+    });
+    setTimeout(() => {
+      websocket.close();
+    }, 25 * 1000);
+  }
+
+  // Keep a service_worker life.
+  startWebsocket25secLife();
+  setInterval(() => {
+    startWebsocket25secLife();
+  }, 25 * 1000);
+}

package/src/node/development/codes/userjs.ts

@@ -0,0 +1,150 @@
+import { SockServerConsoleRecieved } from 'src/node/server/SockServer';
+import { IsolatedConnectorEvent } from './extension';
+
+export function userjs(
+  host: string,
+  port: number,
+  websocketPort: number,
+  bindGM: boolean,
+  disableSock: boolean,
+  buildId: string,
+) {
+  unsafeWindow.__CRX_CONTENT_BUILD_ID = buildId;
+
+  if (!disableSock) {
+    const websocket = new WebSocket(`ws://${host}:${websocketPort}`);
+
+    websocket.addEventListener('message', ({ data }) => {
+      const { type, content } = JSON.parse(data);
+
+      if (type === 'reload') {
+        switch (content) {
+          case 'RELOAD_CSS':
+          case 'RELOAD_CONTENT_SCRIPT':
+            console.log('[crxm] reloading...');
+            location.reload();
+
+            break;
+
+          default:
+            break;
+        }
+      }
+    });
+
+    websocket.addEventListener('open', () => {
+      console.log('[crxm] A reload server connected..');
+
+      window.addEventListener('message', (e: MessageEvent<IsolatedConnectorEvent>) => {
+        const { data } = e;
+        /**
+         * Client can listen a result by using of this.
+         */
+        const handlers: Record<string, () => void> = {
+          'console-log': () => {
+            const preload: SockServerConsoleRecieved = {
+              type: 'console',
+              content: {
+                type: 'log',
+                contents: data.detail,
+              },
+            };
+            websocket.send(JSON.stringify(preload));
+          },
+          'console-error': () => {
+            const preload: SockServerConsoleRecieved = {
+              type: 'console',
+              content: {
+                type: 'error',
+                contents: data.detail,
+              },
+            };
+            websocket.send(JSON.stringify(preload));
+          },
+          'console-warn': () => {
+            const preload: SockServerConsoleRecieved = {
+              type: 'console',
+              content: {
+                type: 'warn',
+                contents: data.detail,
+              },
+            };
+            websocket.send(JSON.stringify(preload));
+          },
+        };
+
+        /**
+         * # BuildId Check
+         * If a build id of recieved message isn't equiavalent with a buildId of isolatedConnector,
+         * wouldn't be runned the handler so It can prevent being runned from other scripts.
+         */
+        if (data.crxContentBuildId === buildId) {
+          const handler = handlers[data.type];
+          if (handler !== undefined) {
+            handler();
+          }
+        }
+      });
+    });
+
+    websocket.addEventListener('close', () => {
+      console.log('[crxm] A reload server disconnected..');
+    });
+  }
+
+  function watchScriptDiff(initialCode: string) {
+    const scriptContentTmp = initialCode;
+
+    setInterval(() => {
+      getResponse().then((code) => {
+        if (scriptContentTmp !== code) {
+          location.reload();
+        }
+      });
+    }, 1000);
+
+    return scriptContentTmp;
+  }
+
+  async function getResponse() {
+    return new Promise((resolve) => {
+      GM.xmlHttpRequest({
+        url: `http://${host}:${port}/userscript`,
+        onload: (e) => {
+          resolve(e.responseText);
+        },
+      });
+    });
+  }
+
+  let loaded = false;
+  document.addEventListener('DOMContentLoaded', () => {
+    loaded = true;
+  });
+
+  getResponse().then((code) => {
+    if (typeof code === 'string') {
+      if (disableSock) {
+        watchScriptDiff(code);
+      }
+
+      const injectCode = code;
+
+      /*
+        if (bindGM) {
+          const bindGMverName = btoa(crypto.randomUUID()).replaceAll('=', '$');
+          unsafeWindow[bindGMverName] = GM;
+          injectCode = `const ${bindGMHash} = window["${bindGMverName}"];` + injectCode;
+        }
+        */
+
+      const scriptElem = document.createElement('script');
+      scriptElem.textContent = injectCode;
+      unsafeWindow.document.body.appendChild(scriptElem);
+
+      if (loaded) {
+        document.dispatchEvent(new Event('crxm_DOMContentLoaded'));
+      }
+    }
+  });
+}

package/src/node/exports.ts

@@ -0,0 +1,135 @@
+import {
+  CrxmConfig,
+  CrxmConfigRequired,
+  CrxmManifest,
+  CrxmManifestImportantKeyRequired,
+} from './typeDefs';
+import { tsBundler, tsBundlerWatch } from './plugins/tsBundler';
+import { sassBundler, sassBundlerWatch } from './plugins/sassBundler';
+import { htmlBundler, htmlBundlerWatch } from './plugins/htmlBundler/main';
+
+/**
+ * Define config for crx monkey.
+ * @param userConfig
+ * @returns
+ */
+export function defineConfig(userConfig: CrxmConfig): CrxmConfigRequired {
+  const defaultConfig: CrxmConfigRequired = {
+    output: {
+      chrome: 'dist/chrome',
+      userjs: 'dist/bundle.user.js',
+    },
+    manifest: 'manifest.js',
+    server: {
+      port: 8080,
+      host: 'localhost',
+      websocket: 8081,
+      disable_sock_in_userjs: false,
+    },
+    header: [],
+    build: {
+      '^.*.(ts|js|tsx|jsx)$': tsBundler({
+        esbuild: {
+          minify: true,
+        },
+      }),
+      '^.*.(css|sass|scss)$': sassBundler(),
+      '^.*.(html|htm)$': htmlBundler({
+        output: 'dist/chrome',
+        plugins: {
+          build: { '^.*.(ts|js|tsx|jsx)$': tsBundler(), '^.*.(css|sass|scss)$': sassBundler() },
+          watch: {
+            '^.*.(ts|js|tsx|jsx)$': tsBundlerWatch(),
+            '^.*.(css|sass|scss)$': sassBundlerWatch(),
+          },
+        },
+      }),
+    },
+    watch: {
+      '^.*.(ts|js|tsx|jsx)$': tsBundlerWatch({
+        esbuild: {
+          sourcemap: 'inline',
+        },
+      }),
+      '^.*.(css|sass|scss)$': sassBundlerWatch(),
+      '^.*.(html|htm)$': htmlBundlerWatch({
+        output: 'dist/chrome',
+        plugins: {
+          build: { '^.*.(ts|js|tsx|jsx)$': tsBundler(), '^.*.(css|sass|scss)$': sassBundler() },
+          watch: {
+            '^.*.(ts|js|tsx|jsx)$': tsBundlerWatch(),
+            '^.*.(css|sass|scss)$': sassBundlerWatch(),
+          },
+        },
+      }),
+    },
+    logLevel: 'error',
+    public: '/public',
+    define: {
+      sw: {},
+      contentscripts: {},
+      popup: {},
+    },
+  };
+
+  return makeDefineFunc(defaultConfig, userConfig);
+}
+
+/**
+ * Define manifest
+ * @param userManifest
+ * @returns
+ */
+export function defineManifest(userManifest: CrxmManifest): CrxmManifestImportantKeyRequired {
+  const defaultManifest: CrxmManifestImportantKeyRequired = {
+    description: '',
+    manifest_version: 3,
+    background: undefined,
+    content_scripts: [],
+    name: '',
+    version: '',
+    action: undefined,
+    icons: undefined,
+  };
+
+  return makeDefineFunc(defaultManifest, userManifest);
+}
+
+function makeDefineFunc<T, U>(defaultConfig: T, userConfig: U) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function isObject(item: any): item is Record<string, any> {
+    // null もオブジェクトと判定されるのを防ぐ
+    return (
+      item &&
+      typeof item === 'object' &&
+      !Array.isArray(item) &&
+      item !== null &&
+      !Array.isArray(item) &&
+      item !== undefined
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function mergeDeep(target: any, source: any): any {
+    const output = { ...target };
+
+    if ((isObject(target) && isObject(source)) || (target === undefined && isObject(source))) {
+      Object.keys(source).forEach((key) => {
+        if (isObject(source[key])) {
+          if (!(key in target)) {
+            Object.assign(output, { [key]: source[key] });
+          } else {
+            output[key] = mergeDeep(target[key], source[key]);
+          }
+        } else {
+          Object.assign(output, { [key]: source[key] });
+        }
+      });
+    }
+
+    return output;
+  }
+
+  const mergedConfig = mergeDeep(defaultConfig, userConfig);
+  return mergedConfig as T;
+}