☰

Any Hackernews Link

Check if current page has been posted to Hacker News

  1. // ==UserScript==
  2. // @name         Any Hackernews Link
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.8
  5. // @description  Check if current page has been posted to Hacker News
  6. // @author       RoCry
  7. // @icon         https://news.ycombinator.com/favicon.ico
  8. // @match        https://*/*
  9. // @exclude      https://news.ycombinator.com/*
  10. // @exclude      https://hn.algolia.com/*
  11. // @exclude      https://*.google.com/*
  12. // @exclude      https://mail.yahoo.com/*
  13. // @exclude      https://outlook.com/*
  14. // @exclude      https://proton.me/*
  15. // @exclude      https://localhost/*
  16. // @exclude      https://127.0.0.1/*
  17. // @exclude      https://192.168.*.*/*
  18. // @exclude      https://10.*.*.*/*
  19. // @exclude      https://172.16.*.*/*
  20. // @exclude      https://web.whatsapp.com/*
  21. // @exclude      https://*.facebook.com/messages/*
  22. // @exclude      https://*.twitter.com/messages/*
  23. // @exclude      https://*.linkedin.com/messaging/*
  24. // @grant        GM_xmlhttpRequest
  25. // @connect      hn.algolia.com
  26. // @grant        GM_addStyle
  27. // @grant        GM_getValue
  28. // @grant        GM_setValue
  29. // @require https://update.gf.qytechs.cn/scripts/524693/1525919/Any%20Hackernews%20Link%20Utils.js
  30. // @license      MIT
  31. // ==/UserScript==
  32.  
  33. (function() {
  34.     'use strict';
  35.  
  36.     // Fallback implementation for Safari
  37.     if (typeof GM_addStyle === 'undefined') {
  38.         window.GM_addStyle = function(css) {
  39.             const style = document.createElement('style');
  40.             style.textContent = css;
  41.             document.head.appendChild(style);
  42.             return style;
  43.         };
  44.     }
  45.  
  46.     // Fallback implementations for GM storage functions
  47.     if (typeof GM_getValue === 'undefined') {
  48.         window.GM_getValue = function(key, defaultValue) {
  49.             const value = localStorage.getItem('GM_' + key);
  50.             return value === null ? defaultValue : JSON.parse(value);
  51.         };
  52.     }
  53.  
  54.     if (typeof GM_setValue === 'undefined') {
  55.         window.GM_setValue = function(key, value) {
  56.             localStorage.setItem('GM_' + key, JSON.stringify(value));
  57.         };
  58.     }
  59.  
  60.     /**
  61.      * Constants
  62.      */
  63.     const POSITIONS = {
  64.         BOTTOM_LEFT: { bottom: '20px', left: '20px', top: 'auto', right: 'auto' },
  65.         BOTTOM_RIGHT: { bottom: '20px', right: '20px', top: 'auto', left: 'auto' },
  66.         TOP_LEFT: { top: '20px', left: '20px', bottom: 'auto', right: 'auto' },
  67.         TOP_RIGHT: { top: '20px', right: '20px', bottom: 'auto', left: 'auto' }
  68.     };
  69.  
  70.     /**
  71.      * Styles
  72.      */
  73.     const STYLES = `
  74.         @keyframes fadeIn {
  75.             0% { opacity: 0; transform: translateY(10px); }
  76.             100% { opacity: 1; transform: translateY(0); }
  77.         }
  78.         @keyframes pulse {
  79.             0% { opacity: 1; }
  80.             50% { opacity: 0.6; }
  81.             100% { opacity: 1; }
  82.         }
  83.         #hn-float {
  84.             position: fixed;
  85.             bottom: 20px;
  86.             left: 20px;
  87.             z-index: 9999;
  88.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  89.             display: flex;
  90.             align-items: center;
  91.             gap: 12px;
  92.             background: rgba(255, 255, 255, 0.98);
  93.             padding: 8px 12px;
  94.             border-radius: 12px;
  95.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  96.             cursor: move;
  97.             user-select: none;
  98.             transition: all 0.2s ease;
  99.             max-width: 50px;
  100.             overflow: hidden;
  101.             opacity: 0.95;
  102.             height: 40px;
  103.             backdrop-filter: blur(8px);
  104.             -webkit-backdrop-filter: blur(8px);
  105.             animation: fadeIn 0.3s ease forwards;
  106.             will-change: transform, max-width, box-shadow;
  107.             color: #111827;
  108.             display: flex;
  109.             align-items: center;
  110.             height: 40px;
  111.             box-sizing: border-box;
  112.         }
  113.         #hn-float:hover {
  114.             max-width: 600px;
  115.             opacity: 1;
  116.             transform: translateY(-2px);
  117.             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  118.         }
  119.         #hn-float .hn-icon {
  120.             min-width: 24px;
  121.             width: 24px;
  122.             height: 24px;
  123.             background: linear-gradient(135deg, #ff6600, #ff7f33);
  124.             color: white;
  125.             display: flex;
  126.             align-items: center;
  127.             justify-content: center;
  128.             font-weight: bold;
  129.             border-radius: 6px;
  130.             flex-shrink: 0;
  131.             position: relative;
  132.             font-size: 13px;
  133.             text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  134.             transition: transform 0.2s ease;
  135.             line-height: 1;
  136.             padding-bottom: 1px;
  137.         }
  138.         #hn-float:hover .hn-icon {
  139.             transform: scale(1.05);
  140.         }
  141.         #hn-float .hn-icon.not-found {
  142.             background: #9ca3af;
  143.         }
  144.         #hn-float .hn-icon.found {
  145.             background: linear-gradient(135deg, #ff6600, #ff7f33);
  146.         }
  147.         #hn-float .hn-icon.loading {
  148.             background: #6b7280;
  149.             animation: pulse 1.5s infinite;
  150.         }
  151.         #hn-float .hn-icon .badge {
  152.             position: absolute;
  153.             top: -4px;
  154.             right: -4px;
  155.             background: linear-gradient(135deg, #3b82f6, #2563eb);
  156.             color: white;
  157.             border-radius: 8px;
  158.             min-width: 14px;
  159.             height: 14px;
  160.             font-size: 10px;
  161.             display: flex;
  162.             align-items: center;
  163.             justify-content: center;
  164.             padding: 0 3px;
  165.             font-weight: 600;
  166.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  167.             border: 1.5px solid white;
  168.         }
  169.         #hn-float .hn-info {
  170.             white-space: nowrap;
  171.             overflow: hidden;
  172.             text-overflow: ellipsis;
  173.             line-height: 1.4;
  174.             font-size: 13px;
  175.             opacity: 0;
  176.             transition: opacity 0.2s ease;
  177.             width: 0;
  178.             flex: 0;
  179.         }
  180.         #hn-float:hover .hn-info {
  181.             opacity: 1;
  182.             width: auto;
  183.             flex: 1;
  184.         }
  185.         #hn-float .hn-info a {
  186.             color: inherit;
  187.             font-weight: 500;
  188.             text-decoration: none;
  189.         }
  190.         #hn-float .hn-info a:hover {
  191.             text-decoration: underline;
  192.         }
  193.         #hn-float .hn-stats {
  194.             color: #6b7280;
  195.             font-size: 12px;
  196.             margin-top: 2px;
  197.         }
  198.         @media (prefers-color-scheme: dark) {
  199.             #hn-float {
  200.                 background: rgba(17, 24, 39, 0.95);
  201.                 color: #e5e7eb;
  202.                 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  203.             }
  204.             #hn-float:hover {
  205.                 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  206.             }
  207.             #hn-float .hn-stats {
  208.                 color: #9ca3af;
  209.             }
  210.             #hn-float .hn-icon .badge {
  211.                 border-color: rgba(17, 24, 39, 0.95);
  212.             }
  213.         }
  214.     `;
  215.  
  216.     /**
  217.      * UI Component
  218.      */
  219.     const UI = {
  220.         /**
  221.          * Create and append the floating element to the page
  222.          * @returns {HTMLElement} - The created element
  223.          */
  224.         createFloatingElement() {
  225.             const div = document.createElement('div');
  226.             div.id = 'hn-float';
  227.             // Create icon element
  228.             const iconDiv = document.createElement('div');
  229.             iconDiv.className = 'hn-icon loading';
  230.             iconDiv.textContent = 'Y';
  231.             
  232.             // Create info element
  233.             const infoDiv = document.createElement('div');
  234.             infoDiv.className = 'hn-info';
  235.             infoDiv.textContent = 'Checking HN...';
  236.             
  237.             // Append children
  238.             div.appendChild(iconDiv);
  239.             div.appendChild(infoDiv);
  240.             document.body.appendChild(div);
  241.  
  242.             // Apply saved position
  243.             const savedPosition = GM_getValue('hnPosition', 'BOTTOM_LEFT');
  244.             this.applyPosition(div, POSITIONS[savedPosition]);
  245.  
  246.             // Add drag functionality
  247.             this.addDragHandlers(div);
  248.  
  249.             return div;
  250.         },
  251.  
  252.         /**
  253.          * Update the floating element with HN data
  254.          * @param {Object|null} data - HN post data or null if not found
  255.          */
  256.         applyPosition(element, position) {
  257.             Object.assign(element.style, position);
  258.         },
  259.  
  260.         getClosestPosition(x, y) {
  261.             const viewportWidth = window.innerWidth;
  262.             const viewportHeight = window.innerHeight;
  263.             const isTop = y < viewportHeight / 2;
  264.             const isLeft = x < viewportWidth / 2;
  265.  
  266.             if (isTop) {
  267.                 return isLeft ? 'TOP_LEFT' : 'TOP_RIGHT';
  268.             } else {
  269.                 return isLeft ? 'BOTTOM_LEFT' : 'BOTTOM_RIGHT';
  270.             }
  271.         },
  272.  
  273.         addDragHandlers(element) {
  274.             let isDragging = false;
  275.             let currentX;
  276.             let currentY;
  277.             let initialX;
  278.             let initialY;
  279.  
  280.             element.addEventListener('mousedown', e => {
  281.                 if (e.target.tagName === 'A') return; // Don't drag when clicking links
  282.                 
  283.                 isDragging = true;
  284.                 element.style.transition = 'none';
  285.                 
  286.                 initialX = e.clientX - element.offsetLeft;
  287.                 initialY = e.clientY - element.offsetTop;
  288.             });
  289.  
  290.             document.addEventListener('mousemove', e => {
  291.                 if (!isDragging) return;
  292.  
  293.                 e.preventDefault();
  294.                 
  295.                 currentX = e.clientX - initialX;
  296.                 currentY = e.clientY - initialY;
  297.  
  298.                 // Keep the element within viewport bounds
  299.                 currentX = Math.max(0, Math.min(currentX, window.innerWidth - element.offsetWidth));
  300.                 currentY = Math.max(0, Math.min(currentY, window.innerHeight - element.offsetHeight));
  301.  
  302.                 element.style.left = `${currentX}px`;
  303.                 element.style.top = `${currentY}px`;
  304.                 element.style.bottom = 'auto';
  305.                 element.style.right = 'auto';
  306.             });
  307.  
  308.             document.addEventListener('mouseup', e => {
  309.                 if (!isDragging) return;
  310.                 
  311.                 isDragging = false;
  312.                 element.style.transition = 'all 0.2s ease';
  313.  
  314.                 const position = this.getClosestPosition(currentX + element.offsetWidth / 2, currentY + element.offsetHeight / 2);
  315.                 this.applyPosition(element, POSITIONS[position]);
  316.                 
  317.                 // Save position
  318.                 GM_setValue('hnPosition', position);
  319.             });
  320.         },
  321.  
  322.         updateFloatingElement(data) {
  323.             const iconDiv = document.querySelector('#hn-float .hn-icon');
  324.             const infoDiv = document.querySelector('#hn-float .hn-info');
  325.             
  326.             iconDiv.classList.remove('loading');
  327.             
  328.             if (!data) {
  329.                 iconDiv.classList.add('not-found');
  330.                 iconDiv.classList.remove('found');
  331.                 iconDiv.textContent = 'Y';
  332.                 infoDiv.textContent = 'Not found on HN';
  333.                 return;
  334.             }
  335.             
  336.             iconDiv.classList.remove('not-found');
  337.             iconDiv.classList.add('found');
  338.             // Clear existing content
  339.             iconDiv.textContent = 'Y';
  340.             
  341.             // Make icon clickable
  342.             iconDiv.style.cursor = 'pointer';
  343.             iconDiv.onclick = (e) => {
  344.                 e.stopPropagation();
  345.                 window.open(data.link, '_blank');
  346.             };
  347.             
  348.             // Add badge if there are comments
  349.             if (data.comments > 0) {
  350.                 const badge = document.createElement('span');
  351.                 badge.className = 'badge';
  352.                 badge.textContent = data.comments > 999 ? '999+' : data.comments.toString();
  353.                 iconDiv.appendChild(badge);
  354.             }
  355.             
  356.             // Clear and rebuild info content
  357.             infoDiv.textContent = '';
  358.             
  359.             const titleDiv = document.createElement('div');
  360.             const titleLink = document.createElement('a');
  361.             titleLink.href = data.link;
  362.             titleLink.target = '_blank';
  363.             titleLink.textContent = data.title;
  364.             titleDiv.appendChild(titleLink);
  365.             
  366.             const statsDiv = document.createElement('div');
  367.             statsDiv.className = 'hn-stats';
  368.             statsDiv.textContent = `${data.points} points | ${data.comments} comments | ${data.posted}`;
  369.             
  370.             infoDiv.appendChild(titleDiv);
  371.             infoDiv.appendChild(statsDiv);
  372.         }
  373.     };
  374.  
  375.     /**
  376.      * Initialize the script
  377.      */
  378.     function init() {
  379.         // Skip if we're in an iframe
  380.         if (window.top !== window.self) {
  381.             console.log('📌 Skipping execution in iframe');
  382.             return;
  383.         }
  384.  
  385.         // Skip if document is hidden (like background tabs or invisible frames)
  386.         if (document.hidden) {
  387.             console.log('📌 Skipping execution in hidden document');
  388.             // Add listener for when the tab becomes visible
  389.             document.addEventListener('visibilitychange', function onVisible() {
  390.                 if (!document.hidden) {
  391.                     init();
  392.                     document.removeEventListener('visibilitychange', onVisible);
  393.                 }
  394.             });
  395.             return;
  396.         }
  397.  
  398.         const currentUrl = window.location.href;
  399.         
  400.         // Check if the floating element already exists
  401.         if (document.getElementById('hn-float')) {
  402.             console.log('📌 HN float already exists, skipping');
  403.             return;
  404.         }
  405.  
  406.         if (URLUtils.shouldIgnoreUrl(currentUrl)) {
  407.             console.log('🚫 Ignored URL:', currentUrl);
  408.             return;
  409.         }
  410.  
  411.         // Check if content is primarily English
  412.         if (!ContentUtils.isEnglishContent()) {
  413.             console.log('🈂️ Non-English content detected, skipping');
  414.             return;
  415.         }
  416.  
  417.         GM_addStyle(STYLES);
  418.         const normalizedUrl = URLUtils.normalizeUrl(currentUrl);
  419.         console.log('🔗 Normalized URL:', normalizedUrl);
  420.         
  421.         UI.createFloatingElement();
  422.         HNApi.checkHackerNews(normalizedUrl, UI.updateFloatingElement);
  423.     }
  424.  
  425.     // Start the script
  426.     init();
  427. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址