EduarteXD ebf6447507
feat: 为chrome拓展添加手动调用翻译的功能 (#3)
* feat: 为chrome拓展添加手动调用翻译的功能

* feat: add SC-BOX-TRANSLATE-API-AVAILABLE message

* refactor: move content script logic to core.js

* feat: add context menu for translating pages

* chore: 🤖 使用extension.js

* chore: update package metadata

* chore: ensure context menu creation on extension install

* feat: add toggle translation functionality

* feat: add support for dynamic localization based on tab URL

* feat: add Chinese translation for Star Citizen browser extension

* docs: update README with new API usage instructions

* refactor: update translation logic to append original values

* typescript support

* feat: add manual URL handling for localization

* feat: add postMessage for toggling SC-BOX translate

* feat: add translation toggle event to postMessage

* feat: add translation status and message handling

* refactor: optimize localization version logging
2025-05-08 19:56:41 +08:00

3.2 KiB
Raw Blame History

星际公民盒子 浏览器拓展

为您将星际公民官网及常用工具网站翻译为中文的浏览器拓展,所有翻译内容来自 星际公民中文社区汉化组。 本插件也内置于 星际公民盒子

SC网站翻译项目CxJuice/ScWeb_Chinese_Translate

本插件仅供大致浏览使用,不对任何有关本插件产生的问题负责!在涉及账号操作前请注意确认网站的原本内容!

img

安装

Google Chrome 应用商店

Microsoft Edge 加载项(因微软审核较慢,可能存在版本滞后,推荐优先使用 Chrome 源)

Firefox ADD-ONS

手动安装

下载 zip 后使用插件的开发者功能手动安装 dist/chrome 文件夹 Firefox 安装 dist/firefox 文件夹。

开发者

调用翻译Hook

  enum SCBoxTranslateStatus {
    Available,
    Translated,
    NotAvailable,
  }

  const [translateApiAvailable, setTranslateApiAvailable] = useState<SCBoxTranslateStatus>(SCBoxTranslateStatus.NotAvailable);

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      if (event.source !== window) return;
      // 在插件加载后会向页面发送消息
      if (event.data?.type === 'SC-BOX-TRANSLATE-API-AVAILABLE') {
        setTranslateApiAvailable(SCBoxTranslateStatus.Available);
      }
      // 在翻译状态改变时插件也会向页面发送消息
      if (event.data?.type === 'TOGGLED-SC-BOX-TRANSLATE') {
        switch (event.data.action) {
          case 'on':
            setTranslateApiAvailable(SCBoxTranslateStatus.Translated);
            return;
          case 'off':
            setTranslateApiAvailable(SCBoxTranslateStatus.Available);
            return;
        }
      }
    }

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);
  // 触发翻译
  window.postMessage({ 
    type: 'SC_TRANSLATE_REQUEST', 
    action: 'translate', 
    requestId: Math.random().toString(36)
  }, '*');

  // 撤销翻译
  window.postMessage({ 
    type: 'SC_TRANSLATE_REQUEST', 
    action: 'undoTranslate', 
    requestId: Math.random().toString(36)
  }, '*');

开发/调试

安装依赖
pnpm install
开发模式

此命令在开发模式下运行您的扩展程序。它将启动一个新的浏览器实例,加载您的扩展程序。每当您对代码进行更改时,页面将自动重新加载,从而提供流畅的开发体验。

pnpm dev
# firefox
pnpm dev:firefox
编译

此命令用于为生产环境构建您的扩展程序。它会优化和打包您的扩展程序,准备好部署到目标浏览器的商店。

pnpm build
# firefox
pnpm build:firefox