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

Question

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

我试过了，但没用：

// ==UserScript==
// @name         test
// @match        whosebug.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 方网站上叠加图形，您需要的不止于此。
您需要：

获取目标"figure"（图像或其他节点）的句柄。
创建一个相同大小的 canvas 并将其添加到页面。
使用 CSS 定位到步骤 1 中的目标节点。为了使这部分更容易，我建议将目标节点包裹在 <div> 或 <span>.见下文。
根据需要绘制到 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="https://i.stack.imgur.com/itbfI.jpg"></p>

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

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

How to overlay a figure using Greasemonkey (or Tampermonkey)?

javascript

greasemonkey

overlay

tampermonkey