use random eventname

src/config/index.js

@@ -53,8 +53,6 @@ export const MSG_TRANS_GETRULE = "trans_getrule";
 export const MSG_TRANS_PUTRULE = "trans_putrule";
 export const MSG_TRANS_CURRULE = "trans_currule";
 
-export const EVENT_KISS = "kissEvent";
-
 export const THEME_LIGHT = "light";
 export const THEME_DARK = "dark";
 

src/libs/gm.js

@@ -1,5 +1,10 @@
 import { fetchGM } from "./fetch";
 
+/**
+ * 之否支持unsafeWindow
+ */
+export const isGrantUnsafe = GM?.info?.script?.grant?.includes("unsafeWindow");
+
 /**
  * 注入页面的脚本，请求并接受GM接口信息
  * @param {*} param0

src/libs/translator.js

@@ -3,7 +3,6 @@ import {
   APP_LCNAME,
   TRANS_MIN_LENGTH,
   TRANS_MAX_LENGTH,
-  EVENT_KISS,
   MSG_TRANS_CURRULE,
   OPT_STYLE_DASHLINE,
   OPT_STYLE_FUZZY,
@@ -11,7 +10,7 @@ import {
 } from "../config";
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
-import { debounce } from "./utils";
+import { debounce, genEventName } from "./utils";
 
 /**
  * 翻译类
@@ -37,6 +36,7 @@ export class Translator {
     "script",
     "iframe",
   ];
+  _eventName = genEventName();
 
   // 显示
   _interseObserver = new IntersectionObserver(
@@ -105,6 +105,10 @@ export class Translator {
     return this._setting;
   }
 
+  get eventName() {
+    return this._eventName;
+  }
+
   get rule() {
     // console.log("get rule", this._rule);
     return this._rule;
@@ -115,8 +119,9 @@ export class Translator {
     this._rule = rule;
 
     // 广播消息
+    const eventName = this._eventName;
     window.dispatchEvent(
-      new CustomEvent(EVENT_KISS, {
+      new CustomEvent(eventName, {
         detail: {
           action: MSG_TRANS_CURRULE,
           args: rule,

src/libs/utils.js

@@ -116,3 +116,9 @@ export const sha256 = async (text, salt) => {
     .map((b) => b.toString(16).padStart(2, "0"))
     .join("");
 };
+
+/**
+ * 生成随机事件名称
+ * @returns
+ */
+export const genEventName = () => btoa(Math.random()).slice(3, 11);

src/userscript.js

@@ -12,8 +12,9 @@ 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 { handlePing, injectScript } from "./libs/gm";
+import { isGrantUnsafe, handlePing, injectScript } from "./libs/gm";
 import { matchRule } from "./libs/rules";
+import { genEventName } from "./libs/utils";
 
 /**
  * 入口函数
@@ -25,11 +26,11 @@ const init = async () => {
     document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
     document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
   ) {
-    if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
+    if (isGrantUnsafe) {
       unsafeWindow.GM = GM;
       unsafeWindow.APP_NAME = process.env.REACT_APP_NAME;
     } else {
-      const ping = btoa(Math.random()).slice(3, 11);
+      const ping = genEventName();
       window.addEventListener(ping, handlePing);
       // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
       const script = document.createElement("script");

src/views/Content/index.js

@@ -9,7 +9,6 @@ import {
   OPT_STYLE_HIGHLIGHT,
   OPT_STYLE_DIY,
   DEFAULT_COLOR,
-  EVENT_KISS,
   MSG_TRANS_CURRULE,
   TRANS_NEWLINE_LENGTH,
 } from "../../config";
@@ -112,11 +111,11 @@ export default function Content({ q, translator }) {
   };
 
   useEffect(() => {
-    window.addEventListener(EVENT_KISS, handleKissEvent);
+    window.addEventListener(translator.eventName, handleKissEvent);
     return () => {
-      window.removeEventListener(EVENT_KISS, handleKissEvent);
+      window.removeEventListener(translator.eventName, handleKissEvent);
     };
-  }, []);
+  }, [translator.eventName]);
 
   if (loading) {
     return (