油猴脚本怎么编写代码?(小白入门指南轻松学会)

今天突然想搞个油猴脚本玩玩,主要是老刷网页广告太烦人了。之前看别人用油猴去广告特别爽,想着自己动手试试。

第一步:瞎装环境

听说这玩意儿得先装个浏览器插件。直接打开浏览器搜Tampermonkey,结果跳出来十来个版本,什么Chrome版、Firefox版、Edge版,看得我眼晕。闭着眼睛点了个绿色下载按钮,装完才发现下的是测试版。

  • 打开浏览器插件商店
  • 搜Tampermonkey看到个黑猴子图标
  • 安装时候跳提示说"它能改你所有网站数据"手抖了一下
  • 硬着头皮点继续安装

第二步:乱建脚本

装完猴子图标在右上角亮了。点它选"创建新脚本",唰地弹出来个代码框。我哪会写代码?照着网上抄了段:

// ==UserScript==

// @name 我的处女作

// @namespace */

// @version 0.1

// @description 试试就逝世

// @author 我

// @match :///

// @grant none

// ==/UserScript==

这段抄得心里发虚,尤其看到@match那行带星号,老怀疑会不会把电脑搞炸。

第三步:硬写功能

想去掉网页广告,搜教程说要找广告的HTML标签。按F12打开开发者工具,满屏花花绿绿的代码看得我头皮发麻。

  • 用鼠标在网页广告上右键点"检查"
  • 看到开发者工具里自动选中一坨
  • 在油猴脚本里加了行:*('.ad').remove()
  • 像发现新大陆似的狂点保存

结果刷新网页直接报错:"Cannot read properties of null",意思是没找到广告。这才发现有的网站广告名字不叫ad。

第四步:半夜抓狂

熬到凌晨两点改脚本。发现去掉广告后网页空出一大块,得把底下内容顶上去:

  • 瞎写css样式:margin-top: -100px !important;
  • 用!important暴力覆盖原网页样式
  • 循环用setTimeout强行延迟执行
  • 实在搞不定就alert('检测到广告!') 手动点掉

成了!

虽然写得稀烂但还真管用。分享下小白经验:

  1. 装Tampermonkey挑正式版别学我
  2. 不会写就先抄@match和@grant这部分
  3. 删元素前用if判断是否存在
  4. 多写*('到这里了')看哪步出错

现在我看视频网站就像进澡堂子——广告挡板全给拆了。感觉自己是钢铁侠配贾维斯,就一用老虎钳修自行车的老大爷。

这玩意儿最难的是查元素,有的网站广告藏得比私房钱还深,一个广告套七八层壳。后来索性不搞通用版了,单独给常逛的五个网站写死五套脚本。维护起来血压飙升,昨天更新后某个广告突然改成svg格式,我的脚本当场罢工,气得我直接改host屏蔽整个网站算了。

真心建议:油猴入门确实简单,但想写靠谱脚本还不如学正儿八经前端。我这破脚本现在装了二十个网站规则,运行起来像老牛拉破车,每次开网页风扇都像要起飞。下次准备直接装别人写好的现成品——,那不就违背自己做脚本的初心了吗?真是活该折腾!