如何使用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> 

运行代码片段以查看运行中的脚本。