diff --git a/src/content.js b/src/content.js index 4fedee9..5b7a887 100644 --- a/src/content.js +++ b/src/content.js @@ -7,7 +7,7 @@ import { } from "./config"; import { getSettingWithDefault, getRulesWithDefault } from "./libs/storage"; import { Translator } from "./libs/translator"; -import { isIframe } from "./libs/iframe"; +import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe"; import { matchRule } from "./libs/rules"; import { webfix } from "./libs/webfix"; @@ -15,8 +15,34 @@ import { webfix } from "./libs/webfix"; * 入口函数 */ const init = async () => { - const href = isIframe ? document.referrer : document.location.href; const setting = await getSettingWithDefault(); + + if (isIframe) { + let translator; + window.addEventListener("message", (e) => { + const { action, args } = e.data || {}; + switch (action) { + case MSG_TRANS_TOGGLE: + translator?.toggle(); + break; + case MSG_TRANS_TOGGLE_STYLE: + translator?.toggleStyle(); + break; + case MSG_TRANS_PUTRULE: + if (!translator) { + translator = new Translator(args, setting); + } else { + translator.updateRule(args || {}); + } + break; + default: + } + }); + sendPrentMsg(MSG_TRANS_GETRULE); + return; + } + + const href = document.location.href; const rules = await getRulesWithDefault(); const rule = await matchRule(rules, href, setting); const translator = new Translator(rule, setting); @@ -27,20 +53,32 @@ const init = async () => { switch (action) { case MSG_TRANS_TOGGLE: translator.toggle(); + sendIframeMsg(MSG_TRANS_TOGGLE); break; case MSG_TRANS_TOGGLE_STYLE: translator.toggleStyle(); + sendIframeMsg(MSG_TRANS_TOGGLE_STYLE); break; case MSG_TRANS_GETRULE: break; case MSG_TRANS_PUTRULE: translator.updateRule(args); + sendIframeMsg(MSG_TRANS_PUTRULE, args); break; default: return { error: `message action is unavailable: ${action}` }; } return { data: translator.rule }; }); + window.addEventListener("message", (e) => { + const { action } = e.data || {}; + switch (action) { + case MSG_TRANS_GETRULE: + sendIframeMsg(MSG_TRANS_PUTRULE, rule); + break; + default: + } + }); }; (async () => { diff --git a/src/libs/iframe.js b/src/libs/iframe.js index 3f5ed83..55108e4 100644 --- a/src/libs/iframe.js +++ b/src/libs/iframe.js @@ -5,3 +5,7 @@ export const sendIframeMsg = (action, args) => { iframe.contentWindow.postMessage({ action, args }, "*"); }); }; + +export const sendPrentMsg = (action, args) => { + window.parent.postMessage({ action, args }, "*"); +}; diff --git a/src/userscript.js b/src/userscript.js index cf7991e..4a21ea5 100644 --- a/src/userscript.js +++ b/src/userscript.js @@ -10,8 +10,13 @@ import { } from "./libs/storage"; import { Translator } from "./libs/translator"; import { trySyncAllSubRules } from "./libs/subRules"; -import { MSG_TRANS_TOGGLE, MSG_TRANS_PUTRULE } from "./config"; -import { isIframe } from "./libs/iframe"; +import { + MSG_TRANS_TOGGLE, + MSG_TRANS_TOGGLE_STYLE, + MSG_TRANS_GETRULE, + MSG_TRANS_PUTRULE, +} from "./config"; +import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe"; import { handlePing, injectScript } from "./libs/gm"; import { matchRule } from "./libs/rules"; import { genEventName } from "./libs/utils"; @@ -46,29 +51,49 @@ const init = async () => { } // 翻译页面 - const href = isIframe ? document.referrer : document.location.href; const setting = await getSettingWithDefault(); + + if (isIframe) { + let translator; + window.addEventListener("message", (e) => { + const { action, args } = e.data || {}; + switch (action) { + case MSG_TRANS_TOGGLE: + translator?.toggle(); + break; + case MSG_TRANS_TOGGLE_STYLE: + translator?.toggleStyle(); + break; + case MSG_TRANS_PUTRULE: + if (!translator) { + translator = new Translator(args, setting); + } else { + translator.updateRule(args || {}); + } + break; + default: + } + }); + sendPrentMsg(MSG_TRANS_GETRULE); + return; + } + + const href = isIframe ? document.referrer : document.location.href; const rules = await getRulesWithDefault(); const rule = await matchRule(rules, href, setting); const translator = new Translator(rule, setting); webfix(href, setting); - if (isIframe) { - // iframe - window.addEventListener("message", (e) => { - const action = e?.data?.action; - switch (action) { - case MSG_TRANS_TOGGLE: - translator.toggle(); - break; - case MSG_TRANS_PUTRULE: - translator.updateRule(e.data.args || {}); - break; - default: - } - }); - return; - } + // 监听消息 + window.addEventListener("message", (e) => { + const { action } = e.data || {}; + switch (action) { + case MSG_TRANS_GETRULE: + sendIframeMsg(MSG_TRANS_PUTRULE, rule); + break; + default: + } + }); // 浮球按钮 const fab = await getFabWithDefault(); diff --git a/src/views/Action/index.js b/src/views/Action/index.js index 8610bbd..511a07d 100644 --- a/src/views/Action/index.js +++ b/src/views/Action/index.js @@ -16,8 +16,11 @@ import { OPT_SHORTCUT_STYLE, OPT_SHORTCUT_POPUP, OPT_SHORTCUT_SETTING, + MSG_TRANS_TOGGLE, + MSG_TRANS_TOGGLE_STYLE, } from "../../config"; import { shortcutRegister } from "../../libs/shortcut"; +import { sendIframeMsg } from "../../libs/iframe"; export default function Action({ translator, fab }) { const fabWidth = 40; @@ -57,10 +60,12 @@ export default function Action({ translator, fab }) { const clearShortcuts = [ shortcutRegister(shortcuts[OPT_SHORTCUT_TRANSLATE], () => { translator.toggle(); + sendIframeMsg(MSG_TRANS_TOGGLE); setShowPopup(false); }), shortcutRegister(shortcuts[OPT_SHORTCUT_STYLE], () => { translator.toggleStyle(); + sendIframeMsg(MSG_TRANS_TOGGLE_STYLE); setShowPopup(false); }), shortcutRegister(shortcuts[OPT_SHORTCUT_POPUP], () => { @@ -91,6 +96,7 @@ export default function Action({ translator, fab }) { "Toggle Translate (Alt+q)", (event) => { translator.toggle(); + sendIframeMsg(MSG_TRANS_TOGGLE); setShowPopup(false); }, "Q" @@ -99,6 +105,7 @@ export default function Action({ translator, fab }) { "Toggle Style (Alt+c)", (event) => { translator.toggleStyle(); + sendIframeMsg(MSG_TRANS_TOGGLE_STYLE); setShowPopup(false); }, "C"