feat(right-click-restorer): add unsupported page detection

- Detect and block chrome://, chrome-extension://, about://, edge://, brave:// pages
- Show 'Unsupported' badge with warning icon and disabled button
- Add 'unsupported' and 'unsupportedDesc' i18n keys (zh/en)
- Update useRightClickRestorer hook with isUnsupported state
- Add unit tests for unsupported page behavior
- Update page UI to render conditional unsupported layout

pages/RightClickRestorer/useRightClickRestorer.ts

@@ -1,10 +1,29 @@
 import { useCallback, useEffect, useState } from 'react';
 import { MessageAction, sendMessageToContent } from '@/utils/messages';
 
+const UNSUPPORTED_PROTOCOLS = new Set([
+  'chrome:',
+  'chrome-extension:',
+  'about:',
+  'edge:',
+  'brave:',
+]);
+
+function isUnsupportedPage(url: string | undefined): boolean {
+  if (!url) return true;
+  try {
+    const protocol = new URL(url).protocol;
+    return UNSUPPORTED_PROTOCOLS.has(protocol);
+  } catch {
+    return true;
+  }
+}
+
 export interface UseRightClickRestorerReturn {
   domain: string;
   isLoading: boolean;
   isUnlocked: boolean;
+  isUnsupported: boolean;
   unlock: () => Promise<void>;
 }
 
@@ -12,19 +31,28 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   const [domain, setDomain] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isUnlocked, setIsUnlocked] = useState<boolean>(false);
+  const [isUnsupported, setIsUnsupported] = useState<boolean>(false);
 
   useEffect(() => {
     const load = async () => {
       try {
         const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-        if (tab?.url) {
+        const url = tab?.url;
+
+        if (url) {
           try {
-            setDomain(new URL(tab.url).hostname);
+            setDomain(new URL(url).hostname);
           } catch {
             setDomain('');
           }
         }
 
+        if (isUnsupportedPage(url)) {
+          setIsUnsupported(true);
+          setIsLoading(false);
+          return;
+        }
+
         const response = await sendMessageToContent(MessageAction.QUERY_RIGHT_CLICK_STATUS);
         if (response?.success) {
           setIsUnlocked(response.restored);
@@ -40,6 +68,8 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   }, []);
 
   const unlock = useCallback(async () => {
+    if (isUnsupported) return;
+
     try {
       const response = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
       if (response?.success) {
@@ -48,12 +78,13 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
     } catch (err) {
       console.error('[RightClickRestorer] Failed to unlock:', err);
     }
-  }, []);
+  }, [isUnsupported]);
 
   return {
     domain,
     isLoading,
     isUnlocked,
+    isUnsupported,
     unlock,
   };
 }