鼠标悬浮在话题上，预览话题的部分内容。
使用场景
愚人节防骗
比如标题吸引人点击的
比如以为是教程但却是在求助的
主要流程
为所有可点击的超链接（主要是论文中的话题）创建了监听器，当鼠标悬浮时，通过话题的链接获取话题的内容，并加入到缓存中，最后悬浮显示预览内容。
// ==UserScript==
// @name 论坛话题预览
// @namespace https://linux.do/
// @version 0.2
// @description Preview link content on mouse hover
// @author zheng
// @match https://linux.do/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=linux.do
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function () {
"use strict";
const contentCache = {};
var previewPopup = document.createElement("div");
previewPopup.id = "linkPreviewPopup";
previewPopup.style.display = "none";
previewPopup.style.position = "absolute";
previewPopup.style.background = "#fff";
previewPopup.style.border = "1px solid #ccc";
previewPopup.style.padding = "10px";
previewPopup.style.maxWidth = "300px";
previewPopup.style.boxShadow = "3px 3px 5px rgba(0,0,0,0.3)";
document.body.appendChild(previewPopup);
// Add styles for preview popup
GM_addStyle(`
#linkPreviewPopup {
z-index: 9999999;
}
`);
// Function to fetch preview content
async function getPreviewContent(linkHref) {
try {
if (contentCache[linkHref]) {
console.log("Content found in cache:", contentCache[linkHref]);
return contentCache[linkHref];
}
console.log("linkHref: " + linkHref);
const response = await fetch(linkHref);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const html = await response.text();
// Create a temporary div element to hold the HTML content
const tempDiv = document.createElement("div");
tempDiv.innerHTML = html;
const metaDescription = tempDiv.querySelector('meta[name="description"]');
let descriptionContent = metaDescription ? metaDescription.getAttribute("content") : "";
descriptionContent = descriptionContent.trim();
contentCache[linkHref] = descriptionContent;
console.log("Description content:", descriptionContent);
return descriptionContent;
} catch (error) {
console.error("Error fetching link preview content:", error);
return null;
}
}
// Function to show preview popup
function showPreviewPopup(link, event) {
getPreviewContent(link)
.then((previewContent) => {
if (previewContent) {
console.log("previewContent: " + previewContent);
// Set preview content
previewPopup.innerHTML = previewContent.replace(/<[^>]*>/g, '');
// Position the preview popup
previewPopup.style.top = event.pageY + 30 + "px";
previewPopup.style.left = event.pageX + 10 + "px";
// Show the preview popup
previewPopup.style.display = "block";
}
})
.catch((error) => {
console.error("Error fetching link preview content:", error);
});
}
function hidePreviewPopup() {
previewPopup.style.display = "none";
}
$(document).on('mouseenter', 'a', function(event) {
var target = $(event.target).closest('a');
var url = target.attr('href');
console.log("URL: " + url);
console.log("Mouse enter");
showPreviewPopup(url, event);
});
$(document).on('mouseout', 'a', function() {
console.log("Mouse out");
hidePreviewPopup();
});
})();
