javascript - 如何使用 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)这样的东西。用于实际将其添加到页面。

<小时/>

但如果您确实想在某些第 3 方网站上叠加图形，您需要的不仅仅是这些。
您需要:

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

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

这是使用此完整脚本的一种方法:

// ==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="/image/itbfI.jpg"></p>

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