☰

DuckDuckGo優化

便捷返回頂部/跨引擎一鍵搜

目前為 2025-04-15 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name               DuckDuckGo Optimization
  3. // @name:zh-CN         DuckDuckGo优化
  4. // @name:zh-TW         DuckDuckGo優化
  5. // @description        Double Click To Return The Top / Shortcuts To Other Search Engines
  6. // @description:zh-CN  便捷返回顶部/跨引擎一键搜
  7. // @description:zh-TW  便捷返回頂部/跨引擎一鍵搜
  8. // @version            1.1.0
  9. // @icon               https://raw.githubusercontent.com/MiPoNianYou/UserScripts/refs/heads/main/Icons/DuckDuckGoOptimizationIcon.svg
  10. // @author             念柚
  11. // @namespace          https://github.com/MiPoNianYou/UserScripts
  12. // @supportURL         https://github.com/MiPoNianYou/UserScripts/issuesx
  13. // @license            GPL-3.0
  14. // @match              https://duckduckgo.com/*
  15. // @grant              GM_addStyle
  16. // ==/UserScript==
  17.  
  18. (function () {
  19.   "use strict";
  20.  
  21.   const RightAreaRatio = 0.2;
  22.   const InteractiveElementsSelector =
  23.     'a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])';
  24.   const SearchFormSelector = "#search_form";
  25.   const SearchInputSelector = "#search_form_input";
  26.   const SearchBtnGroupClass = "SearchBtnGroup";
  27.   const SearchBtnClass = "SearchBtn";
  28.   const DebounceDelay = 250;
  29.  
  30.   document.addEventListener(
  31.     "dblclick",
  32.     function (Event) {
  33.       const WindowWidth = window.innerWidth;
  34.       const TriggerBoundary = WindowWidth * (1 - RightAreaRatio);
  35.       if (
  36.         Event.clientX > TriggerBoundary &&
  37.         !Event.target.closest(InteractiveElementsSelector)
  38.       ) {
  39.         window.scrollTo({
  40.           top: 0,
  41.           behavior: "smooth",
  42.         });
  43.       }
  44.     },
  45.     { passive: true }
  46.   );
  47.  
  48.   const SearchButtonStyle = `
  49.   .${SearchBtnGroupClass} {
  50.     display: flex;
  51.     flex-wrap: wrap;
  52.     gap: 12px;
  53.     margin: 12px auto;
  54.     padding: 0 10px;
  55.     max-width: 800px;
  56.     justify-content: center;
  57.   }
  58.   .${SearchBtnClass} {
  59.     padding: 10px 20px;
  60.     background: rgba(255, 255, 255, 0.1);
  61.     border: 1px solid rgba(255, 255, 255, 0.2);
  62.     border-radius: 24px;
  63.     color: #e6e6e6;
  64.     font-family: inherit;
  65.     font-size: 14px;
  66.     cursor: pointer;
  67.     transition: all 0.2s ease;
  68.     min-width: 120px;
  69.     text-align: center;
  70.     flex-grow: 1;
  71.     flex-basis: 120px;
  72.     box-sizing: border-box;
  73.   }
  74.   .${SearchBtnClass}:hover {
  75.     background: rgba(255, 255, 255, 0.15);
  76.     border-color: rgba(255, 255, 255, 0.3);
  77.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  78.   }
  79.   @media (prefers-color-scheme: light) {
  80.     .${SearchBtnClass} {
  81.       background: #f8f9fa;
  82.       border-color: #ddd;
  83.       color: #444;
  84.     }
  85.     .${SearchBtnClass}:hover {
  86.       background: #f1f3f4;
  87.       border-color: #dadce0;
  88.     }
  89.   }
  90. `;
  91.   GM_addStyle(SearchButtonStyle);
  92.  
  93.   const EngineList = [
  94.     { Name: "Google", Url: "https://www.google.com/search?q=" },
  95.     { Name: "Bing", Url: "https://www.bing.com/search?q=" },
  96.     { Name: "Baidu", Url: "https://www.baidu.com/s?wd=" },
  97.   ];
  98.  
  99.   function Debounce(Func, Wait) {
  100.     let Timeout;
  101.     return function ExecutedFunction(...Args) {
  102.       const Later = () => {
  103.         clearTimeout(Timeout);
  104.         Func(...Args);
  105.       };
  106.       clearTimeout(Timeout);
  107.       Timeout = setTimeout(Later, Wait);
  108.     };
  109.   }
  110.  
  111.   function CreateSearchButtons() {
  112.     const SearchForm = document.querySelector(SearchFormSelector);
  113.  
  114.     if (!SearchForm || document.querySelector(`.${SearchBtnGroupClass}`)) {
  115.       return;
  116.     }
  117.  
  118.     const SearchInput = SearchForm.querySelector(SearchInputSelector);
  119.     if (!SearchInput) {
  120.       return;
  121.     }
  122.  
  123.     const BtnGroup = document.createElement("div");
  124.     BtnGroup.className = SearchBtnGroupClass;
  125.  
  126.     EngineList.forEach((Engine) => {
  127.       const Button = document.createElement("button");
  128.       Button.className = SearchBtnClass;
  129.       Button.textContent = `使用 ${Engine.Name} 搜索`;
  130.       Button.type = "button";
  131.  
  132.       Button.addEventListener("click", (Event) => {
  133.         Event.preventDefault();
  134.         const Query = SearchInput.value.trim();
  135.  
  136.         if (Query) {
  137.           const SearchUrl = `${Engine.Url}${encodeURIComponent(Query)}`;
  138.           window.open(SearchUrl, "_blank", "noopener,noreferrer");
  139.         }
  140.       });
  141.       BtnGroup.appendChild(Button);
  142.     });
  143.  
  144.     SearchForm.parentNode.insertBefore(BtnGroup, SearchForm.nextSibling);
  145.   }
  146.  
  147.   const DebouncedCreateSearchButtons = Debounce(
  148.     CreateSearchButtons,
  149.     DebounceDelay
  150.   );
  151.  
  152.   const Observer = new MutationObserver(() => {
  153.     DebouncedCreateSearchButtons();
  154.   });
  155.  
  156.   Observer.observe(document.body, {
  157.     childList: true,
  158.     subtree: true,
  159.   });
  160.  
  161.   if (document.readyState === "loading") {
  162.     window.addEventListener("DOMContentLoaded", CreateSearchButtons);
  163.   } else {
  164.     CreateSearchButtons();
  165.   }
  166. })();