Merge branch 'main' into develop/mv3

# Conflicts:
#	package.json
#	src/manifest.json

.eslintrc.cjs

@@ -25,6 +25,7 @@ module.exports = {
   plugins: ["react", "@typescript-eslint", "prettier"],
   rules: {
     "no-restricted-syntax": "off",
+    "react/require-default-props": "off",
     "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
     "no-unused-expressions": ["error", { allowShortCircuit: true }],
     "react/jsx-props-no-spreading": "off",

src/app/message/content.ts

@@ -34,14 +34,11 @@ export default class MessageContent
       this.nativeSend(data);
     });
     this.relatedTarget = new Map<number, Element>();
-    document.addEventListener(
+    window.addEventListener(
       (isContent ? "ct" : "fd") + eventId,
       (event: unknown) => {
-        if (event instanceof MutationEvent) {
-          this.relatedTarget.set(
-            parseInt(event.prevValue, 10),
-            <Element>event.relatedNode
-          );
+        if (event instanceof MouseEvent) {
+          this.relatedTarget.set(event.clientX, <Element>event.relatedTarget);
           return;
         }
         const message = (<
@@ -116,15 +113,11 @@ export default class MessageContent
       delete detail.data.relatedTarget;
       detail.data.relatedTarget = Math.ceil(Math.random() * 1000000);
       // 可以使用此种方式交互element
-      const ev = document.createEvent("MutationEvent");
-      ev.initMutationEvent(
-        (this.isContent ? "fd" : "ct") + this.eventId,
-        false,
-        false,
-        target,
-        detail.data.relatedTarget.toString()
-      );
-      document.dispatchEvent(ev);
+      const ev = new MouseEvent((this.isContent ? "fd" : "ct") + this.eventId, {
+        clientX: detail.data.relatedTarget,
+        relatedTarget: target,
+      });
+      window.dispatchEvent(ev);
     }
 
     if (typeof cloneInto !== "undefined") {
@@ -142,7 +135,7 @@ export default class MessageContent
     const ev = new CustomEvent((this.isContent ? "fd" : "ct") + this.eventId, {
       detail,
     });
-    document.dispatchEvent(ev);
+    window.dispatchEvent(ev);
   }
 
   public send(action: string, data: any) {

src/pages/components/ScriptMenuList/index.tsx

@@ -28,6 +28,7 @@ import { RiPlayFill, RiStopFill } from "react-icons/ri";
 import RuntimeController from "@App/runtime/content/runtime";
 import { useTranslation } from "react-i18next";
 import { SystemConfig } from "@App/pkg/config/config";
+import { ScriptIcons } from "@App/pages/options/routes/utils";
 
 const CollapseItem = Collapse.Item;
 
@@ -159,8 +160,10 @@ const ScriptMenuList: React.FC<{
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
                       color: item.runNum === 0 ? "rgb(var(--gray-5))" : "",
+                      lineHeight: "20px",
                     }}
                   >
+                    <ScriptIcons script={item} size={20} />
                     {item.name}
                   </span>
                 </Space>

src/pages/options/routes/ScriptList.tsx

@@ -75,7 +75,12 @@ import { useTranslation } from "react-i18next";
 import { nextTime, semTime } from "@App/pkg/utils/utils";
 import { i18nName } from "@App/locales/locales";
 import { SystemConfig } from "@App/pkg/config/config";
-import { getValues, ListHomeRender, scriptListSort } from "./utils";
+import {
+  getValues,
+  ListHomeRender,
+  ScriptIcons,
+  scriptListSort,
+} from "./utils";
 
 type ListType = Script & { loading?: boolean };
 
@@ -162,16 +167,9 @@ function ScriptList() {
             loading={item.loading}
             disabled={item.loading}
             onChange={(checked) => {
-              setScriptList((list) => {
-                return list.map((script) => {
-                  if (script.id === item.id) {
-                    script.loading = true;
-                  }
-                  return script;
-                });
-              });
               setScriptList((list) => {
                 const index = list.findIndex((script) => script.id === item.id);
+                list[index].loading = true;
                 let p: Promise<any>;
                 if (checked) {
                   p = scriptCtrl.enable(item.id).then(() => {
@@ -257,8 +255,10 @@ function ScriptList() {
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
+                  lineHeight: "20px",
                 }}
               >
+                <ScriptIcons script={item} size={20} />
                 {i18nName(item)}
               </Text>
             </Link>

src/pages/options/routes/utils.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import React from "react";
 import IoC from "@App/app/ioc";
-import { Script, ScriptDAO } from "@App/app/repo/scripts";
+import { Metadata, Script, ScriptDAO } from "@App/app/repo/scripts";
 import ValueManager from "@App/app/service/value/manager";
-import { Button, Space, Tooltip } from "@arco-design/web-react";
+import { Avatar, Button, Space, Tooltip } from "@arco-design/web-react";
 import {
   IconBug,
   IconCode,
@@ -190,3 +190,34 @@ export function getValues(script: Script) {
       return newValues;
     });
 }
+
+export type ScriptIconsProps = {
+  script: { name: string; metadata: Metadata };
+  size?: number;
+  style?: React.CSSProperties;
+};
+
+export function ScriptIcons({ script, size = 32, style }: ScriptIconsProps) {
+  style = style || {};
+  style.display = style.display || "inline-block";
+  style.marginRight = style.marginRight || "8px";
+  let icon = "";
+  if (script.metadata.icon) {
+    [icon] = script.metadata.icon;
+  } else if (script.metadata.iconurl) {
+    [icon] = script.metadata.iconurl;
+  } else if (script.metadata.icon64) {
+    [icon] = script.metadata.icon64;
+  } else if (script.metadata.icon64url) {
+    [icon] = script.metadata.icon64url;
+  }
+  if (icon) {
+    return (
+      <Avatar size={size || 32} shape="square" style={style}>
+        <img src={icon} alt={script?.name} />
+      </Avatar>
+    );
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <></>;
+}

src/runtime/background/runtime.ts

@@ -11,6 +11,7 @@ import {
   ScriptDAO,
   ScriptRunResouce,
   SCRIPT_RUN_STATUS_RUNNING,
+  Metadata,
 } from "@App/app/repo/scripts";
 import ResourceManager from "@App/app/service/resource/manager";
 import ValueManager from "@App/app/service/value/manager";
@@ -47,6 +48,7 @@ export type ScriptMenu = {
   enable: boolean;
   updatetime: number;
   hasUserConfig: boolean;
+  metadata: Metadata;
   runStatus?: SCRIPT_RUN_STATUS;
   runNum: number;
   runNumByIframe: number;
@@ -319,6 +321,7 @@ export default class Runtime extends Manager {
                 name: i18nName(item.script),
                 enable: item.script.status === SCRIPT_STATUS_ENABLE,
                 updatetime: item.script.updatetime || item.script.createtime,
+                metadata: item.script.metadata,
                 hasUserConfig: !!item.script.config,
                 runNum: item.runNum,
                 runNumByIframe: item.runNumByIframe,
@@ -332,6 +335,7 @@ export default class Runtime extends Manager {
               name: i18nName(script),
               enable: script.status === SCRIPT_STATUS_ENABLE,
               updatetime: script.updatetime || script.createtime,
+              metadata: item.script.metadata,
               hasUserConfig: !!script?.config,
               runNum: item.runNum,
               runNumByIframe: item.runNumByIframe,
@@ -364,6 +368,7 @@ export default class Runtime extends Manager {
             name: item.name,
             enable: item.status === SCRIPT_STATUS_ENABLE,
             updatetime: item.updatetime || item.createtime,
+            metadata: item.metadata,
             runStatus: item.runStatus,
             hasUserConfig: !!item.config,
             runNum: