Greasy Fork

Greasy Fork is available in English.

Wikipedia preview

Shows previews for Wikipedia links inline

当前为 2020-02-04 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Wikipedia preview
// @description Shows previews for Wikipedia links inline
// @version     1
// @grant       none
// @namespace http://greasyfork.icu/users/223733
// ==/UserScript==

const regex = /^https?:\/\/(?:[a-z]+\.)wikipedia.org\/wiki\/(.+)/;
const apiReqBase = "https://en.wikipedia.org/api/rest_v1/page/summary/";

function attachToLink(link) {
  let timeout, mouseX, mouseY;
  link.addEventListener("mousemove", e => {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });
	link.addEventListener("mouseover", () => {
  	timeout = setTimeout(function() {
    	const fn = async () => {
        const urlName = regex.exec(link.href)[1];
        const data = await fetch(apiReqBase + urlName).then(req => req.json());

        const container = document.createElement("a");
        container.href = data.content_urls.desktop.page;
        container.style.display = "block";
        container.style.position = "absolute";
        container.style.top = (mouseY - 10) + "px";
        container.style.left = (mouseX - 10) + "px";
        container.style.background = "white";
        container.style.borderRadius = "10px";	
        container.style.boxShadow = "0 0 3px 0 #0007";
        container.style.overflowX = "hidden";
        container.style.overflowY = "auto";
        container.style.textDecoration = "none";
        container.style.width = "30vw";

        const title = document.createElement("h3");
        title.textContent = data.title;
        title.style.fontFamily = "sans-serif";
        title.style.fontWeight = "bold";
        title.style.fontSize = "1.3em";
        title.style.color = "black";
        title.style.padding = "1em 1.3em";
        title.style.borderBottom = "1px solid black";

        const image = document.createElement("img");
        image.src = data.originalimage && data.originalimage.source;
        image.style.width = "30vw";
        image.style.borderBottom = "1px solid grey";

        const text = document.createElement("div");
        text.innerHTML = data.extract_html;
        text.style.color = "black";
        text.style.fontFamily = "sans-serif";
        text.style.padding = "1em 1.3em";

        container.appendChild(title);
        if (data.originalimage) container.appendChild(image);
        container.appendChild(text);
        console.log("insert");
        document.body.appendChild(container);

        container.addEventListener("mouseout", () => {
          container.remove();
        });
      };
      
      fn().catch(console.error);
    }, 200);
  });
  link.addEventListener("mouseout", () => clearInterval(timeout));
}

window.addEventListener("DOMContentLoaded", () => {
	Array.from(document.querySelectorAll("a"))
    .filter(el => regex.test(el.href))
  	.forEach(attachToLink);
});

const mutationObserver = new MutationObserver(list => {
	Array.from(list)
  	.filter(el => regex.test(el.href))
  	.forEach(attachToLink);
});

mutationObserver.observe(document.body, {attributes: true, childList: true, subtree: true});