首先使用 document.createElement 创建好你想插入的元素，例如按钮，就 document.createElement("button")，如果你有很多组件想放进去的话可以用 document.createElement("div")，然后往element里的innerHTML直接写html代码；
然后找到你想插入的位置，使用 append/insertBefore之类的方法插入你的element.
append，appendChild，prepend，insertBefore，具体方法和区别可以自行百度搜索和查看文档
上面是使用原生javaScript实现的，你也可以使用网页自带的jQuery(如果有的话)；
我们还需要监听我们的元素事件，最常用的就是 click点击事件，点了我们的按钮，让我们的脚本做出一些反应.
let btn=document.createElement("button");
btn.innerHTML="按钮文字，其实也可以写html，变成下面的样子(不过谁用按钮来包那么多html标签呢)";//innerText也可以，区别是innerText不会解析html
btn.onclick=function(){
alert("点击了按钮");
}
document.body.append(btn);
如果是一个div，在里面写html自由发挥，可以使用下面的方式；event详细说明:Event
let div=document.createElement("div");
div.innerHTML='<span id="span-1">span1</span><span class="sp">span class</span>';
div.onclick=function(event){
if(event.target.id=="span-1"){
alert("span-1被点击了");
}else if(event.target.className=="sp"){
alert("sp这一类被点了");
}
};
document.body.append(div);
另外再补充一下，上面的onclick可以改写成addEventListener("click")，类似下面这样
div.addEventListener("click", function(ev){
console.log(ev);
});
主要区别：onclick只能绑定一个function，而addEventListener可以绑定多个，这又涉及了前端的内容，大家可以课后补习一下，可以看一下addEventListener的说明.也还有其它的绑定事件的方法，这里就不一一列举了.
对于监听页面上已经有的按钮，推荐用addEventListener，以防onclick将原来的按钮事件覆盖掉(如果按钮也是用onclick的话)，看情况而定.
而且也可以在事件中 return false;使事件不再向上传递.
实战：实现一个b站一键三连的按钮
aid是我们的视频id，csrf的在cookie里面，这里就暂时不细说了，因为我们就是在bilibili的页面上，所以我们不需要使用GM跨域(所以我的grant是none，不需要沙盒环境，另外用unsafeWindow也挺麻烦的)，而且也可以直接通过cookie取到csrf，直接用xhr请求接口就行了；代码如下:
// ==UserScript==
// @name bilibili三连按钮demo
// @namespace https://A.cn/
// @version 0.1
// @description 给bilibili增加一个真三连按钮
// @author W
// @match https://www.bilibili.com/video/*
// @grant none
// @run-at document-end
// ==/UserScript==
let triple=document.createElement("button");
triple.innerText="三连";
triple.style.background="#757575";//颜色弄得差不多吧
triple.style.color="#fff";
triple.onclick=function(){
//三连代码
let httpRequest = new XMLHttpRequest();
httpRequest.open('POST', 'https://api.bilibili.com/x/web-interface/archive/like/triple');
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.withCredentials = true; //设置跨域发送
let aid=window.__INITIAL_STATE__.aid;
let sKey="bili_jct";
// 取csrf代码来自:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie%E4%B8%80%E4%B8%AA%E5%B0%8F%E6%A1%86%E6%9E%B6%EF%BC%9A%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E6%94%AF%E6%8C%81unicode%E7%9A%84cookie%E8%AF%BB%E5%8F%96%E5%86%99%E5%85%A5%E5%99%A8
let csrf=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$")， "$1")) || null;
httpRequest.send('aid='+aid+'&csrf='+csrf);
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = JSON.parse(httpRequest.responseText);
console.log(json);
if(json.code==0){
alert("三连成功!刷新页面可见");
}else{
alert("三连失败/(ㄒoㄒ)/~~");
}
}
};
};
let ops=document.querySelector('#arc_toolbar_report .ops');
//插入三连之后好像会重新生成，不添加就不会重新生成，暂时没弄清什么情况，先这样处理了.
//主要作用是监听ops的修改，等它修改完成之后再插入我们的三连按钮，另外注意run-at是document-end，要等待ops生成之后再监听，不然query返回null会报错
//这个事件会多次调用，但是我们insertBefore插入如果元素存在，只是修改而不会新增
ops.addEventListener("DOMNodeInserted", function(event) {
let share=document.querySelector('.share');
share.parentElement.insertBefore(triple, share);
});
