[油猴脚本开发指南]脚本往页面上添加新元素

本节主要内容

转载自油猴中文网：https://bbs.tampermonkey.net.cn/
李恒道QQ4548212
油猴中文网https://bbs.tampermonkey.net.cn/
TamperMonkey GreaseMonkey 油猴脚本 脚本交流 脚本分享
油猴脚本开发 油猴基础开发 油猴 油猴中文
公众号:叛逆青年旅舍
https://bbs.tampermonkey.net.cn/

介绍使用脚本往前端页面插入按钮或者一个小框框之类的元素.最后弄一个给b站真·一键三连的按钮.(有兴趣也可以写二连,太耗硬币了T T)

感兴趣的朋友可以弄一个评论列表来实战,本来是想在本节中弄的,但是篇幅有限,暂时放弃吧.想的话可以反馈一下,我安排到下一节.

(本来是想再弄一个弹幕列表的页面的,但是感觉难度太高了,不太合适做教程.)

脚本往页面添加新元素

脚本往页面增加新元素这种需求经常可见,例如百度云的脚本,就会往页面上添加一些解析链接之类的按钮,一些助手类型的会往页面上添加一些小窗口,显示脚本的运行状态等等.

如果要让脚本往页面上添加新元素,原理很简单.

首先使用 document.createElement创建好你想插入的元素,例如按钮就 document.createElement("button"),如果你有很多组件想放进去的话可以用 document.createElement("div"),然后往element里的innerHTML直接写html代码.

然后找到你想插入的位置,使用 append/insertBefore之类的方法插入你的element.之后就可以在 F12 开发者工具中的 element中看到我们插入的内容了.

append,appendChild,prepend,insertBefore,具体方法和区别可以自行百度搜索和查看文档(其实是我嫌麻烦,整理一下又可以水一篇了)

像下面的代码