130 lines
3.6 KiB
JavaScript
130 lines
3.6 KiB
JavaScript
import { browser } from "./libs/browser";
|
|
import React from "react";
|
|
import ReactDOM from "react-dom/client";
|
|
import Action from "./views/Action";
|
|
import createCache from "@emotion/cache";
|
|
import { CacheProvider } from "@emotion/react";
|
|
import {
|
|
MSG_TRANS_TOGGLE,
|
|
MSG_TRANS_TOGGLE_STYLE,
|
|
MSG_TRANS_GETRULE,
|
|
MSG_TRANS_PUTRULE,
|
|
APP_LCNAME,
|
|
} from "./config";
|
|
import {
|
|
getSettingWithDefault,
|
|
getRulesWithDefault,
|
|
getFabWithDefault,
|
|
} from "./libs/storage";
|
|
import { Translator } from "./libs/translator";
|
|
import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe";
|
|
import { matchRule } from "./libs/rules";
|
|
import { webfix } from "./libs/webfix";
|
|
|
|
/**
|
|
* 入口函数
|
|
*/
|
|
const init = async () => {
|
|
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);
|
|
webfix(href, setting);
|
|
|
|
// 监听消息
|
|
browser?.runtime.onMessage.addListener(async ({ action, args }) => {
|
|
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:
|
|
}
|
|
});
|
|
|
|
// 浮球按钮
|
|
const fab = await getFabWithDefault();
|
|
if (!fab.isHide) {
|
|
const $action = document.createElement("div");
|
|
$action.setAttribute("id", APP_LCNAME);
|
|
document.body.parentElement.appendChild($action);
|
|
const shadowContainer = $action.attachShadow({ mode: "closed" });
|
|
const emotionRoot = document.createElement("style");
|
|
const shadowRootElement = document.createElement("div");
|
|
shadowContainer.appendChild(emotionRoot);
|
|
shadowContainer.appendChild(shadowRootElement);
|
|
const cache = createCache({
|
|
key: APP_LCNAME,
|
|
prepend: true,
|
|
container: emotionRoot,
|
|
});
|
|
ReactDOM.createRoot(shadowRootElement).render(
|
|
<React.StrictMode>
|
|
<CacheProvider value={cache}>
|
|
<Action translator={translator} fab={fab} />
|
|
</CacheProvider>
|
|
</React.StrictMode>
|
|
);
|
|
}
|
|
};
|
|
|
|
(async () => {
|
|
try {
|
|
await init();
|
|
} catch (err) {
|
|
console.error("[KISS-Translator]", err);
|
|
const $err = document.createElement("div");
|
|
$err.innerText = `KISS-Translator: ${err.message}`;
|
|
$err.style.cssText = "background:red; color:#fff;";
|
|
document.body.prepend($err);
|
|
}
|
|
})();
|