Merge: Firefox Progress Bar Overlap Fix and In-Page “Pause on This Site” Button

src/popup/SpeedControl.css

@@ -3,6 +3,12 @@
   user-select: none;
   font-size: 1.1em;
   background-color: var(--fg-color);  
+  --padding: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  padding-bottom: 0px;
 
   & > .options {
     display: grid; 
@@ -28,6 +34,30 @@
 
   }
 
+  & .pause-site-button {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+  }
+
+  & .pause-site-button button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #3a3a3a;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+  }
+
+  & .pause-site-button button:hover {
+    background-color: #555;
+  }
+
   & > .NumericControl {
     margin-top: 15px;
 

src/popup/SpeedControl.tsx

@@ -7,7 +7,10 @@ import { produce } from "immer"
 import { replaceArgs } from "src/utils/helper"
 import { clamp, domRectGetOffset, feedbackText, isFirefox, isMobile } from "src/utils/helper"
 import { NumericInput } from "src/comps/NumericInput"
-import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from "react-icons/fa"
+import { FaAngleDoubleLeft, FaAngleDoubleRight, FaAngleLeft, FaAngleRight, FaPause } from "react-icons/fa"
+import { getLatestActiveTabInfo } from "../utils/browserUtils"
+import { generateUrlPart } from "../defaults"
+import { gvar } from "../globalVar"
 import "./SpeedControl.css"
 
 type SpeedControlProps = {
@@ -89,6 +92,60 @@ export function SpeedControl(props: SpeedControlProps) {
       <button onMouseDown={() => {}} onClick={() =>  handleAddDelta(largeStep)}><FaAngleDoubleRight size={"1.14rem"}/></button>
     </div>
 
+    {/* Pause Speed for Current Website Button */}
+    <div className="pause-site-button">
+      <button 
+        title="暂停当前网站倍速"
+        onClick={async () => {
+          try {
+            // 获取当前标签页信息
+            const tabInfo = await getLatestActiveTabInfo();
+            if (!tabInfo || !tabInfo.url) {
+              alert("无法获取当前网页信息");
+              return;
+            }
+
+            // 获取当前URL规则
+            const state = await chrome.storage.local.get(["urlRules"]);
+            let urlRules = state.urlRules || [];
+
+            // 创建新规则
+            const newRule = {
+              id: Math.random().toString(36).substring(2, 15),
+              enabled: true,
+              type: "SPEED",
+              overrideSpeed: 1,
+              condition: {
+                block: false,
+                parts: [generateUrlPart(new URL(tabInfo.url).origin)]
+              },
+              strictness: 3
+            };
+
+            // 添加新规则
+            urlRules.push(newRule);
+
+            // 保存规则
+            await chrome.storage.local.set({ urlRules });
+
+            // 通知用户
+            alert("已为当前网站添加倍速暂停规则，刷新页面后生效");
+
+            // 关闭弹窗
+            window.close();
+          } catch (error) {
+            console.error("添加规则失败:", error);
+            alert("添加规则失败");
+          }
+        }}
+      >
+        <svg t="1759770851288" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" style={{marginRight: "5px"}}>
+          <path d="M128 0h253.155556v1024H128V0z m512 0h256v1024h-256V0z" fill="#ffffff" p-id="4685"></path>
+        </svg>
+        暂停当前网站倍速
+      </button>
+    </div>
+
     {/* Slider */}
     {!!view.speedSlider && (
       <div className="slider">

src/popup/popup.css

@@ -13,6 +13,9 @@ body {
   margin: 0;
   padding: 0;
   background-color: var(--fg-color);
+  /* 修复火狐浏览器中进度条遮挡元素的问题 */
+  scrollbar-width: thin;
+  overflow-x: hidden;
 }
 
 #SuperDisable {