使用uBlock Origin将知乎网页版表情显示为纯文字标签

这篇具有很好参考价值的文章主要介绍了使用uBlock Origin将知乎网页版表情显示为纯文字标签。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

知乎表情的实现方式:贴图

知乎的表情事实上是一系列由方括号包裹的关键字标记的图片,和微信聊天中的表情类似。当我们将鼠标移到表情上时,就可以看到图片的alt信息,即表情的关键字:

使用uBlock Origin将知乎网页版表情显示为纯文字标签

阻断图片加载

看起来,要想实现将知乎表情显示为纯文本标签,我们只需要阻断知乎网页对表情包图片的加载即可,那根据HTML语法,图片的alt属性就会显示在页面上,达到了我们的目的。经过F12开发者工具审查页面发现,这些图片和正文中出现的其他图片一样,都是从形如pic[0-9].zhimg.com这样的域名下加载的,而一种明显的区分方法是这些表情图片是固定的png,对应的加载URL直接是https://pic[0-9].zhimg.com/v2-xxxxx.jpg这样的形式,而其他的图片不论格式会有一个额外的source参数,形如...?source=xxxx。因此,我们可以使用uBlock Origin这样的广告拦截插件,基于URL的匹配规则来特异性地阻断这些表情图片的加载。对应需要配置的过滤规则如下:

! 注释使用单个!
! uBlock Origin支持子串或EasyList语法的过滤规则
||pic*.zhimg.com/*.png

然而,这样我们会惊奇地发现,知乎中的表情消失了,但是相应的alt内容没有呈现,这相当于丢失了表情在文中的信息,肯定是不能接受的:

使用uBlock Origin将知乎网页版表情显示为纯文字标签

阻断事件监听器

继续深挖出现问题的HTML段落,我们会注意到如下情况:

使用uBlock Origin将知乎网页版表情显示为纯文字标签

在源代码中,sticker类图片对象被标记为灰色的,说明整体隐藏了,而它们都附有事件监听器,会不会是这些监听器在图片未成功加载时改变了图片的显示行为呢?我们注意到这些监听器的来源是https://unpkg.zhimg.com,而这个域名似乎不承担其他的功能,那就可以大胆地继续配置规则把它们也阻断,观察效果:

! 这次使用子串匹配域名即可
unpkg.zhimg.com

使用uBlock Origin将知乎网页版表情显示为纯文字标签

这样就成功了,说明上述的监听器就是文字标签被隐藏的原因。个人对这种设计不太理解,因为文字标签就是用于在图片加载失败时显示以表示意义的,而不应该被隐藏。不过总之我们已经成功地将知乎表情显示为纯文本标签了。

本文由博客一文多发平台 OpenWrite 发布!文章来源地址https://www.toymoban.com/news/detail-825090.html

到了这里,关于使用uBlock Origin将知乎网页版表情显示为纯文字标签的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用webview打开pdf文档及显示网页内容

    一、微信小程序根据接口返回的pdf链接,在小程序内部浏览pdf内容 需要用到微信小程序的两个api 下载资源到本地 wx.downloadFile wx.openDocument 前一个api下载资源到本地,后一个api打开pdf文档 二、根据网页链接,把网页内容在微信小程序内部显示 需要用到微信小程序的一个标签

    2024年02月09日
    浏览(50)
  • lwip-2.1.3自带的httpd网页服务器使用教程(一)从SD卡读取网页文件并显示

    本教程使用的单片机是STM32F103ZE,有线网口芯片为ENC28J60。 本教程里面的网页由于需要兼容Windows XP系统的IE8浏览器,所以采用HTML 4.01编写,不使用任何前端框架。笔者使用的网页设计软件是Adobe Dreamweaver CS3。 开发板PCB文件是公开的,大家可以拿去打印出来,焊好器件后,就可

    2024年02月15日
    浏览(34)
  • Gurobi使用(一)——操作指南(转自知乎)

    好像还是要学一下Gurobi如何使用的,不然这代码着实有点抽象了 一、入门操作 一般来说,求解一个数学规划模型的时候,通常会按照如下步骤解决问题: 设置变量---addVar()。 更新变量空间---update()。 设定目标函数---setObjective()。 设定约束条件---addConstr()。 执行最优化---optim

    2024年02月09日
    浏览(112)
  • 网页端报错Access to XMLHttpRequest‘*‘from origin ‘*‘ has been blocked by CORS..Access-Control-Allow-Origi

    网页端报错: Access to XMLHttpRequest at \\\'*\\\' from origin \\\'*\\\' has been blocked by CORS policy: Response to preflight request doesn\\\'t pass access control check: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource.   可能的原因是Tomcat被占用, Tomcat需要在MyEclipse中重新部署  

    2024年02月09日
    浏览(35)
  • github想传至远程仓库显示fatal: remote origin already exists. (远程来源已经存在 解决办法)

    参考:https://blog.csdn.net/qq_40428678/article/details/84074207 在当我们输入 git remote add origin https://gitee.com/(github/码云账号)/(github/码云项目名).git 就会报如下的错 fatal: remote origin already exists. 翻译过来就是:致命:远程来源已经存在 此时,我们可以先 git remote -v 查看远程库信息: 可以看

    2024年02月07日
    浏览(57)
  • 多图层绘制方法(使用Origin)

    如下图所述,我们在绘制时经常会遇到在同一张图片里显示多个内容,今天来讲解下如何绘制该类图表。所使用工具为origin. 以《2015-2022年中国隧道建设市场规模统计及预测》的数据为例。在同一个图层内分别显示柱状图和折线图。 打开origin,输入数据,如图,需要区分X和

    2024年02月03日
    浏览(35)
  • android webview 显示灰度网页

    要在WebView中显示网页灰度显示,您可以通过以下步骤操作: 使用的原理两种方式,一种使用画笔,一种是js css注入。都能够实现黑白色灰度网页。 在您的布局文件中添加WebView组件: 在您的Activity或Fragment中,初始化WebView并启用硬件加速: 创建applyGrayscaleFilter()方法,该方法

    2024年02月13日
    浏览(35)
  • Unity中使用TextMeshPro打出Emoji表情

    最近遇到一个需求,在聊天框中支持用户的Emoji输入,查了半天资料没有一个能说清楚的,于是自己研究琢磨了下。 最终效果 最终效果可以在APP输入框中使用系统的输入法输入emoji表情并显示,如下 1.1 准备好emoji素材 找到emoji图片,注意需要是 unicode.png 格式命名的。github上

    2024年01月18日
    浏览(52)
  • (待完善)2023-selenium 实现知乎自动登录(第三方登录/使用cookie自动登录)+指定用户的信息相关搜集(2023.3)

    叠甲:本文写作目的仅为本人学习参考、实现功能为课程实验要求、本文写作过程处于作者对于爬虫技术学习的过程,部分代码编写时水平还不够,出现的错误比较多、部分变量名字又臭又长,水平有限,请各位给我的作业汇报留条活路[拜托],请不要卷我,如果发现有什么

    2023年04月10日
    浏览(44)
  • VUE监听网页关闭和隐藏显示

    1.mounted()中创建页面关闭的监听   2.监听的是页面关闭之前,对应的方法可以写做 3.监听的是页面关闭的时候,这里面可以调用自己的异步处理 4.destroyed()中,注销监听

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包