fix: iframe bugs

src/config/i18n.js

@@ -1788,7 +1788,7 @@ export const I18N = {
     zh: `滚动加载提前触发 (0-10000px)`,
     en: `Early triggering of scroll loading (0-10000px)`,
     zh_TW: `滾動載入提前觸發 (0-10000px)`,
-  }
+  },
 };
 
 export const newI18n = (lang) => (key) => I18N[key]?.[lang] || "";

src/hooks/Alert.js

@@ -59,7 +59,11 @@ export function AlertProvider({ children }) {
         onClose={handleClose}
         anchorOrigin={{ vertical, horizontal }}
       >
-        <Alert onClose={handleClose} severity={severity} sx={{ maxWidth: "80%" }}>
+        <Alert
+          onClose={handleClose}
+          severity={severity}
+          sx={{ maxWidth: "80%" }}
+        >
           {message}
         </Alert>
       </Snackbar>

src/libs/fabManager.js

@@ -3,12 +3,12 @@ import { APP_CONSTS } from "../config";
 import ContentFab from "../views/Action/ContentFab";
 
 export class FabManager extends ShadowDomManager {
-  constructor({ translator, processActions, fabConfig }) {
+  constructor({ processActions, fabConfig }) {
     super({
       id: APP_CONSTS.fabID,
       className: "notranslate",
       reactComponent: ContentFab,
-      props: { translator, processActions, fabConfig },
+      props: { processActions, fabConfig },
     });
 
     if (!fabConfig?.isHide) {

src/libs/translatorManager.js

@@ -54,15 +54,15 @@ export default class TranslatorManager {
       isIframe,
     });
 
-    if (!isIframe) {
     this._transboxManager = new TransboxManager(setting);
+
+    if (!isIframe) {
       this._inputTranslator = new InputTranslator(setting);
       this._popupManager = new PopupManager({
         translator: this._translator,
         processActions: this.#processActions.bind(this),
       });
       this._fabManager = new FabManager({
-        translator: this._translator,
         processActions: this.#processActions.bind(this),
         fabConfig,
       });
@@ -137,6 +137,9 @@ export default class TranslatorManager {
       window.addEventListener("message", this.#windowMessageHandler);
     } else {
       browser.runtime.onMessage.addListener(this.#browserMessageHandler);
+      if (this.#isIframe) {
+        window.addEventListener("message", this.#windowMessageHandler);
+      }
     }
   }
 
@@ -184,7 +187,7 @@ export default class TranslatorManager {
   }
 
   #handleBrowserMessage(message, sender, sendResponse) {
-    const result = this.#processActions(message);
+    const result = this.#processActions(message, true);
     const response = result || {
       rule: this._translator.rule,
       setting: this._translator.setting,
@@ -242,9 +245,9 @@ export default class TranslatorManager {
     ];
   }
 
-  #processActions({ action, args } = {}) {
+  #processActions({ action, args } = {}, fromExt = false) {
-    if (this.#isUserscript) {
+    if (!fromExt) {
-      sendIframeMsg(action);
+      sendIframeMsg(action, args);
     }
 
     switch (action) {

src/views/Action/ContentFab.js

@@ -5,11 +5,9 @@ import Draggable from "./Draggable";
 import { useState, useMemo, useCallback } from "react";
 import { SettingProvider } from "../../hooks/Setting";
 import { MSG_TRANS_TOGGLE, MSG_POPUP_TOGGLE } from "../../config";
-import { sendIframeMsg } from "../../libs/iframe";
 import useWindowSize from "../../hooks/WindowSize";
 
 export default function ContentFab({
-  translator,
   fabConfig: { x: fabX, y: fabY, fabClickAction = 0 } = {},
   processActions,
 }) {
@@ -28,13 +26,12 @@ export default function ContentFab({
   const handleClick = useCallback(() => {
     if (!moved) {
       if (fabClickAction === 1) {
-        translator.toggle();
+        processActions({ action: MSG_TRANS_TOGGLE });
-        sendIframeMsg(MSG_TRANS_TOGGLE);
       } else {
         processActions({ action: MSG_POPUP_TOGGLE });
       }
     }
-  }, [moved, translator, fabClickAction, processActions]);
+  }, [moved, fabClickAction, processActions]);
 
   const fabProps = useMemo(
     () => ({

src/views/Popup/PopupCont.js

@@ -110,6 +110,7 @@ export default function PopupCont({
   };
 
   const handleChange = async (e) => {
+    console.log("handleChange", e);
     try {
       const { name, value } = e.target;
       setRule((pre) => ({ ...pre, [name]: value }));