✨ A little refactor (#4)

✨ A little refactor

.eslintrc.json

@@ -14,7 +14,7 @@
     },
     "rules": {
         "semi": "error",
-        "indent": ["error", 4],
+        "indent": ["error", 4, {"SwitchCase": 1}],
         "dot-notation": "error",
         "block-scoped-var": "error",
         "capitalized-comments": "warn",
@@ -30,7 +30,6 @@
         "func-call-spacing": "error",
         "dot-location": ["error", "property"],
         "no-whitespace-before-property": "error",
-        "space-before-function-paren": "error",
         "space-unary-ops": ["error", {
             "words": true,
             "nonwords": false

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "tabWidth": 4,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "printWidth": 100
+}

README-ja_JP.md

@@ -0,0 +1,55 @@
+<div align="center">
+
+<img alt="logo" src="./assets/chibi.png" width="200px">
+
+# Chibi (チビ)
+
+#### とあるユニバーサル Scratch 拡張機能ローダーです。
+
+</div>
+
+---
+
+Chibi は Tampermonkey/GreasyMonkey に対応するユーザースクリプトであり、「どのエディターでも拡張機能が使える」という仕様が搭載されています（理論的に）。
+
+# ✨ 仕様
+
+- [X] 標準 Scratch 拡張機能をロードできる
+- [X] Unsandboxed 拡張機能をロードできる
+- [X] どこでも Turbowarp 専用機能を使える (一部)
+- [ ] 拡張機能をインストールしなくでもサードパーティー拡張機能を搭載したプロジェクトを起動できる
+- [X] 直接的にエディターから拡張機能をロードできる
+
+# 🌈 プラットフォーム
+
+- [X] Scratch
+- [X] CodingClip
+- [X] Cocrea
+- [X] Aerfaying
+- [X] Co-Create World
+- [X] XMW
+- [X] CodeLab
+- [X] 40code
+- [X] TurboWarp
+
+# 🔥 使い方
+
+1. Tampermonkey / Greasymonkey をインストールします。
+2. [リリースページ](https://github.com/SimonShiki/chibi/releases)を開き、バージョンを選択してインストールします。
+3. 'ブロック定義'のカテゴリーで、'Open Frontend' が現れます。クリックすると拡張機能をサイドロードできます。（都合により、およそ５秒のラグがあります）
+
+> うん…エディターによって、ボタンが正常に現れない場合もあります。その時は DevTools で拡張機能をロードできます。
+
+1. 'Ctrl + Shift + J' (Windows) / 'Cmd + Opt + J' (MacOS) で DevTools を開きます。
+2. コンソールで ``chibi.openFrontend()`` や ``chibi.loader.load([extensionURL], [load mode, like 'unsandboxed'])'``を実行します。
+3. これで完成。
+
+# 🥰 拡張機能の投稿
+
+Chibi のダッシュボードには拡張機能のギャラリーがあります。どうぞ自由に好きな拡張機能を使ってください。
+
+もし良かったら [moth](https://github.com/SimonShiki/moth) で自分の一番好きな拡張機能を投稿してください。
+
+# ⚓ ライセンス
+
+AGPL-3.0 です。詳しくは[こちら](./LICENSE)。

README.md

@@ -1,4 +1,4 @@
-[简体中文](./README-zh_CN.md)
+[简体中文](./README-zh_CN.md) [日本語](./README-ja_JP.md)
 
 <div align="center">
 

package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "build": "NODE_ENV=production webpack --color --bail",
     "lint": "eslint ./src/ --ext .js,.ts,tsx,jsx",
+    "format": "prettier -w --config .prettierrc.json ./src",
     "typecheck": "tsc --watch --noEmit"
   },
   "devDependencies": {
@@ -23,6 +24,7 @@
     "eslint": "^8.49.0",
     "html-webpack-plugin": "^5.5.3",
     "mini-svg-data-uri": "^1.4.4",
+    "prettier": "^3.0.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

src/frontend/index.ts

@@ -10,7 +10,7 @@ interface MothDispatchedLoad {
     info: {
         url: string;
         sandboxed: boolean;
-    }
+    };
 }
 
 interface MothDispatchedAllocate {
@@ -19,7 +19,11 @@ interface MothDispatchedAllocate {
 
 type MothDispatched = MothDispatchedAllocate | MothDispatchedLoad;
 
-function getExtensionInfo () {
+/**
+ * Get all extensions.
+ * @returns Extensions.
+ */
+function getExtensionInfo() {
     const processedExtInfo: MothExtensionInfo[] = [];
     for (const [extId, ext] of window.chibi.loader.loadedScratchExtension.entries()) {
         processedExtInfo.push({
@@ -29,39 +33,65 @@ function getExtensionInfo () {
     }
     return processedExtInfo;
 }
-
-async function messageHandler (event: MessageEvent) {
+/**
+ * Handle messages from the frontend (popup window).
+ * @param event Event from the frontend.
+ */
+async function messageHandler(event: MessageEvent) {
     if (event.origin !== 'https://chibi.codingclip.cc') return;
     if (!('type' in event.data)) return;
     switch ((event.data as MothDispatched).type) {
-    case 'allocate': 
-        console.log('handshake with frontend');
-        dashboardWindow?.postMessage({
-            type: 'handshake',
-            clientInfo: {
-                version: Number(window.chibi.version),
-                url: window.location.host
-            }
-        }, '*');
-        dashboardWindow?.postMessage({
-            type: 'extension',
-            extensions: getExtensionInfo()
-        }, '*');
-        break;
-    case 'load':
-        await window.chibi.loader.load(event.data.info.url, event.data.info.sandboxed ? 'sandboxed' : 'unsandboxed');
-        dashboardWindow?.postMessage({
-            type: 'extension',
-            extensions: getExtensionInfo()
-        }, '*');
-        break;
+        // Handshake: send current extension info in order to prepare frontend.
+        case 'allocate':
+            console.log('handshake with frontend');
+            dashboardWindow?.postMessage(
+                {
+                    type: 'handshake',
+                    clientInfo: {
+                        version: Number(window.chibi.version),
+                        url: window.location.host
+                    }
+                },
+                '*'
+            );
+            dashboardWindow?.postMessage(
+                {
+                    type: 'extension',
+                    extensions: getExtensionInfo()
+                },
+                '*'
+            );
+            break;
+        case 'load':
+            // Load an extension.
+            await window.chibi.loader.load(
+                event.data.info.url,
+                event.data.info.sandboxed ? 'sandboxed' : 'unsandboxed'
+            );
+            dashboardWindow?.postMessage(
+                {
+                    type: 'extension',
+                    extensions: getExtensionInfo()
+                },
+                '*'
+            );
+            break;
     }
 }
 
+// Here we add a listener to process the message
 window.addEventListener('message', messageHandler);
 
-function openFrontend () {
-    dashboardWindow = window.open('https://chibi.codingclip.cc/#manage');
+/**
+ * Open the popup (?) window.
+ * @param open window.open function (compatible with ccw).
+ */
+function openFrontend(open: typeof window.open) {
+    dashboardWindow = open(
+        'https://chibi.codingclip.cc/#manage',
+        'Chibi',
+        'popup=yes,status=no,location=no,toolbar=no,menubar=no'
+    );
 }
 
 export default openFrontend;

src/global.d.ts

@@ -8,10 +8,13 @@ declare interface Window {
         vm?: VM;
         blockly?: ScratchBlocks | null;
         loader?: ChibiLoader;
-        registeredExtension: Record<string, {
-            url: string,
-            env: string
-        }>;
-        openFrontend (): void;
-    }
+        registeredExtension: Record<
+            string,
+            {
+                url: string;
+                env: string;
+            }
+        >;
+        openFrontend(): void;
+    };
 }

src/index.ts

@@ -1,11 +1,14 @@
 import { trap, inject } from './injector/inject';
 import { log } from './util/log';
-
+const open = window.open;
 // @ts-expect-error defined in webpack define plugin
 log(`Chibi ${__CHIBI_VERSION__}`);
-await trap();
+// Try injecting chibi into the page.
+await trap(open);
 if (typeof window.chibi.vm !== 'undefined') {
+    // Alright we got the virtual machine, start the injection.
     inject(window.chibi.vm);
 } else {
+    // This is not a Scratch page, stop injecting.
     log(`Cannot find vm in this page, stop injecting.`);
 }