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

README.md

@@ -3,12 +3,11 @@
 为您将星际公民官网及常用工具网站翻译为中文的浏览器拓展，所有翻译内容来自 星际公民中文社区汉化组。
 本插件也内置于 [星际公民盒子](https://github.com/xkeyC/StarCitizenToolBox) 。
 
-SC网站翻译项目：https://github.com/CxJuice/ScWeb_Chinese_Translate
+SC网站翻译项目：[CxJuice/ScWeb_Chinese_Translate](https://github.com/CxJuice/ScWeb_Chinese_Translate)
 
-## 本插件仅供大致浏览使用，不对任何有关本插件产生的问题负责！在涉及账号操作前请注意确认网站的原本内容！
-
-<img width="640" alt="8b9bdcc6d352639fd134df61e6e702ef" src="https://github.com/xkeyC/StarCitizenBoxBrowserEx/assets/39891083/9580f52a-13ea-4234-a0d3-b8d06f06dda2">
+## **本插件仅供大致浏览使用，不对任何有关本插件产生的问题负责！在涉及账号操作前请注意确认网站的原本内容！**
 
+![img](https://github.com/xkeyC/StarCitizenBoxBrowserEx/assets/39891083/9580f52a-13ea-4234-a0d3-b8d06f06dda2)
 
 ## 安装
 
@@ -19,4 +18,87 @@ SC网站翻译项目：https://github.com/CxJuice/ScWeb_Chinese_Translate
 [Firefox ADD-ONS](https://addons.mozilla.org/zh-CN/firefox/addon/%E6%98%9F%E9%99%85%E5%85%AC%E6%B0%91%E7%9B%92%E5%AD%90%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8B%93%E5%B1%95/)
 
 ## 手动安装
-下载 zip 后使用插件的开发者功能手动安装 StarCitizenBoxBrowserEx 文件夹 Firefox 安装 StarCitizenBoxBrowserEx_Firefox 文件夹。
+
+下载 zip 后使用插件的开发者功能手动安装 dist/chrome 文件夹 Firefox 安装 dist/firefox 文件夹。
+
+### 开发者
+
+#### 调用翻译Hook
+
+```tsx
+  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);
+  }, []);
+```
+
+```ts
+  // 触发翻译
+  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)
+  }, '*');
+```
+
+#### 开发/调试
+
+##### 安装依赖
+
+```bash
+pnpm install
+```
+
+##### 开发模式
+
+此命令在开发模式下运行您的扩展程序。它将启动一个新的浏览器实例，加载您的扩展程序。每当您对代码进行更改时，页面将自动重新加载，从而提供流畅的开发体验。
+
+```bash
+pnpm dev
+# firefox
+pnpm dev:firefox
+```
+
+##### 编译
+
+此命令用于为生产环境构建您的扩展程序。它会优化和打包您的扩展程序，准备好部署到目标浏览器的商店。
+
+```bash
+pnpm build
+# firefox
+pnpm build:firefox
+```