update version number: 2.0.1

fix translation style

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=2.0.0
+REACT_APP_VERSION=2.0.1
 
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 

README.en.md

@@ -96,7 +96,7 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
 
 > Note: For the following reasons, it is recommended to use browser extensions first
 >
-> - Browser extensions have more complete functions (subtitle translation, local language recognition, context menu, etc.)
+> - Browser extensions have more complete functions (local language recognition, context menu, etc.)
 > - Grease Monkey script will encounter more usage problems (cross domain issues, script conflicts, etc.)
 
 - [x] Browser extension

README.md

@@ -92,7 +92,7 @@
 
 > 注：基于以下原因，建议优先使用浏览器扩展
 >
-> - 浏览器扩展的功能更完整（字幕翻译、本地语言识别、右键菜单等）
+> - 浏览器扩展的功能更完整（本地语言识别、右键菜单等）
 > - 油猴脚本会遇到更多使用上的问题（跨域问题、脚本冲突等）
 
 - [x] 浏览器扩展

config-overrides.js

@@ -106,6 +106,7 @@ const userscriptWebpack = (config, env) => {
 // @connect       openai.azure.com
 // @connect       workers.dev
 // @connect       github.io
+// @connect       github.com
 // @connect       githubusercontent.com
 // @connect       kiss-translator.rayjar.com
 // @connect       ghproxy.com
@@ -130,7 +131,6 @@ const userscriptWebpack = (config, env) => {
   config.entry = {
     main: paths.appIndexJs,
     options: paths.appSrc + "/options.js",
-    injector: paths.appSrc + "/injector.js",
     "kiss-translator.user": paths.appSrc + "/userscript.js",
   };
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

public/manifest.thunderbird.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

src/background.js

@@ -23,6 +23,7 @@ import {
   CMD_OPEN_TRANBOX,
   CLIENT_THUNDERBIRD,
   MSG_SET_LOGLEVEL,
+  MSG_CLEAR_CACHES,
 } from "./config";
 import { getSettingWithDefault, tryInitDefaultData } from "./libs/storage";
 import { trySyncSettingAndRules } from "./libs/sync";
@@ -275,6 +276,7 @@ const messageHandlers = {
   [MSG_BUILTINAI_DETECT]: (args) => chromeDetect(args),
   [MSG_BUILTINAI_TRANSLATE]: (args) => chromeTranslate(args),
   [MSG_SET_LOGLEVEL]: (args) => logger.setLevel(args),
+  [MSG_CLEAR_CACHES]: () => tryClearCaches(),
 };
 
 /**

src/common.js

@@ -20,6 +20,7 @@ import { trySyncAllSubRules } from "./libs/subRules";
 import { isInBlacklist } from "./libs/blacklist";
 import { runSubtitle } from "./subtitle/subtitle";
 import { logger } from "./libs/log";
+import { injectInlineJs } from "./libs/injector";
 
 /**
  * 油猴脚本设置页面
@@ -35,9 +36,10 @@ function runSettingPage() {
     const ping = genEventName();
     window.addEventListener(ping, handlePing);
     // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
-    const script = document.createElement("script");
+    injectInlineJs(
-    script.textContent = `(${injectScript})("${ping}")`;
+      `(${injectScript})("${ping}")`,
-    document.head.append(script);
+      "kiss-translator-options-injector"
+    );
   }
 }
 
@@ -127,7 +129,7 @@ function showErr(message) {
   });
 
   const closeButton = document.createElement("span");
-  closeButton.innerHTML = "×";
+  closeButton.textContent = "×";
 
   Object.assign(closeButton.style, {
     position: "absolute",
@@ -216,7 +218,7 @@ export async function run(isUserscript = false) {
     }
 
     // 字幕翻译
-    runSubtitle({ href, setting, rule });
+    runSubtitle({ href, setting, rule, isUserscript });
 
     // 监听消息
     // !isUserscript && runtimeListener(translator);

src/config/api.js

@@ -448,7 +448,7 @@ const defaultApi = {
   useBatchFetch: false, // 是否启用聚合发送请求
   useContext: false, // 是否启用智能上下文
   contextSize: DEFAULT_CONTEXT_SIZE, // 智能上下文保留会话数
-  temperature: 0,
+  temperature: 0.0,
   maxTokens: 20480,
   think: false,
   thinkIgnore: "qwen3,deepseek-r1",

src/config/i18n.js

@@ -1609,8 +1609,8 @@ export const I18N = {
     zh_TW: `AI处理切割长度(200-20000)`,
   },
   subtitle_helper_1: {
-    zh: `1、目前仅支持Youtube桌面网站，且仅支持浏览器扩展。`,
+    zh: `1、目前仅支持Youtube桌面网站。`,
-    en: `1. Currently only supports Youtube desktop website and browser extension.`,
+    en: `1. Currently only supports Youtube desktop website.`,
     zh_TW: `1.目前僅支援Youtube桌面網站，且僅支援瀏覽器擴充功能。`,
   },
   subtitle_helper_2: {

src/config/msg.js

@@ -3,7 +3,7 @@ export const CMD_TOGGLE_STYLE = "toggleStyle";
 export const CMD_OPEN_OPTIONS = "openOptions";
 export const CMD_OPEN_TRANBOX = "openTranbox";
 
-export const MSG_FETCH = "fetch";
+export const MSG_FETCH = "kiss_fetch";
 export const MSG_GET_HTTPCACHE = "get_httpcache";
 export const MSG_PUT_HTTPCACHE = "put_httpcache";
 export const MSG_OPEN_OPTIONS = "open_options";
@@ -25,6 +25,7 @@ export const MSG_UPDATE_CSP = "update_csp";
 export const MSG_BUILTINAI_DETECT = "builtinai_detect";
 export const MSG_BUILTINAI_TRANSLATE = "builtinai_translte";
 export const MSG_SET_LOGLEVEL = "set_loglevel";
+export const MSG_CLEAR_CACHES = "clear_caches";
 
 export const MSG_XHR_DATA_YOUTUBE = "KISS_XHR_DATA_YOUTUBE";
 // export const MSG_GLOBAL_VAR_FETCH = "KISS_GLOBAL_VAR_FETCH";

src/config/setting.js

@@ -141,7 +141,7 @@ export const DEFAULT_MOUSE_HOVER_SETTING = {
 };
 
 export const DEFAULT_SETTING = {
-  darkMode: false, // 深色模式
+  darkMode: "auto", // 深色模式
   uiLang: "en", // 界面语言
   // fetchLimit: DEFAULT_FETCH_LIMIT, // 最大任务数量(移至rule，作废)
   // fetchInterval: DEFAULT_FETCH_INTERVAL, // 任务间隔时间(移至rule，作废)

src/hooks/ColorMode.js

@@ -12,7 +12,12 @@ export function useDarkMode() {
   } = useSetting();
 
   const toggleDarkMode = useCallback(() => {
-    updateSetting({ darkMode: !darkMode });
+    const nextMode = {
+      light: "dark",
+      dark: "auto",
+      auto: "light",
+    };
+    updateSetting({ darkMode: nextMode[darkMode] || "light" });
   }, [darkMode, updateSetting]);
 
   return { darkMode, toggleDarkMode };

src/hooks/Setting.js

@@ -17,6 +17,7 @@ import { debounceSyncMeta } from "../libs/storage";
 import Loading from "./Loading";
 import { logger } from "../libs/log";
 import { sendBgMsg } from "../libs/msg";
+import { isExt } from "../libs/client";
 
 const SettingContext = createContext({
   setting: DEFAULT_SETTING,
@@ -32,11 +33,22 @@ export function SettingProvider({ children }) {
     reload,
   } = useStorage(STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY);
 
+  useEffect(() => {
+    if (typeof setting?.darkMode === "boolean") {
+      update((currentSetting) => ({
+        ...currentSetting,
+        darkMode: currentSetting.darkMode ? "dark" : "light",
+      }));
+    }
+  }, [setting?.darkMode, update]);
+
   useEffect(() => {
     (async () => {
       try {
         logger.setLevel(setting?.logLevel);
-        await sendBgMsg(MSG_SET_LOGLEVEL, setting?.logLevel);
+        if (isExt) {
+          await sendBgMsg(MSG_SET_LOGLEVEL, setting?.logLevel);
+        }
       } catch (error) {
         logger.error("Failed to fetch log level, using default.", error);
       }

src/hooks/Theme.js

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { CssBaseline, GlobalStyles } from "@mui/material";
 import { useDarkMode } from "./ColorMode";
@@ -11,6 +11,21 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
  */
 export default function Theme({ children, options, styles }) {
   const { darkMode } = useDarkMode();
+  const [systemMode, setSystemMode] = useState(THEME_LIGHT);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setSystemMode(mediaQuery.matches ? THEME_DARK : THEME_LIGHT);
+    };
+    handleChange(); // Set initial value
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
   const theme = useMemo(() => {
     let htmlFontSize = 16;
     try {
@@ -23,16 +38,19 @@ export default function Theme({ children, options, styles }) {
       //
     }
 
+    const isDarkMode =
+      darkMode === "dark" || (darkMode === "auto" && systemMode === THEME_DARK);
+
     return createTheme({
       palette: {
-        mode: darkMode ? THEME_DARK : THEME_LIGHT,
+        mode: isDarkMode ? THEME_DARK : THEME_LIGHT,
       },
       typography: {
         htmlFontSize,
       },
       ...options,
     });
-  }, [darkMode, options]);
+  }, [darkMode, options, systemMode]);
 
   return (
     <ThemeProvider theme={theme}>

src/hooks/ValidationInput.js

@@ -1,8 +1,16 @@
 import { useState, useEffect } from "react";
 import TextField from "@mui/material/TextField";
-import { limitNumber } from "../libs/utils";
+import { limitNumber, limitFloat } from "../libs/utils";
 
-function ValidationInput({ value, onChange, name, min, max, ...props }) {
+function ValidationInput({
+  value,
+  onChange,
+  name,
+  min,
+  max,
+  isFloat = false,
+  ...props
+}) {
   const [localValue, setLocalValue] = useState(value);
 
   useEffect(() => {
@@ -21,7 +29,9 @@ function ValidationInput({ value, onChange, name, min, max, ...props }) {
       return;
     }
 
-    const validatedValue = limitNumber(numValue, min, max);
+    const validatedValue = isFloat
+      ? limitFloat(numValue, min, max)
+      : limitNumber(numValue, min, max);
 
     if (validatedValue !== numValue) {
       setLocalValue(validatedValue);

src/injector.js

@@ -1,21 +1,3 @@
-import { MSG_XHR_DATA_YOUTUBE } from "./config";
+import { XMLHttpRequestInjector } from "./subtitle/XMLHttpRequestInjector";
 
-(function () {
+XMLHttpRequestInjector();
-  const originalOpen = XMLHttpRequest.prototype.open;
-  XMLHttpRequest.prototype.open = function (...args) {
-    const url = args[1];
-    if (typeof url === "string" && url.includes("timedtext")) {
-      this.addEventListener("load", function () {
-        window.postMessage(
-          {
-            type: MSG_XHR_DATA_YOUTUBE,
-            url: this.responseURL,
-            response: this.responseText,
-          },
-          window.location.origin
-        );
-      });
-    }
-    return originalOpen.apply(this, args);
-  };
-})();

src/libs/cache.js

@@ -1,6 +1,7 @@
 import {
   CACHE_NAME,
   DEFAULT_CACHE_TIMEOUT,
+  MSG_CLEAR_CACHES,
   MSG_GET_HTTPCACHE,
   MSG_PUT_HTTPCACHE,
 } from "../config";
@@ -15,7 +16,11 @@ import { blobToBase64 } from "./utils";
  */
 export const tryClearCaches = async () => {
   try {
-    caches.delete(CACHE_NAME);
+    if (isExt && !isBg) {
+      await sendBgMsg(MSG_CLEAR_CACHES);
+    } else {
+      await caches.delete(CACHE_NAME);
+    }
   } catch (err) {
     kissLog("clean caches", err);
   }

src/libs/injector.js

@@ -1,28 +1,29 @@
-// Function to inject inline JavaScript code
+import { trustedTypesHelper } from "./trustedTypes";
-export const injectInlineJs = (code) => {
-  const el = document.createElement("script");
-  el.setAttribute("data-source", "kiss-inject injectInlineJs");
-  el.setAttribute("type", "text/javascript");
-  el.textContent = code;
-  document.body?.appendChild(el);
-};
 
-// Function to inject external JavaScript file
+// Function to inject inline JavaScript code
-export const injectExternalJs = (src, id = "kiss-translator-injector") => {
+export const injectInlineJs = (code, id = "kiss-translator-inline-js") => {
   if (document.getElementById(id)) {
     return;
   }
 
-  // const el = document.createElement("script");
+  const el = document.createElement("script");
-  // el.setAttribute("data-source", "kiss-inject injectExternalJs");
+  el.type = "text/javascript";
-  // el.setAttribute("type", "text/javascript");
+  el.id = id;
-  // el.setAttribute("src", src);
+  el.textContent = trustedTypesHelper.createScript(code);
-  // el.setAttribute("id", id);
+  (document.head || document.documentElement).appendChild(el);
-  // document.body?.appendChild(el);
+};
-  const script = document.createElement("script");
+
-  script.id = id;
+// Function to inject external JavaScript file
-  script.src = src;
+export const injectExternalJs = (src, id = "kiss-translator-external-js") => {
-  (document.head || document.documentElement).appendChild(script);
+  if (document.getElementById(id)) {
+    return;
+  }
+
+  const el = document.createElement("script");
+  el.type = "text/javascript";
+  el.id = id;
+  el.src = trustedTypesHelper.createScriptURL(src);
+  (document.head || document.documentElement).appendChild(el);
 };
 
 // Function to inject internal CSS code

src/libs/shortcut.js

@@ -34,12 +34,18 @@ export const shortcutListener = (
     pressedKeys.delete(e.code);
   };
 
+  const handleBlur = () => {
+    pressedKeys.clear();
+  };
+
   target.addEventListener("keydown", handleKeyDown);
   target.addEventListener("keyup", handleKeyUp);
+  window.addEventListener("blur", handleBlur);
 
   return () => {
     target.removeEventListener("keydown", handleKeyDown);
     target.removeEventListener("keyup", handleKeyUp);
+    window.removeEventListener("blur", handleBlur);
     pressedKeys.clear();
   };
 };

src/libs/translator.js

@@ -37,6 +37,7 @@ import { browser } from "./browser";
 import { isIframe, sendIframeMsg } from "./iframe";
 import { TransboxManager } from "./tranbox";
 import { InputTranslator } from "./inputTranslate";
+import { trustedTypesHelper } from "./trustedTypes";
 
 /**
  * @class Translator
@@ -1021,10 +1022,19 @@ export class Translator {
         return;
       }
 
-      inner.innerHTML = this.#restoreFromTranslation(
+      const htmlString = this.#restoreFromTranslation(
         translatedText,
         placeholderMap
       );
+      const trustedHTML = trustedTypesHelper.createHTML(htmlString);
+
+      // const parser = new DOMParser();
+      // const doc = parser.parseFromString(trustedHTML, "text/html");
+      // const innerElement = doc.body.firstChild;
+      // inner.replaceChildren(innerElement);
+
+      inner.innerHTML = trustedHTML;
+
       this.#translationNodes.set(wrapper, {
         nodes,
         isHide: hideOrigin,
@@ -1382,7 +1392,8 @@ export class Translator {
         injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
         injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
       } else {
-        injectJs && injectInlineJs(injectJs);
+        injectJs &&
+          injectInlineJs(injectJs, "kiss-translator-userinit-injector");
         injectCss && injectInternalCss(injectCss);
       }
     } catch (err) {

src/libs/trustedTypes.js

@@ -0,0 +1,33 @@
+export const trustedTypesHelper = (() => {
+  const POLICY_NAME = "kiss-translator-policy";
+  let policy = null;
+
+  if (globalThis.trustedTypes && globalThis.trustedTypes.createPolicy) {
+    try {
+      policy = globalThis.trustedTypes.createPolicy(POLICY_NAME, {
+        createHTML: (string) => string,
+        createScript: (string) => string,
+        createScriptURL: (string) => string,
+      });
+    } catch (err) {
+      if (err.message.includes("already exists")) {
+        policy = globalThis.trustedTypes.policies.get(POLICY_NAME);
+      } else {
+        console.error("cont create Trusted Types", err);
+      }
+    }
+  }
+
+  return {
+    createHTML: (htmlString) => {
+      return policy ? policy.createHTML(htmlString) : htmlString;
+    },
+    createScript: (scriptString) => {
+      return policy ? policy.createScript(scriptString) : scriptString;
+    },
+    createScriptURL: (urlString) => {
+      return policy ? policy.createScriptURL(urlString) : urlString;
+    },
+    isEnabled: () => policy !== null,
+  };
+})();

src/libs/utils.js

@@ -15,7 +15,7 @@ export const limitNumber = (num, min = 0, max = 100) => {
   return number;
 };
 
-export const limitFloat = (num, min = 0, max = 100) => {
+export const limitFloat = (num, min = 0.0, max = 100.0) => {
   const number = parseFloat(num);
   if (Number.isNaN(number) || number < min) {
     return min;

src/subtitle/BilingualSubtitleManager.js

@@ -258,7 +258,7 @@ export class BilingualSubtitleManager {
       p1.textContent = truncateWords(subtitle.text);
 
       const p2 = document.createElement("p");
-      p2.style.cssText = this.#setting.originStyle;
+      p2.style.cssText = this.#setting.translationStyle;
       p2.textContent = truncateWords(subtitle.translation) || "...";
 
       if (this.#setting.isBilingual) {

src/subtitle/XMLHttpRequestInjector.js

@@ -0,0 +1,19 @@
+export const XMLHttpRequestInjector = () => {
+  const originalOpen = XMLHttpRequest.prototype.open;
+  XMLHttpRequest.prototype.open = function (...args) {
+    const url = args[1];
+    if (typeof url === "string" && url.includes("timedtext")) {
+      this.addEventListener("load", function () {
+        window.postMessage(
+          {
+            type: "KISS_XHR_DATA_YOUTUBE",
+            url: this.responseURL,
+            response: this.responseText,
+          },
+          window.location.origin
+        );
+      });
+    }
+    return originalOpen.apply(this, args);
+  };
+};

src/subtitle/YouTubeCaptionProvider.js

@@ -38,7 +38,6 @@ class YouTubeCaptionProvider {
 
   initialize() {
     window.addEventListener("message", (event) => {
-      if (event.source !== window) return;
       if (event.data?.type === MSG_XHR_DATA_YOUTUBE) {
         const { url, response } = event.data;
         if (url && response) {
@@ -66,23 +65,50 @@ class YouTubeCaptionProvider {
     });
   }
 
+  get #videoEl() {
+    return document.querySelector(VIDEO_SELECT);
+  }
+
   #moAds(adContainer) {
-    const adSlector = ".ytp-ad-player-overlay-layout";
+    const adLayoutSelector = ".ytp-ad-player-overlay-layout";
+    const skipBtnSelector =
+      ".ytp-skip-ad-button, .ytp-ad-skip-button, .ytp-ad-skip-button-modern";
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         if (mutation.type === "childList") {
+          const videoEl = this.#videoEl;
           mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === 1 && node.matches(adSlector)) {
+            if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+            if (node.matches(adLayoutSelector)) {
               logger.debug("Youtube Provider: AD start playing!", node);
               // todo: 顺带把广告快速跳过
+              if (videoEl) {
+                videoEl.playbackRate = 16;
+                videoEl.currentTime = videoEl.duration;
+              }
               if (this.#managerInstance) {
                 this.#managerInstance.setIsAdPlaying(true);
               }
+            } else if (node.matches(skipBtnSelector)) {
+              logger.debug("Youtube Provider: AD skip button!", node);
+              node.click();
+            }
+
+            const skipBtn = node?.querySelector(skipBtnSelector);
+            if (skipBtn) {
+              logger.debug("Youtube Provider: AD skip button!!", skipBtn);
+              skipBtn.click();
             }
           });
           mutation.removedNodes.forEach((node) => {
-            if (node.nodeType === 1 && node.matches(adSlector)) {
+            if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+            if (node.matches(adLayoutSelector)) {
               logger.debug("Youtube Provider: Ad ends!");
+              if (videoEl) {
+                videoEl.playbackRate = 1;
+              }
               if (this.#managerInstance) {
                 this.#managerInstance.setIsAdPlaying(false);
               }
@@ -468,7 +494,7 @@ class YouTubeCaptionProvider {
       return;
     }
 
-    const videoEl = document.querySelector(VIDEO_SELECT);
+    const videoEl = this.#videoEl;
     if (!videoEl) {
       logger.warn("Youtube Provider: No video element found");
       return;
@@ -879,7 +905,7 @@ class YouTubeCaptionProvider {
       textAlign: "center",
     });
 
-    const videoEl = document.querySelector(VIDEO_SELECT);
+    const videoEl = this.#videoEl;
     const videoContainer = videoEl?.parentElement?.parentElement;
     if (videoContainer) {
       videoContainer.appendChild(notificationEl);

src/subtitle/subtitle.js

@@ -5,12 +5,14 @@ import { DEFAULT_API_SETTING } from "../config/api.js";
 import { DEFAULT_SUBTITLE_SETTING } from "../config/setting.js";
 import { injectExternalJs } from "../libs/injector.js";
 import { logger } from "../libs/log.js";
+import { XMLHttpRequestInjector } from "./XMLHttpRequestInjector.js";
+import { injectInlineJs } from "../libs/injector.js";
 
 const providers = [
   { pattern: "https://www.youtube.com", start: YouTubeInitializer },
 ];
 
-export function runSubtitle({ href, setting }) {
+export function runSubtitle({ href, setting, isUserscript }) {
   try {
     const subtitleSetting = setting.subtitleSetting || DEFAULT_SUBTITLE_SETTING;
     if (!subtitleSetting.enabled) {
@@ -19,9 +21,13 @@ export function runSubtitle({ href, setting }) {
 
     const provider = providers.find((item) => isMatch(href, item.pattern));
     if (provider) {
-      const id = "kiss-translator-injector";
+      const id = "kiss-translator-xmlHttp-injector";
-      const src = browser.runtime.getURL("injector.js");
+      if (isUserscript) {
-      injectExternalJs(src, id);
+        injectInlineJs(`(${XMLHttpRequestInjector})()`, id);
+      } else {
+        const src = browser.runtime.getURL("injector.js");
+        injectExternalJs(src, id);
+      }
 
       const apiSetting =
         setting.transApis.find(

src/views/Options/Apis.js

@@ -299,8 +299,9 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   name="temperature"
                   value={temperature}
                   onChange={handleChange}
-                  min={0}
+                  min={0.0}
-                  max={2}
+                  max={2.0}
+                  isFloat={true}
                 />
               </Grid>
               <Grid item xs={12} sm={12} md={6} lg={3}>

src/views/Options/DarkModeButton.js

@@ -2,12 +2,19 @@ import IconButton from "@mui/material/IconButton";
 import { useDarkMode } from "../../hooks/ColorMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
+import BrightnessAutoIcon from "@mui/icons-material/BrightnessAuto";
 
 export default function DarkModeButton() {
   const { darkMode, toggleDarkMode } = useDarkMode();
   return (
-    <IconButton onClick={toggleDarkMode} color="inherit">
+    <IconButton sx={{ ml: 1 }} onClick={toggleDarkMode} color="inherit">
-      {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+      {darkMode === "dark" ? (
+        <DarkModeIcon />
+      ) : darkMode === "light" ? (
+        <LightModeIcon />
+      ) : (
+        <BrightnessAutoIcon />
+      )}
     </IconButton>
   );
 }

src/views/Popup/index.js

@@ -471,11 +471,9 @@ export default function Popup({ setShowPopup, translator }) {
           <Button variant="text" onClick={handleSaveRule}>
             {i18n("save_rule")}
           </Button>
-          {!isExt && (
+          <Button variant="text" onClick={handleClearCache}>
-            <Button variant="text" onClick={handleClearCache}>
+            {i18n("clear_cache")}
-              {i18n("clear_cache")}
+          </Button>
-            </Button>
-          )}
           <Button variant="text" onClick={handleOpenSetting}>
             {i18n("setting")}
           </Button>

src/views/Selection/TranCont.js

@@ -72,7 +72,7 @@ export default function TranCont({
     <Box>
       <TextField
         size="small"
-        label={`${i18n("translated_text")} - ${apiSetting.apiSlug}`}
+        label={`${i18n("translated_text")} - ${apiSetting.apiName}`}
         // disabled
         fullWidth
         multiline