✨ feat: pack chrome extension

Signed-off-by: SimonShiki <[email protected]>

.github/workflows/validate.yml

@@ -20,8 +20,12 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Check types and Build
         run: yarn tsc --noEmit && NODE_ENV=PRODUCTION yarn run build
-      - name: Upload Canary Userscript
+      - name: Pack Chrome Extension
+        run: yarn run extension-pack
+      - name: Upload Userscript And Extension
         uses: actions/upload-artifact@v3
         with:
-          name: Canary Userscript
-          path: dist/chibi.user.js
+          name: Userscript and Unpacked Extension
+          path: |
+            dist/chibi.user.js
+            dist/unpacked-extension.zip

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log
 
 # generated build files
 /dist
+/extension/scripts/chibi.user.js

extension/manifest.json

@@ -0,0 +1 @@
+{"manifest_version":2,"name":"Chibi","author":"SimonShiki","description":"Load scratch extension everywhere.","version":"5","content_scripts":[{"js":["scripts/content-script.js"],"matches":["https://scratch.mit.edu/projects/*","https://aerfaying.com/Projects/*","https://www.ccw.site/*","https://gitblock.cn/Projects/*","https://world.xiaomawang.com/*","https://cocrea.world/*","https://create.codelab.club/*","https://www.scratch-cn.cn/*","https://www.40code.com/*","https://turbowarp.org/*","https://codingclip.com/*","https://editor.turbowarp.cn/*","https://0832.ink/rc/*","https://code.xueersi.com/scratch3/*","https://code.xueersi.com/home/project/detail?lang=scratch&pid=*&version=3.0&langType=scratch","http://localhost:8601/*"],"run_at":"document_start"}],"web_accessible_resources":["scripts/chibi.user.js"]}

extension/scripts/content-script.js

@@ -0,0 +1,4 @@
+const scriptElem = document.createElement('script');
+scriptElem.setAttribute('type', 'text/javascript');
+scriptElem.setAttribute('src', chrome.extension.getURL('/scripts/chibi.user.js'));
+(document.head || document.documentElement).appendChild(scriptElem);

generate-helper.js

@@ -0,0 +1,22 @@
+const includeURLs = [
+    'https://scratch.mit.edu/projects/*',
+    'https://aerfaying.com/Projects/*',
+    'https://www.ccw.site/*',
+    'https://gitblock.cn/Projects/*',
+    'https://world.xiaomawang.com/*',
+    'https://cocrea.world/*',
+    'https://create.codelab.club/*',
+    'https://www.scratch-cn.cn/*',
+    'https://www.40code.com/*',
+    'https://turbowarp.org/*',
+    'https://codingclip.com/*',
+    'https://editor.turbowarp.cn/*',
+    'https://0832.ink/rc/*',
+    'https://code.xueersi.com/scratch3/*',
+    'https://code.xueersi.com/home/project/detail?lang=scratch&pid=*&version=3.0&langType=scratch',
+    'http://localhost:8601/*'
+];
+
+module.exports = {
+    includeURLs
+};

package.json

@@ -9,7 +9,7 @@
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production webpack --color --bail",
-    "dev": "NODE_ENV=development webpack --color --bail",
+    "extension:pack": "node ./scripts/generate-extension.js",
     "lint": "eslint ./src/ --ext .js,.ts,tsx,jsx",
     "typecheck": "tsc --watch --noEmit"
   },
@@ -20,6 +20,7 @@
     "@turbowarp/types": "^0.0.11",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
+    "archiver": "^6.0.1",
     "babel-loader": "^9.1.3",
     "codingclip-worker-loader": "^3.0.9",
     "eslint": "^8.49.0",

scripts/generate-extension.js

@@ -0,0 +1,74 @@
+const { includeURLs } = require('../generate-helper');
+const packageJSON = require('../package.json');
+const fs = require('fs');
+const path = require('path');
+const process = require('node:process');
+const archiver = require('archiver');
+
+const env = process.env.BROSWER ?? 'chrome';
+
+const manifest = {
+    manifest_version: 2,
+    name: packageJSON.displayName,
+    author: packageJSON.author,
+    description: packageJSON.description,
+    version: packageJSON.version,
+    /*
+    icons: {
+        16: 'images/16.png',
+        32: 'images/32.png',
+        48: 'images/48.png',
+        128: 'images/128.png'
+    },
+    */
+    content_scripts: [
+        {
+            js: [
+                'scripts/content-script.js'
+            ],
+            matches: includeURLs,
+            run_at: 'document_start'
+        }
+    ],
+    web_accessible_resources: [
+        'scripts/chibi.user.js'
+    ]
+};
+
+/**
+ * @param {String} sourceDir: /some/folder/to/compress
+ * @param {String} outPath: /path/to/created.zip
+ * @returns {Promise}
+ */
+function zipDirectory (sourceDir, outPath) {
+    const archive = archiver('zip', { zlib: { level: 9 }});
+    const stream = fs.createWriteStream(outPath);
+
+    return new Promise((resolve, reject) => {
+        archive
+            .directory(sourceDir, false)
+            .on('error', err => reject(err))
+            .pipe(stream)
+        ;
+
+        stream.on('close', () => resolve());
+        archive.finalize();
+    });
+}
+
+(async function pack () {
+    console.log(`Packing extension for ${env}`);
+    fs.copyFileSync(
+        path.resolve(__dirname, '../dist/chibi.user.js'),
+        path.resolve(__dirname, '../extension/scripts/chibi.user.js')
+    );
+    fs.writeFileSync(
+        path.resolve(__dirname, '../extension/manifest.json'),
+        JSON.stringify(manifest)
+    );
+    zipDirectory(
+        path.resolve(__dirname, '../extension/'),
+        path.resolve(__dirname, `../dist/unpacked-extension.zip`)
+    );
+    console.log('Done');
+})();

webpack.config.js

@@ -3,33 +3,10 @@ const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { UserscriptPlugin } = require('webpack-userscript');
+const { includeURLs } = require('./generate-helper');
 const packageJSON = require('./package.json');
 const process = require('node:process');
 
-function getMatchURL () {
-    const url = [
-        'https://scratch.mit.edu/projects/*',
-        'https://aerfaying.com/Projects/*',
-        'https://www.ccw.site/*',
-        'https://gitblock.cn/Projects/*',
-        'https://world.xiaomawang.com/*',
-        'https://cocrea.world/*',
-        'https://create.codelab.club/*',
-        'https://www.scratch-cn.cn/*',
-        'https://www.40code.com/*',
-        'https://turbowarp.org/*',
-        'https://codingclip.com/*',
-        'https://editor.turbowarp.cn/*',
-        'https://0832.ink/rc/*',
-        'https://code.xueersi.com/scratch3/*',
-        'https://code.xueersi.com/home/project/detail?lang=scratch&pid=*&version=3.0&langType=scratch'
-    ];
-    if (process.env.NODE_ENV === 'development') {
-        url.unshift('http://localhost:8601/*');
-        return { include: url };
-    }
-    return { match: url };
-}
 const base = {
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     entry: './src/index.ts',
@@ -74,7 +51,7 @@ const base = {
     },
     plugins: [
         new UserscriptPlugin({
-            headers: Object.assign({
+            headers: {
                 name: packageJSON.displayName,
                 author: packageJSON.author,
                 namespace: 'ScratchChibiLoader',
@@ -84,7 +61,8 @@ const base = {
                 license: packageJSON.license,
                 grant: ['none'],
                 'run-at': 'document-start',
-            }, getMatchURL()),
+                include: includeURLs
+            },
             pretty: true,
             strict: true,
             whitelist: true