如何使用Greasemonkey（或Tampermonkey）覆盖图形？

Question

如何使用Greasemonkey在网站上的特定位置绘制圆圈？

我尝试了这个，但它不起作用：

// ==UserScript==
// @name         test
// @match        stackoverflow.com/

var canv = document.createElement('canvas');
canv.id = 'someId';

var c=document.getElementById("someId");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

Answer 1

该代码的直接问题是.appendChild(canv)用于实际将其添加到页面的地方。

但如果你真的想在某个第三方网站上覆盖一个数字，你需要更多。
你需要：

1. 获取目标“图”（图像或其他节点）的句柄。
2. 创建相同大小的画布并将其添加到页面中。
3. 使用CSS定位步骤1中的目标节点。为了使这部分更容易，我建议将目标节点包装在<div>或<span>中。见下文。
4. 根据需要绘制到画布。

例如，假设目标网页有一些你必须标记的卡哇伊图片：


这是 完整脚本的一种方式 ：

// ==UserScript==
// @name     _Overlay the only image
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// @grant    GM.listValues 
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

var jImg    = $("img");
/*-- Contain the image in a position-relative element so that the canvas can use
    absolute positioning to fly over it.
*/
jImg.wrap (
    $("<span>", {id:"gmWrpSpn", style: "display: inline-block; position: relative;"} )
);
var targW = jImg[0].width,  targH = jImg[0].height;
var jCanvas = $(`<canvas width=${targW} height=${targH}>`).css ( {
    position: "absolute",
    top: 0,
    left: 0
} ).insertAfter (jImg);
var cCntxt          = jCanvas[0].getContext ("2d");
cCntxt.lineWidth    = 7;
cCntxt.strokeStyle  = '#FF8300';
cCntxt.beginPath ();
cCntxt.moveTo ( 30, 170);
cCntxt.lineTo (100,  30);
cCntxt.lineTo (170, 170);
cCntxt.closePath ();
cCntxt.stroke ();
cCntxt.beginPath ();
cCntxt.moveTo (100,  30);
cCntxt.lineTo (100, 170);
cCntxt.stroke ();
cCntxt.beginPath ();
cCntxt.arc (100.5, 127.5855, 42.4145, 0, 2*Math.PI);
cCntxt.stroke ();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Lorem Ipsum <img src="https://i.stack.imgur.com/itbfI.jpg"></p>

运行代码段以查看正在运行的脚本。