开启开发者模式引导

2025-04-28 15:20:26 +08:00 · 2025-04-28 15:20:26 +08:00 · 51fe2a89e1
commit 51fe2a89e1
parent a26f1c5014
7 changed files with 191 additions and 158 deletions
--- a/src/app/service/service_worker/runtime.ts
+++ b/src/app/service/service_worker/runtime.ts
@ -15,7 +15,7 @@ import { subscribeScriptDelete, subscribeScriptEnable, subscribeScriptInstall }
 import { ScriptService } from "./script";
 import { runScript, stopScript } from "../offscreen/client";
 import { getRunAt } from "./utils";
-import { isUserScriptsAvailable, randomString } from "@App/pkg/utils/utils";
+import { InfoNotification, isUserScriptsAvailable, randomString } from "@App/pkg/utils/utils";
 import Cache from "@App/app/cache";
 import { dealPatternMatches, UrlMatch } from "@App/pkg/utils/match";
 import { ExtensionContentMessageSend } from "@Packages/message/extension_message";
@ -27,6 +27,8 @@ import LoggerCore from "@App/app/logger/core";
 import PermissionVerify from "./permission_verify";
 import { SystemConfig } from "@App/pkg/config/config";
 import { ResourceService } from "./resource";
+import { LocalStorageDAO } from "@App/app/repo/localStorage";
+import i18n from "@App/locales/locales";

 // 为了优化性能，存储到缓存时删除了code、value与resource
 export interface ScriptMatchInfo extends ScriptRunResouce {
@ -49,6 +51,8 @@ export class RuntimeService {
  scriptCustomizeMatch: UrlMatch<string> = new UrlMatch<string>();
  scriptMatchCache: Map<string, ScriptMatchInfo> | null | undefined;

+  isEnableDeveloperMode = false;
+
  constructor(
    private systemConfig: SystemConfig,
    private group: Group,
@ -71,9 +75,32 @@ export class RuntimeService {
    this.group.on("pageLoad", this.pageLoad.bind(this));

    // 检查是否开启了开发者模式
-    if(!isUserScriptsAvailable()){
-        // 未开启加上警告引导
-
+    this.isEnableDeveloperMode = isUserScriptsAvailable();
+    if (!this.isEnableDeveloperMode) {
+      // 未开启加上警告引导
+      // 判断是否首次
+      const localStorage = new LocalStorageDAO();
+      localStorage.get("firstShowDeveloperMode").then((res) => {
+        if (!res) {
+          localStorage.save({
+            key: "firstShowDeveloperMode",
+            value: true,
+          });
+          // 打开页面
+          chrome.tabs.create({
+            url: `https://docs.scriptcat.org/docs/use/open-dev/`,
+          });
+        }
+      });
+      chrome.action.setBadgeBackgroundColor({
+        color: "#ff8c00",
+      });
+      chrome.action.setBadgeTextColor({
+        color: "#ffffff",
+      });
+      chrome.action.setBadgeText({
+        text: "!",
+      });
    }
    // 读取inject.js注入页面
    this.registerInjectScript();
@ -439,7 +466,7 @@ export class RuntimeService {
    this.addScriptMatch(scriptMatchInfo);

    // 如果脚本开启, 则注册脚本
-    if (script.status === SCRIPT_STATUS_ENABLE) {
+    if (this.isEnableDeveloperMode && script.status === SCRIPT_STATUS_ENABLE) {
      if (!scriptRes.metadata["noframes"]) {
        registerScript.allFrames = true;
      }
@ -467,7 +494,7 @@ export class RuntimeService {
  }

  async unregistryPageScript(uuid: string) {
-    if (!(await Cache.getInstance().get("registryScript:" + uuid))) {
+    if (!this.isEnableDeveloperMode || !(await Cache.getInstance().get("registryScript:" + uuid))) {
      return;
    }
    chrome.userScripts.unregister(
--- a/src/app/service/service_worker/script.ts
+++ b/src/app/service/service_worker/script.ts
@ -21,7 +21,7 @@ import { ResourceService } from "./resource";
 import { ValueService } from "./value";
 import { compileScriptCode } from "../content/utils";
 import { SystemConfig } from "@App/pkg/config/config";
-import i18n from "@App/locales/locales";
+import i18n, { localePath } from "@App/locales/locales";

 export class ScriptService {
  logger: Logger;
@ -109,10 +109,6 @@ export class ScriptService {
      }
    );
    // 获取i18n
-    let localePath = "";
-    if (i18n.language !== "zh-CN") {
-      localePath = `/en`;
-    }
    // 重定向到脚本安装页
    chrome.declarativeNetRequest.updateDynamicRules(
      {
--- a/src/locales/locales.ts
+++ b/src/locales/locales.ts
@ -27,10 +27,15 @@ i18n.use(initReactI18next).init({
  },
 });

+export let localePath = "";
+
 chrome.i18n.getAcceptLanguages((lngs) => {
-  systemConfig.getLanguage().then((lng) => {
+  systemConfig.getLanguage(lngs).then((lng) => {
    i18n.changeLanguage(lng);
    dayjs.locale(lng.toLocaleLowerCase());
+    if (lng !== "zh-CN") {
+      localePath = "en";
+    }
  });
 });

--- a/src/locales/zh-CN/translation.json
+++ b/src/locales/zh-CN/translation.json
@ -368,5 +368,6 @@
  "eslint_config_format_error": "eslint配置格式错误",
  "export_success": "导出成功",
  "get_backup_dir_url_failed": "获取备份目录地址失败",
-  "get_backup_files_failed": "获取备份文件失败"
+  "get_backup_files_failed": "获取备份文件失败",
+  "develop_mode_guide": "检测到当前未开启开发者模式，您的脚本无法正常使用，<a href=\"https://docs.scriptcat.org/docs/use/open-dev/\" target=\"black\" style=\"color: var(--color-text-1)\">👉点我了解如何开启</a>"
 }
--- a/src/pages/popup/App.tsx
+++ b/src/pages/popup/App.tsx
@ -18,7 +18,7 @@ import ScriptMenuList from "../components/ScriptMenuList";
 import { popupClient } from "../store/features/script";
 import { ScriptMenu } from "@App/app/service/service_worker/popup";
 import { systemConfig } from "../store/global";
-import { SystemConfig } from "@App/pkg/config/config";
+import { isUserScriptsAvailable } from "@App/pkg/utils/utils";

 const CollapseItem = Collapse.Item;

@ -79,143 +79,147 @@ function App() {
    });
  }, []);
  return (
-    <Card
-      size="small"
-      title={
-        <div className="flex justify-between">
-          <span className="text-xl">ScriptCat</span>
-          <div className="flex flex-row items-center">
-            <Switch
-              size="small"
-              checked={isEnableScript}
-              onChange={(val) => {
-                setIsEnableScript(val);
-                if (val) {
-                  localStorage.enable_script = "true";
-                } else {
-                  localStorage.enable_script = "false";
-                }
-              }}
-            />
-            <Button
-              type="text"
-              icon={<IconHome />}
-              iconOnly
-              onClick={() => {
-                // 用a链接的方式,vivaldi竟然会直接崩溃
-                window.open("/src/options.html", "_blank");
-              }}
-            />
-            <Badge count={checkUpdate.isRead ? 0 : 1} dot offset={[-8, 6]}>
-              <Button
-                type="text"
-                icon={<IconNotification />}
-                iconOnly
-                onClick={() => {
-                  setShowAlert(!showAlert);
-                  console.log(checkUpdate);
-                  checkUpdate.isRead = true;
-                  setCheckUpdate(checkUpdate);
-                  systemConfig.setCheckUpdate(checkUpdate);
+    <>
+      {!isUserScriptsAvailable() && (
+        <Alert type="warning" content={<div dangerouslySetInnerHTML={{ __html: t("develop_mode_guide") }} />} />
+      )}
+      <Card
+        size="small"
+        title={
+          <div className="flex justify-between">
+            <span className="text-xl">ScriptCat</span>
+            <div className="flex flex-row items-center">
+              <Switch
+                size="small"
+                checked={isEnableScript}
+                onChange={(val) => {
+                  setIsEnableScript(val);
+                  if (val) {
+                    localStorage.enable_script = "true";
+                  } else {
+                    localStorage.enable_script = "false";
+                  }
                }}
              />
-            </Badge>
-            <Dropdown
-              droplist={
-                <Menu
-                  style={{
-                    maxHeight: "none",
+              <Button
+                type="text"
+                icon={<IconHome />}
+                iconOnly
+                onClick={() => {
+                  // 用a链接的方式,vivaldi竟然会直接崩溃
+                  window.open("/src/options.html", "_blank");
+                }}
+              />
+              <Badge count={checkUpdate.isRead ? 0 : 1} dot offset={[-8, 6]}>
+                <Button
+                  type="text"
+                  icon={<IconNotification />}
+                  iconOnly
+                  onClick={() => {
+                    setShowAlert(!showAlert);
+                    checkUpdate.isRead = true;
+                    setCheckUpdate(checkUpdate);
+                    systemConfig.setCheckUpdate(checkUpdate);
                  }}
-                  onClickMenuItem={async (key) => {
-                    switch (key) {
-                      case "newScript":
-                        await chrome.storage.local.set({
-                          activeTabUrl: {
-                            url: currentUrl,
-                          },
-                        });
-                        window.open("/src/options.html#/script/editor?target=initial", "_blank");
-                        break;
-                      default:
-                        window.open(key, "_blank");
-                        break;
-                    }
-                  }}
-                >
-                  <Menu.Item key="newScript">
-                    <IconPlus style={iconStyle} />
-                    {t("create_script")}
-                  </Menu.Item>
-                  <Menu.Item key={`https://scriptcat.org/search?domain=${url && url.host}`}>
-                    <IconSearch style={iconStyle} />
-                    {t("get_script")}
-                  </Menu.Item>
-                  <Menu.Item key="https://github.com/scriptscat/scriptcat/issues">
-                    <IconBug style={iconStyle} />
-                    {t("report_issue")}
-                  </Menu.Item>
-                  <Menu.Item key="https://docs.scriptcat.org/">
-                    <IconBook style={iconStyle} />
-                    {t("project_docs")}
-                  </Menu.Item>
-                  <Menu.Item key="https://bbs.tampermonkey.net.cn/">
-                    <RiMessage2Line style={iconStyle} />
-                    {t("community")}
-                  </Menu.Item>
-                  <Menu.Item key="https://github.com/scriptscat/scriptcat">
-                    <IconGithub style={iconStyle} />
-                    GitHub
-                  </Menu.Item>
-                </Menu>
-              }
-              trigger="click"
-            >
-              <Button type="text" icon={<IconMoreVertical />} iconOnly />
-            </Dropdown>
+                />
+              </Badge>
+              <Dropdown
+                droplist={
+                  <Menu
+                    style={{
+                      maxHeight: "none",
+                    }}
+                    onClickMenuItem={async (key) => {
+                      switch (key) {
+                        case "newScript":
+                          await chrome.storage.local.set({
+                            activeTabUrl: {
+                              url: currentUrl,
+                            },
+                          });
+                          window.open("/src/options.html#/script/editor?target=initial", "_blank");
+                          break;
+                        default:
+                          window.open(key, "_blank");
+                          break;
+                      }
+                    }}
+                  >
+                    <Menu.Item key="newScript">
+                      <IconPlus style={iconStyle} />
+                      {t("create_script")}
+                    </Menu.Item>
+                    <Menu.Item key={`https://scriptcat.org/search?domain=${url && url.host}`}>
+                      <IconSearch style={iconStyle} />
+                      {t("get_script")}
+                    </Menu.Item>
+                    <Menu.Item key="https://github.com/scriptscat/scriptcat/issues">
+                      <IconBug style={iconStyle} />
+                      {t("report_issue")}
+                    </Menu.Item>
+                    <Menu.Item key="https://docs.scriptcat.org/">
+                      <IconBook style={iconStyle} />
+                      {t("project_docs")}
+                    </Menu.Item>
+                    <Menu.Item key="https://bbs.tampermonkey.net.cn/">
+                      <RiMessage2Line style={iconStyle} />
+                      {t("community")}
+                    </Menu.Item>
+                    <Menu.Item key="https://github.com/scriptscat/scriptcat">
+                      <IconGithub style={iconStyle} />
+                      GitHub
+                    </Menu.Item>
+                  </Menu>
+                }
+                trigger="click"
+              >
+                <Button type="text" icon={<IconMoreVertical />} iconOnly />
+              </Dropdown>
+            </div>
          </div>
-        </div>
-      }
-      bodyStyle={{ padding: 0 }}
-    >
-      <Alert
-        style={{ display: showAlert ? "flex" : "none" }}
-        type="info"
-        content={<div dangerouslySetInnerHTML={{ __html: checkUpdate.notice || "" }} />}
-      />
-      <Collapse bordered={false} defaultActiveKey={["script", "background"]} style={{ maxWidth: 640 }}>
-        <CollapseItem
-          header={t("current_page_scripts")}
-          name="script"
-          style={{ padding: "0" }}
-          contentStyle={{ padding: "0" }}
-        >
-          <ScriptMenuList script={scriptList} isBackscript={false} currentUrl={currentUrl} />
-        </CollapseItem>
-
-        <CollapseItem
-          header={t("enabled_background_scripts")}
-          name="background"
-          style={{ padding: "0" }}
-          contentStyle={{ padding: "0" }}
-        >
-          <ScriptMenuList script={backScriptList} isBackscript currentUrl={currentUrl} />
-        </CollapseItem>
-      </Collapse>
-      <div className="flex flex-row arco-card-header !h-6">
-        <span className="text-[12px] font-500">{`v${ExtVersion}`}</span>
-        {semver.lt(ExtVersion, checkUpdate.version) && (
-          <span
-            onClick={() => {
-              window.open(`https://github.com/scriptscat/scriptcat/releases/tag/v${version}`);
-            }}
-            className="text-1 font-500"
-            style={{ cursor: "pointer" }}
+        }
+        bodyStyle={{ padding: 0 }}
+      >
+        <Alert
+          style={{ display: showAlert ? "flex" : "none" }}
+          type="info"
+          content={<div dangerouslySetInnerHTML={{ __html: checkUpdate.notice || "" }} />}
+        />
+        <Collapse bordered={false} defaultActiveKey={["script", "background"]} style={{ maxWidth: 640 }}>
+          <CollapseItem
+            header={t("current_page_scripts")}
+            name="script"
+            style={{ padding: "0" }}
+            contentStyle={{ padding: "0" }}
          >
-            {t("popup.new_version_available")}
-          </span>
-        )}
-      </div>
-    </Card>
+            <ScriptMenuList script={scriptList} isBackscript={false} currentUrl={currentUrl} />
+          </CollapseItem>
+
+          <CollapseItem
+            header={t("enabled_background_scripts")}
+            name="background"
+            style={{ padding: "0" }}
+            contentStyle={{ padding: "0" }}
+          >
+            <ScriptMenuList script={backScriptList} isBackscript currentUrl={currentUrl} />
+          </CollapseItem>
+        </Collapse>
+        <div className="flex flex-row arco-card-header !h-6">
+          <span className="text-[12px] font-500">{`v${ExtVersion}`}</span>
+          {semver.lt(ExtVersion, checkUpdate.version) && (
+            <span
+              onClick={() => {
+                window.open(`https://github.com/scriptscat/scriptcat/releases/tag/v${checkUpdate.version}`);
+              }}
+              className="text-1 font-500"
+              style={{ cursor: "pointer" }}
+            >
+              {t("popup.new_version_available")}
+            </span>
+          )}
+        </div>
+      </Card>
+    </>
  );
 }

--- a/src/pkg/config/config.ts
+++ b/src/pkg/config/config.ts
@ -225,18 +225,19 @@ export class SystemConfig {
    this.set("menu_expand_num", val);
  }

-  async getLanguage() {
-    const defaultLanguage = await new Promise<string>((resolve) => {
-      chrome.i18n.getAcceptLanguages((lngs) => {
-        // 遍历数组寻找匹配语言
-        for (let i = 0; i < lngs.length; i += 1) {
-          const lng = lngs[i];
-          if (i18n.hasResourceBundle(lng, "translation")) {
-            resolve(lng);
-            break;
-          }
+  async getLanguage(acceptLanguages?: string[]): Promise<string> {
+    const defaultLanguage = await new Promise<string>(async (resolve) => {
+      if (!acceptLanguages) {
+        acceptLanguages = await chrome.i18n.getAcceptLanguages();
+      }
+      // 遍历数组寻找匹配语言
+      for (let i = 0; i < acceptLanguages.length; i += 1) {
+        const lng = acceptLanguages[i];
+        if (i18n.hasResourceBundle(lng, "translation")) {
+          resolve(lng);
+          break;
        }
-      });
+      }
    });
    return this.get("language", defaultLanguage || chrome.i18n.getUILanguage());
  }
--- a/src/pkg/utils/utils.ts
+++ b/src/pkg/utils/utils.ts
@ -266,7 +266,6 @@ export function errorMsg(e: any): string {
 }

 export function isUserScriptsAvailable() {
-  return false;
  try {
    // Property access which throws if developer mode is not enabled.
    chrome.userScripts;