QQ浏览器中强悍的翻译插件

好久没有接触 CSS 的东西,今天在群里看到有朋友问了一个问题,说:

最近是不是浏览器更新了什么,我突然发现好多列表前端的小圆点都不见了,而且不是一个网站出现这种情况,应该是浏览器干的哇。

当时看到这个的时候,脑海中第一个反应是这不科学啊。于是好奇的沟通了解了一下,最终还是在好奇心驱动下排查了一下,发现了在 QQ 浏览器中一个很强(liu)悍(mang)的插件。

当时在群里,描述问题场景的时候,提到了:

上面是极速模式(Chrominum63)的效果

这个是IE11的效果

附带效果图,发现的确可以看到列表前面的小点点不见了。所以,我也以为 Chrome 也会这样,于是赶紧打开看看有没有最新版的更新,结果没有。就打开 Chrome Canary 看一下,并没发现问题。

这是更不科学了啊。最后再一聊一问,发现是 Windows 下的 QQ 浏览器。好吧,长时间不打开的虚拟机又一次启动了,顺便去下载了 QQ 浏览器。群里说版本是ver 10.1,不过我下载的时候是10.2,当时真担心无法重现问题。

担心归担心,还是要试一下,就直接在 jsbin 网站里作测试,结果……真的没发现问题。

难道真的跟版本有关系么?再次沟通了解,想着能不能去下载到10.1版本的浏览器。就从源代码里着手去看看下载的链接地址,结果发现地址并没有带各种小版本的下载,只有一个 url。不过意外发现有一个 beta 版。

心想这个 beta 版总归会有不同的吧,不管了,两个都下载,先用 beta 版试试。

然后真的在极速模式下发现问题了。顺便看到 继承的样式里有 ,那么在列表前面没有圆点点,这不就是很正常的事情了么。

再仔细看看开发者工具里,有一个injected styles

嗯?这是什么鬼!谁注入的?我这个是一个干净的页面,并没有其他东西啊,为什么会有东西注入呢?难道代码里有问题?

找了一圈,并没有在代码里发现东西,从网络请求中也没有看到额外的一些请求。那么这样的话,能注入代码的也就是扩展插件了(毕竟我在 Chrome 里把一些网站的样式通过Stylish去修改)。

有了这个想法就简单多了,一个个排除就是了。默认安装后,会有 6 个扩展在列表里。最后排查到翻译的这个插件,哈哈,终于找到源头了。

赶紧跑群里嘚瑟一下,顺便再沟通。最后想到前面没发现问题,是因为我一边写代码,一边看效果的时候,是有 存在的,而这个翻译扩展没办法影响到 iframe 里的样式(我猜),所以,前面测试的时候没问题;后来单独一个效果页面的时候,并没有嵌入在 中,那么就被影响了。

录制一下 gif,大概就是这样了。

最后的猜测

个人觉得这个是这个翻译扩展的一个 bug,而且仅仅是因为在 CSS 选择符中不小心多加了一个 符号而已。因为目前看到的选择符是 ,这样的话,相当于是选择两个东西,尤其是那个 ,选择的范围也太广了吧。

按照以往写页面的经验来看,这里的选择符应该是 ,控制 这个类名下的 列表元素。

反正无论怎么样,我不觉得浏览器会去考虑把用了那么多年的 给设置为 。如果真的这样设置,那么就太反人类了吧。

题图来自 QQ 浏览器官方网站:https://browser.qq.com/#extension

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180719G1MKZN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券