✨ 添加i18n所见即所得模式

CONTRIBUTING.md

@@ -79,6 +79,14 @@ npm start
 - `src/locales`为[扩展](https://github.com/scriptscat/scriptcat)翻译文件目录
 - `public/locales`为[脚本站](https://github.com/scriptscat/scriptlist-frontend)的翻译文件目录
 
+#### 扩展开启所见即所得模式
+
+扩展开启所见即所得模式需要使用`npm run i18n`模式进行构建，然后通过控制台设置伪语言`localStorage['language']='ach-UG';`，然后刷新页面。
+
+#### 脚本站开启所见即所得模式
+
+脚本站访问：[https://scriptcat.org/ach-UG](https://scriptcat.org/ach-UG) 即可开启所见即所得模式
+
 ## 参与开发
 
 ScriptCat 使用 ESLint 来规范代码风格，使用 Jest

build/assets/_locales/i18n.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line no-underscore-dangle, no-var
+var _jipt = [];
+_jipt.push(["project", "scriptcat"]);

build/assets/template/confirm.html

@@ -21,4 +21,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/import.html

@@ -21,4 +21,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/install.html

@@ -21,4 +21,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/options.html

@@ -22,4 +22,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/popup.html

@@ -26,4 +26,11 @@
       /* overflow: hidden; */
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

package.json

@@ -15,7 +15,8 @@
     "dev:linter": "webpack --mode development --config ./webpack/webpack.linter.dev.ts",
     "pack": "node ./build/pack.js",
     "changlog": "gitmoji-changelog",
-    "crowdin": "crowdin"
+    "crowdin": "crowdin",
+    "i18n": "concurrently \"webpack --mode development --config ./webpack/webpack.i18n.ts\" \"webpack --mode development --config ./webpack/webpack.inject.dev.ts\""
   },
   "dependencies": {
     "@arco-design/web-react": "^2.51.1",

src/locales/locales.ts

@@ -6,6 +6,7 @@ import { Metadata } from "@App/app/repo/scripts";
 import enUS from "./en/translation.json";
 import zhCN from "./zh-CN/translation.json";
 import zhTW from "./zh-TW/translation.json";
+import achUG from "./ach-UG/translation.json";
 import "dayjs/locale/zh-cn";
 
 i18n.use(initReactI18next).init({
@@ -18,6 +19,7 @@ i18n.use(initReactI18next).init({
     "en-US": { title: "English", translation: enUS },
     "zh-CN": { title: "简体中文", translation: zhCN },
     "zh-TW": { title: "繁体中文", translation: zhTW },
+    "ach-UG": { title: "伪语言", translation: achUG },
   },
 });
 

src/pages/options/routes/Setting.tsx

@@ -42,6 +42,9 @@ function Setting() {
   const languageList: { key: string; title: string }[] = [];
   const { t } = useTranslation();
   Object.keys(i18n.store.data).forEach((key) => {
+    if (key === "ach-UG") {
+      return;
+    }
     languageList.push({
       key,
       title: i18n.store.data[key].title as string,

webpack/webpack.i18n.ts

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import merge from "webpack-merge";
+import CompressionPlugin from "compression-webpack-plugin";
+import CopyPlugin from "copy-webpack-plugin";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import common from "../webpack.config";
+
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const path = require("path");
+
+const src = `${__dirname}/../src`;
+const dist = `${__dirname}/../dist`;
+const assets = `${__dirname}/../build/assets`;
+
+common.entry = {
+  // @ts-ignore
+  ...common.entry,
+  content: `${src}/content.ts`,
+  "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
+  "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker.js",
+  "linter.worker": `${src}/linter.worker.ts`,
+};
+
+common.output = {
+  path: `${dist}/ext/src`,
+  filename: "[name].js",
+  clean: false,
+};
+
+// 取消splitChunks
+common.optimization = {};
+
+common.plugins = common.plugins!.filter((plugin) => {
+  if (plugin instanceof HtmlWebpackPlugin && plugin.userOptions) {
+    plugin.userOptions.mode = "i18n";
+  }
+  return plugin;
+});
+
+export default merge(common, {
+  watch: true,
+  devtool: "inline-source-map",
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: `${src}/manifest.json`,
+          to: `${dist}/ext`,
+          // 将manifest.json内版本号替换为package.json中版本号
+          transform(content) {
+            const manifest = JSON.parse(content.toString());
+            manifest.name = "ScriptCat - Dev";
+            manifest.content_security_policy =
+              "script-src 'self' https://cdn.crowdin.com; object-src 'self'";
+            return JSON.stringify(manifest);
+          },
+        },
+        {
+          from: `${assets}/logo-beta.png`,
+          to: `${dist}/ext/assets/logo.png`,
+        },
+        {
+          from: `${assets}/_locales/i18n.js`,
+          to: `${dist}/ext/src/_locales/i18n.js`,
+        },
+      ],
+    }),
+    // firefox商店文件不能大于4M, 所以需要压缩
+    new CompressionPlugin({
+      test: /ts.worker.js/,
+      deleteOriginalAssets: true,
+    }),
+    new NodePolyfillPlugin(),
+  ],
+  resolve: {
+    mainFields: ["browser", "main", "module"],
+    // 改写eslint-plugin-userscripts以适配脚本猫，打包时重定义模块路径
+    alias: {
+      "../data/compat-grant": path.resolve(__dirname, "../eslint/compat-grant"),
+      "../data/compat-headers": path.resolve(
+        __dirname,
+        "../eslint/compat-headers"
+      ),
+    },
+  },
+});