写了一个油猴脚本:获取微信公众号文章封面

简介: 写了一个油猴脚本:获取微信公众号文章封面

趁着不用做其他事情,写了一个很简单的油猴脚本:获取微信公众号文章封面。这个油猴脚本已提交到寻找各类油猴脚本的网站 Greasy Fork,如果你平时也有获取公众号文章封面的需求,可以在浏览器打开下方的链接安装这个脚本:https://greasyfork.org/zh-CN/scripts/452548-%E8%8E%B7%E5%8F%96%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2e4d752aa883ae6e94caca2294fe2db27_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg写这个油猴脚本的想法💡由来已久,只是一直没有付诸行动,会觉得按照之前手动获取封面的方式来写代码很难。但经过下午一点时间的琢磨,还在群里请教了一些朋友,把代码写出来,却发现异常地简单,用下面一行代码,就能搞定我获取公众号文章封面的需求:

window.open(document.querySelector('meta[property="og:image"]').content);

脚本使用方法

「获取微信公众号文章封面」油猴脚本的使用方法:浏览器安装了脚本之后,当你在浏览器打开任意一篇公众号文章,脚本会自动运行——打开一个新的标签页,里面就会显示公众号文章的封面,如下图所示。971f5d61d5beed7c68b16c9ce4025aa3_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg需要说明的是,由于这个油猴脚本包含了一个自动打开新标签页的操作,首次使用时可能会被浏览器误以为是「有害的弹窗」而被拦截。解除拦截的方法:点击浏览器地址栏右侧带有「红色小叉号」的图标,选择「总是允许」就可以啦。

脚本代码的简要介绍

下面简单说一下代码的由来和含义:既然我们的需求是要拿到公众号文章的封面,首要的步骤就是找到文章封面的位置,或者更确切地说是封面图片的链接。按下 F12 打开浏览器开发者工具,分析下面的 HTML 代码,就能在属性名为 og:image 的 meta 标签中找到封面图片的链接,即 content 属性的值,就是封面图片的链接(图床链接)。

259cb56cb117e5dfd1bfffc5f8df97fe_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg


要拿到 content 属性的值,我们可以使用 JavaScript(DOM 操作) 和 CSS 选择器,两者搭配一下,就能拿到 meta 对象中的 content 属性的值:

document.querySelector('meta[property="og:image"]').content;

上面这行代码在浏览器中运行后,只会得到一个 https 开头的图片链接,想要看到最终的文章封面,还需要额外一步操作,在浏览器地址栏打开这个链接,因此我在前面那行代码的基础上,再添加了一个在新标签页中打开链接的指令:

window.open(document.querySelector('meta[property="og:image"]').content);

这样就得到了最终的一行代码。

将代码发布为人人可用的油猴脚本

当然,写完前面的一行代码后,实际上我只能在自己的电脑上使用,而无法很方便地分享给其他人使用,因此,一种更好的方式是,把这行代码发布为人人可安装、可用的油猴脚本。因此,到这里问题就变成了,如何写一个油猴脚本?0238bb0aa30983f1616886ec289eb92a_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg关于如何写一个简单的油猴脚本,可以参考一位 Up 主「不坑老师」发布的视频教程:我发布的油猴脚本,也是参考这位 Up 主的教程制作出来的,这里就不复读了。


写油猴脚本用到的参考资料汇总:


以上,希望有帮助。


相关文章
|
2月前
|
Web App开发 前端开发 程序员
将微信公众号文章同步到阿里云开发者社区
本文介绍了一种通过自己拓展的浏览器插件,便捷地将微信公众号文章同步到阿里云开发者社区的方法。
46 6
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的校篮球联赛微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的校篮球联赛微信小程序附带文章源码部署视频讲解等
56 2
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp二手交易微信小程序的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp二手交易微信小程序的附带文章源码部署视频讲解等
40 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
80 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
43 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
62 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“财来财往”微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“财来财往”微信小程序附带文章源码部署视频讲解等
31 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的网上花店微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的网上花店微信小程序附带文章源码部署视频讲解等
46 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的美食推荐系统的微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的美食推荐系统的微信小程序附带文章源码部署视频讲解等
31 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的智能推荐的校园社区服务微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的智能推荐的校园社区服务微信小程序附带文章源码部署视频讲解等
56 0