☰

Any Hackernews Link

Check if current page has been posted to Hacker News

目前为 2025-01-06 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Any Hackernews Link
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Check if current page has been posted to Hacker News
  6. // @author       RoCry
  7. // @match        *://*/*
  8. // @grant        GM_xmlhttpRequest
  9. // @connect      hn.algolia.com
  10. // @grant        GM_addStyle
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     /**
  18.      * Configuration
  19.      */
  20.     const CONFIG = {
  21.         // HN API endpoint
  22.         API_URL: 'https://hn.algolia.com/api/v1/search',
  23.         
  24.         // List of domains to ignore
  25.         IGNORED_DOMAINS: [
  26.             'news.ycombinator.com',
  27.             'hn.algolia.com',
  28.             'mail.google.com',
  29.             'gmail.com',
  30.             'outlook.com',
  31.             'yahoo.com',
  32.             'proton.me',
  33.             'localhost',
  34.             'accounts.google.com',
  35.             'drive.google.com',
  36.             'docs.google.com',
  37.             'calendar.google.com',
  38.             'meet.google.com',
  39.             'chat.google.com',
  40.             'web.whatsapp.com',
  41.             'twitter.com/messages',
  42.             'facebook.com/messages',
  43.             'linkedin.com/messaging'
  44.         ],
  45.  
  46.         // Patterns that indicate a search page
  47.         SEARCH_PATTERNS: [
  48.             '/search',
  49.             '/webhp',
  50.             '/results',
  51.             '?q=',
  52.             '?query=',
  53.             '?search=',
  54.             '?s='
  55.         ],
  56.  
  57.         // URL parameters to remove during normalization
  58.         TRACKING_PARAMS: [
  59.             'utm_source',
  60.             'utm_medium',
  61.             'utm_campaign',
  62.             'utm_term',
  63.             'utm_content',
  64.             'fbclid',
  65.             'gclid',
  66.             '_ga',
  67.             'ref',
  68.             'source'
  69.         ]
  70.     };
  71.  
  72.     /**
  73.      * Styles
  74.      */
  75.     const STYLES = `
  76.         @keyframes fadeIn {
  77.             0% { opacity: 0; transform: translateY(10px); }
  78.             100% { opacity: 1; transform: translateY(0); }
  79.         }
  80.         @keyframes pulse {
  81.             0% { opacity: 1; }
  82.             50% { opacity: 0.6; }
  83.             100% { opacity: 1; }
  84.         }
  85.         #hn-float {
  86.             position: fixed;
  87.             bottom: 20px;
  88.             left: 20px;
  89.             z-index: 9999;
  90.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  91.             display: flex;
  92.             align-items: center;
  93.             gap: 12px;
  94.             background: rgba(255, 255, 255, 0.98);
  95.             padding: 8px 12px;
  96.             border-radius: 12px;
  97.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  98.             cursor: pointer;
  99.             transition: all 0.2s ease;
  100.             max-width: 50px;
  101.             overflow: hidden;
  102.             opacity: 0.95;
  103.             height: 40px;
  104.             backdrop-filter: blur(8px);
  105.             -webkit-backdrop-filter: blur(8px);
  106.             animation: fadeIn 0.3s ease forwards;
  107.             will-change: transform, max-width, box-shadow;
  108.             color: #111827;
  109.         }
  110.         #hn-float:hover {
  111.             max-width: 600px;
  112.             opacity: 1;
  113.             transform: translateY(-2px);
  114.             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  115.         }
  116.         #hn-float .hn-icon {
  117.             min-width: 24px;
  118.             width: 24px;
  119.             height: 24px;
  120.             background: linear-gradient(135deg, #ff6600, #ff7f33);
  121.             color: white;
  122.             display: flex;
  123.             align-items: center;
  124.             justify-content: center;
  125.             font-weight: bold;
  126.             border-radius: 6px;
  127.             flex-shrink: 0;
  128.             position: relative;
  129.             font-size: 13px;
  130.             text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  131.             transition: transform 0.2s ease;
  132.         }
  133.         #hn-float:hover .hn-icon {
  134.             transform: scale(1.05);
  135.         }
  136.         #hn-float .hn-icon.not-found {
  137.             background: #9ca3af;
  138.         }
  139.         #hn-float .hn-icon.found {
  140.             background: linear-gradient(135deg, #ff6600, #ff7f33);
  141.         }
  142.         #hn-float .hn-icon.loading {
  143.             background: #6b7280;
  144.             animation: pulse 1.5s infinite;
  145.         }
  146.         #hn-float .hn-icon .badge {
  147.             position: absolute;
  148.             top: -6px;
  149.             right: -6px;
  150.             background: linear-gradient(135deg, #3b82f6, #2563eb);
  151.             color: white;
  152.             border-radius: 10px;
  153.             min-width: 18px;
  154.             height: 18px;
  155.             font-size: 11px;
  156.             display: flex;
  157.             align-items: center;
  158.             justify-content: center;
  159.             padding: 0 4px;
  160.             font-weight: 600;
  161.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  162.             border: 2px solid white;
  163.         }
  164.         #hn-float .hn-info {
  165.             white-space: nowrap;
  166.             overflow: hidden;
  167.             text-overflow: ellipsis;
  168.             line-height: 1.4;
  169.             font-size: 13px;
  170.             opacity: 0;
  171.             transition: opacity 0.2s ease;
  172.         }
  173.         #hn-float:hover .hn-info {
  174.             opacity: 1;
  175.         }
  176.         #hn-float .hn-info a {
  177.             color: inherit;
  178.             font-weight: 500;
  179.             text-decoration: none;
  180.         }
  181.         #hn-float .hn-info a:hover {
  182.             text-decoration: underline;
  183.         }
  184.         #hn-float .hn-stats {
  185.             color: #6b7280;
  186.             font-size: 12px;
  187.             margin-top: 2px;
  188.         }
  189.         @media (prefers-color-scheme: dark) {
  190.             #hn-float {
  191.                 background: rgba(17, 24, 39, 0.95);
  192.                 color: #e5e7eb;
  193.                 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  194.             }
  195.             #hn-float:hover {
  196.                 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  197.             }
  198.             #hn-float .hn-stats {
  199.                 color: #9ca3af;
  200.             }
  201.             #hn-float .hn-icon .badge {
  202.                 border-color: rgba(17, 24, 39, 0.95);
  203.             }
  204.         }
  205.     `;
  206.  
  207.     /**
  208.      * URL Utilities
  209.      */
  210.     const URLUtils = {
  211.         /**
  212.          * Check if a URL should be ignored based on domain or search patterns
  213.          * @param {string} url - URL to check
  214.          * @returns {boolean} - True if URL should be ignored
  215.          */
  216.         shouldIgnoreUrl(url) {
  217.             try {
  218.                 const urlObj = new URL(url);
  219.                 
  220.                 // Check ignored domains
  221.                 if (CONFIG.IGNORED_DOMAINS.some(domain => urlObj.hostname.includes(domain))) {
  222.                     return true;
  223.                 }
  224.  
  225.                 // Check if it's a search page
  226.                 if (CONFIG.SEARCH_PATTERNS.some(pattern => 
  227.                     urlObj.pathname.includes(pattern) || urlObj.search.includes(pattern))) {
  228.                     return true;
  229.                 }
  230.  
  231.                 return false;
  232.             } catch (e) {
  233.                 console.error('Error checking URL:', e);
  234.                 return false;
  235.             }
  236.         },
  237.  
  238.         /**
  239.          * Normalize URL by removing tracking parameters and standardizing format
  240.          * @param {string} url - URL to normalize
  241.          * @returns {string} - Normalized URL
  242.          */
  243.         normalizeUrl(url) {
  244.             try {
  245.                 const urlObj = new URL(url);
  246.                 
  247.                 // Remove tracking parameters
  248.                 CONFIG.TRACKING_PARAMS.forEach(param => urlObj.searchParams.delete(param));
  249.                 
  250.                 // Remove hash
  251.                 urlObj.hash = '';
  252.                 
  253.                 // Remove trailing slash for consistency
  254.                 let normalizedUrl = urlObj.toString();
  255.                 if (normalizedUrl.endsWith('/')) {
  256.                     normalizedUrl = normalizedUrl.slice(0, -1);
  257.                 }
  258.                 
  259.                 return normalizedUrl;
  260.             } catch (e) {
  261.                 console.error('Error normalizing URL:', e);
  262.                 return url;
  263.             }
  264.         },
  265.  
  266.         /**
  267.          * Compare two URLs for equality after normalization
  268.          * @param {string} url1 - First URL
  269.          * @param {string} url2 - Second URL
  270.          * @returns {boolean} - True if URLs match
  271.          */
  272.         urlsMatch(url1, url2) {
  273.             try {
  274.                 const u1 = new URL(this.normalizeUrl(url1));
  275.                 const u2 = new URL(this.normalizeUrl(url2));
  276.                 
  277.                 return u1.hostname.toLowerCase() === u2.hostname.toLowerCase() &&
  278.                        u1.pathname.toLowerCase() === u2.pathname.toLowerCase() &&
  279.                        u1.search === u2.search;
  280.             } catch (e) {
  281.                 console.error('Error comparing URLs:', e);
  282.                 return false;
  283.             }
  284.         }
  285.     };
  286.  
  287.     /**
  288.      * UI Component
  289.      */
  290.     const UI = {
  291.         /**
  292.          * Create and append the floating element to the page
  293.          * @returns {HTMLElement} - The created element
  294.          */
  295.         createFloatingElement() {
  296.             const div = document.createElement('div');
  297.             div.id = 'hn-float';
  298.             div.innerHTML = `
  299.                 <div class="hn-icon loading">Y</div>
  300.                 <div class="hn-info">Checking HN...</div>
  301.             `;
  302.             document.body.appendChild(div);
  303.             return div;
  304.         },
  305.  
  306.         /**
  307.          * Update the floating element with HN data
  308.          * @param {Object|null} data - HN post data or null if not found
  309.          */
  310.         updateFloatingElement(data) {
  311.             const iconDiv = document.querySelector('#hn-float .hn-icon');
  312.             const infoDiv = document.querySelector('#hn-float .hn-info');
  313.             
  314.             iconDiv.classList.remove('loading');
  315.             
  316.             if (!data) {
  317.                 iconDiv.classList.add('not-found');
  318.                 iconDiv.classList.remove('found');
  319.                 iconDiv.innerHTML = 'Y';
  320.                 infoDiv.textContent = 'Not found on HN';
  321.                 return;
  322.             }
  323.             
  324.             iconDiv.classList.remove('not-found');
  325.             iconDiv.classList.add('found');
  326.             iconDiv.innerHTML = `Y${data.comments > 0 ? 
  327.                 `<span class="badge">${data.comments > 999 ? '999+' : data.comments}</span>` : ''}`;
  328.             
  329.             infoDiv.innerHTML = `
  330.                 <div><a href="${data.link}" target="_blank">${data.title}</a></div>
  331.                 <div class="hn-stats">
  332.                     ${data.points} points | ${data.comments} comments | ${data.posted}
  333.                 </div>
  334.             `;
  335.         }
  336.     };
  337.  
  338.     /**
  339.      * HackerNews API Handler
  340.      */
  341.     const HNApi = {
  342.         /**
  343.          * Search for a URL on HackerNews
  344.          * @param {string} normalizedUrl - URL to search for
  345.          */
  346.         checkHackerNews(normalizedUrl) {
  347.             const apiUrl = `${CONFIG.API_URL}?query=${encodeURIComponent(normalizedUrl)}&restrictSearchableAttributes=url`;
  348.             
  349.             GM_xmlhttpRequest({
  350.                 method: 'GET',
  351.                 url: apiUrl,
  352.                 onload: (response) => this.handleApiResponse(response, normalizedUrl),
  353.                 onerror: (error) => {
  354.                     console.error('Error fetching from HN API:', error);
  355.                     UI.updateFloatingElement(null);
  356.                 }
  357.             });
  358.         },
  359.  
  360.         /**
  361.          * Handle the API response
  362.          * @param {Object} response - API response
  363.          * @param {string} normalizedUrl - Original normalized URL
  364.          */
  365.         handleApiResponse(response, normalizedUrl) {
  366.             try {
  367.                 const data = JSON.parse(response.responseText);
  368.                 const matchingHits = data.hits.filter(hit => URLUtils.urlsMatch(hit.url, normalizedUrl));
  369.                 
  370.                 if (matchingHits.length === 0) {
  371.                     console.log('🔍 URL not found on Hacker News');
  372.                     UI.updateFloatingElement(null);
  373.                     return;
  374.                 }
  375.  
  376.                 const topHit = matchingHits.sort((a, b) => (b.points || 0) - (a.points || 0))[0];
  377.                 const result = {
  378.                     title: topHit.title,
  379.                     points: topHit.points || 0,
  380.                     comments: topHit.num_comments || 0,
  381.                     link: `https://news.ycombinator.com/item?id=${topHit.objectID}`,
  382.                     posted: new Date(topHit.created_at).toLocaleDateString()
  383.                 };
  384.  
  385.                 console.log('📰 Found on Hacker News:', result);
  386.                 UI.updateFloatingElement(result);
  387.             } catch (e) {
  388.                 console.error('Error parsing HN API response:', e);
  389.                 UI.updateFloatingElement(null);
  390.             }
  391.         }
  392.     };
  393.  
  394.     /**
  395.      * Initialize the script
  396.      */
  397.     function init() {
  398.         const currentUrl = window.location.href;
  399.         
  400.         if (URLUtils.shouldIgnoreUrl(currentUrl)) {
  401.             return;
  402.         }
  403.  
  404.         GM_addStyle(STYLES);
  405.         const normalizedUrl = URLUtils.normalizeUrl(currentUrl);
  406.         console.log('🔗 Normalized URL:', normalizedUrl);
  407.         
  408.         UI.createFloatingElement();
  409.         HNApi.checkHackerNews(normalizedUrl);
  410.     }
  411.  
  412.     // Start the script
  413.     init();
  414. })();