☰

Google Search Syntax Helper

Show Google search syntax on Google homepage and search results page, with resizable and draggable functionality

  1. // ==UserScript==
  2. // @name         Google Search Syntax Helper
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.5
  5. // @description  Show Google search syntax on Google homepage and search results page, with resizable and draggable functionality
  6. // @author       而今迈步从头越
  7. // @match        https://www.google.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Google search syntax text
  15.     const syntaxText = `
  16.         <div id="syntax-helper" style="
  17.             position: fixed;
  18.             background: white;
  19.             border: 1px solid #ccc;
  20.             padding: 10px;
  21.             z-index: 9999;
  22.             width: 300px;
  23.             box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  24.             top: 10px;
  25.             right: 350px;
  26.             resize: both;
  27.             overflow: auto;
  28.         ">
  29.             <div id="syntax-header" style="
  30.                 cursor: move;
  31.                 background: #f1f1f1;
  32.                 padding: 5px;
  33.                 border-bottom: 1px solid #ccc;
  34.             ">
  35.                 <strong>Google 搜索语法:</strong>
  36.             </div>
  37.             <ul style="padding-left: 20px;">
  38.                 <li><code>"关键词"</code> - 精确匹配关键词</li>
  39.                 <li><code>关键词1 OR 关键词2</code> - 匹配任一关键词</li>
  40.                 <li><code>-关键词</code> - 排除某个关键词</li>
  41.                 <li><code>site:example.com</code> - 只在指定网站搜索</li>
  42.                 <li><code>filetype:pdf</code> - 搜索特定文件类型</li>
  43.                 <li><code>related:example.com</code> - 查找相似网站</li>
  44.                 <li><code>define:词汇</code> - 查询词汇定义</li>
  45.                 <li><code>intitle:关键词</code> - 标题中包含关键词</li>
  46.                 <li><code>inurl:关键词</code> - URL中包含关键词</li>
  47.             </ul>
  48.         </div>
  49.     `;
  50.  
  51.     // Append the syntax helper to the body
  52.     document.body.insertAdjacentHTML('beforeend', syntaxText);
  53.  
  54.     // Make the syntax helper draggable
  55.     const syntaxHelper = document.getElementById('syntax-helper');
  56.     const syntaxHeader = document.getElementById('syntax-header');
  57.  
  58.     syntaxHeader.addEventListener('mousedown', function(e) {
  59.         let offsetX = e.clientX - syntaxHelper.getBoundingClientRect().left;
  60.         let offsetY = e.clientY - syntaxHelper.getBoundingClientRect().top;
  61.  
  62.         function mouseMoveHandler(e) {
  63.             syntaxHelper.style.left = `${e.clientX - offsetX}px`;
  64.             syntaxHelper.style.top = `${e.clientY - offsetY}px`;
  65.         }
  66.  
  67.         function mouseUpHandler() {
  68.             document.removeEventListener('mousemove', mouseMoveHandler);
  69.             document.removeEventListener('mouseup', mouseUpHandler);
  70.         }
  71.  
  72.         document.addEventListener('mousemove', mouseMoveHandler);
  73.         document.addEventListener('mouseup', mouseUpHandler);
  74.     });
  75.  
  76.     // Ensure the syntax helper is positioned within the viewport on load
  77.     window.addEventListener('load', function() {
  78.         const rect = syntaxHelper.getBoundingClientRect();
  79.         if (rect.right > window.innerWidth) {
  80.             syntaxHelper.style.right = '10px';
  81.         }
  82.         if (rect.bottom > window.innerHeight) {
  83.             syntaxHelper.style.bottom = '10px';
  84.         }
  85.     });
  86. })();