油猴子从入门到喵喵喵喵（实例：9/9 完结）

大家的板块 稻米鼠的频道🐹
26

示例一：获取 B 站视频封面

需求分析：首先在视频列表页复制封面的图片地址，然后进入这个视频的页面，在源码中去搜索这个地址的关键词（就是文件名）。这个操作本身是碰运气，然后发现他把封面图片的地址清晰的写在了网页的头信息中。

<meta data-vue-meta="true" itemprop="image" content="http://i1.hdslb.com/bfs/archive/8ec1b95254e0e67cacad1191e918e66e06fabcbf.jpg">

这个问题就变得非常简单了，只需要获取网页中特定元素的特定属性即可。

那么下一个问题就是获取到的这个地址，如何输出出来。我选择的方法是直接将当前页面的网址修改为这个图片地址，因为这样最简单，而且图片直接显示出来了，如果是在手机上长按图片就可以进行分享。

接下来的问题是如何触发。如果这个功能在网页打开之后就立刻执行，得到的结果是打开一个视频页面，结果显示出来的是它的封面图。（那我以后还怎么摸鱼呀！！！

所以我选择给这个脚本添加了一个菜单，当点击这个菜单的时候才执行这个动作。

好了，问题分析完了，下面来看代码比解释少系列：

// ==UserScript==
// @name        获取 B 站视频封面
// @namespace   Get bilibili video cover
// @match       *://www.bilibili.com/video/*
// @match       *://m.bilibili.com/video/*
// @grant       GM_registerMenuCommand
// @version     1.0
// @author      -
// @description 2020/7/15 上午7:27:34 
// ==/UserScript==

GM_registerMenuCommand('获取此视频封面', ()=>{
  window.location.href = document.querySelector('meta[itemprop="image"]').getAttribute('content')
})

代码中相比我讲到的知识有两处超纲：

  • 这个选择器是稍微复杂一点的属性选择器
  • 这个元素的 content 属性似乎无法直接获得，于是用了 getAttribute 方法

但在操作思路上没有超纲的地方