Vue based UI + Websocket-based remote editor support

.eslintrc.js

@@ -17,6 +17,10 @@ const default_rules = {
     ]
 };
 
+const extension_page_rules = {
+    'tampermonkey/no-global-object-access': 'off'
+};
+
 const content_script_rules = {
     'tampermonkey/no-global-object-access': 'off'
 };
@@ -111,6 +115,11 @@ module.exports = {
             },
             rules: ts_rules
         },
+        {
+            files: [ 'src/popup/*.ts' ],
+            extends: extends_ts,
+            rules: merge_rules({}, ts_rules, extension_page_rules)
+        },
         {
             files: unsafe_env_ts,
             extends: extends_ts,

Makefile.js

@@ -14,6 +14,7 @@ import archiver from 'archiver';
 import glob from 'glob';
 import tmp from 'tmp';
 import getConfigs from './webpack.config.js';
+import * as sass from 'sass'
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -153,6 +154,19 @@ const methods = {
         src = src.replace(/__bundle_version__/g, __bundle_version__);
         fs.writeFileSync('out/rel/manifest.json', src);
     },
+    scss: async () => {
+        [
+            { in: 'src/popup/styles/index.scss', out: 'out/rel/style.css' },
+        ].some(e => {
+            console.log(`SCSS: process ${e.in} now`);
+            const minimize = ![ '1', 'true' ].includes(process.env['nominimize']);
+            if (!fs.existsSync(path.dirname(e.out))) fs.mkdirSync(path.dirname(e.out), { recursive: true });
+
+            let res = sass.compile(e.in, { style: minimize ? 'compressed' : 'expanded', sourceMap: false, charset: false });
+            const css = '@charset "UTF-8";' + res.css.replace(/[^\0-\x7f]/gu, (match) => `\\${match.codePointAt(0).toString(16)}`);
+            fs.writeFileSync(e.out, css);
+        });
+    },
     pack: async () => {
         const { content, page, background } = getConfigs();
 
@@ -184,6 +198,7 @@ const methods = {
 
         [
             { m: 'pack', a: false, r: true },
+            { m: 'scss', a: false, r: true },
             { m: 'manifest', a, r: true },
         ].some(e => {
             if (!e.r) return;
@@ -270,6 +285,7 @@ const methods = {
             { m: 'lint', a: false, r: h !== 'off' },
             { m: 'check', a: false, r: c !== 'off' },
             { m: 'build', a: a, r: true },
+            { m: 'scss', a: false, r: true },
             { m: 'package', a: a, r: true }
         ].some(e => {
             if (!e.r) return;

build/Dockerfile

@@ -0,0 +1,11 @@
+
+FROM node:20
+
+RUN chmod 777 /home
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+WORKDIR /workspace
+
+CMD ["/entrypoint.sh"]

build/docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  tampermonkey-editors-ext-env:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: tampermonkey-editors-ext-env
+    user: "${UID}:${GID}"
+    volumes:
+      - ..:/workspace
+      - /etc/passwd:/etc/passwd:ro
+      - /etc/group:/etc/group:ro
+    tty: true
+    working_dir: /workspace

build/entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+npm install
+exec sleep 7d

build_sys/chrome_mv3.manifest.json

@@ -8,7 +8,8 @@
             "24": "images/icon24.png",
             "32": "images/icon32.png"
         },
-        "default_title": "Tampermonkey Editors"
+        "default_title": "Tampermonkey Editors",
+        "default_popup": "popup.html"
     },
     "icons": {
         "16": "images/icon.png",
@@ -26,6 +27,7 @@
        "service_worker": "background.js"
     },
     "permissions": [
+        "alarms",
         "tabs",
         "webNavigation",
         "storage",

build_sys/firefox_mv3.manifest.json

@@ -18,7 +18,8 @@
             "24": "images/icon24.png",
             "32": "images/icon32.png"
         },
-        "default_title": "Tampermonkey Editors"
+        "default_title": "Tampermonkey Editors",
+        "default_popup": "popup.html"
     },
     "icons": {
         "16": "images/icon.png",
@@ -38,6 +39,7 @@
         ]
     },
     "permissions": [
+        "alarms",
         "tabs",
         "webNavigation",
         "storage",