整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

程序员凭一己之力自研浏览器,挑战Chrome:Git

程序员凭一己之力自研浏览器,挑战Chrome:GitHub联合创始人力挺,投百万美元支持!

许多人说,开发一款新浏览器是不可能的,因为你永远无法取代 Google Chrome。其实,你不必想着取代 Google Chrome 才能产生影响力——Firefox 就是一个证明。Firefox 从未成为最流行的浏览器,但它对每一款流行起来的浏览器都产生了重大影响,使得 Web 世界变得更好了。”

整理 | 屠敏
出品 | CSDN(ID:CSDNnews)

这两天,国外社交媒体平台 HN 上有个浏览器迅速走红,成为众人关注的焦点。

这款由资深开发者 Andreas Kling 构建的 Ladybird 浏览器,主打一个完全独立,声称不会从任何现有的浏览器代码中进行复制,研发了基于 Web 标准的全新引擎。与此同时,Andreas Kling 透露,和现在一使用广告就“满天飞”的浏览器不同,Ladybird 另一大特点就是保持非营利运营,仅接受项目捐赠而不是开放广告位来维持运转。

如今,这一项目受到了 GitHub 创始人兼前 CEO Chris Wanstrath 的青睐,其个人甚至出资 100 万美元来支持 Ladybird 的开发,希望这款完全从头编写的 Ladybird 加入浏览器战局,能够有所作为。


从自研操作系统到主攻研发浏览器

对于 Ladybird 创始人 Andreas Kling,我们此前也做过报道。他曾任职于苹果(2011-2017 年)、诺基亚(2009-2011 年)等大厂,主要负责基于 WebKit 的 Web 浏览器开发工作,非常擅长使用 C++。“现在的你,很有可能正在使用一个因为我而速度稍快的浏览器阅读本文”,他在博客介绍页写道。

不过,遗憾的是,从苹果离职后不久的 Andreas Kling 误入歧途,直到 2018 年 10 月,他从当地一家戒毒所完成了为期 3 个月的康复计划。

出来之后,Andreas Kling 失业了。他与家人住在一起,无所事事。由于没有药物或其他恶习可以打发时间,他觉得日子太过漫长了。

「我需要一些东西来打发空闲时间,同时学习如何过上正常的生活,而事实证明,构建一个新的操作系统是一项恰到好处的任务」,Andreas Kling 由此开发一款名为 SerenityOS(“宁静”操作系统)操作系统,将其作为自己的全职工作,并通过接受捐款、SerenityOS 商品销售和 YouTube 分享视频而获得收入来维持这项开发工作。

为了增强系统的完善性,Andreas Kling 还于 2022 年首次推出了 Ladybird 项目。起初该项目是作为 SerenityOS 系统的 LibWeb 和 LibJS 浏览器引擎调试工具,相当一个 HTML 查看器,它可以让人们可以更轻松地在 Linux 上工作。而后在不断开发尝试中,Andreas Kling 将该项目定位为一款“跨平台浏览器”。

今年 6 月 3 日,Andreas Kling 宣布将离开自己一手创建的 SerenityOS 操作系统项目,然后将精力全部放到这款 Ladybird 浏览器研发上。



打造一款独一无二的浏览器

之所以要开发这款浏览器,简单来看,该团队是看不惯如今被各种广告缠身的 Chrome、Edge、Brave 等浏览器。

此次出资百万来支持 Ladybird 开发的背后金主 GitHub 创始人兼前 CEO Chris Wanstrath 对此解释道:

“事实上,正是开源、开放标准和良性竞争将网络从 2000 年代的黑暗时代拉回到 2010 年代的创新大潮中,当时,深受 Firefox 浏览器影响的谷歌 Chrome 浏览器开始获得主流动力。

如今,每个主要的浏览器引擎都是开源的,这固然很好,但仍有一个问题:它们都由 Google 的广告帝国提供资金。Chrome、Edge、Brave、Arc 和 Opera 都使用 Google 的 Chromium。苹果公司获得了数十亿美元的资助,让 Google 成为 Safari 的默认搜索引擎,Firefox 浏览器也有类似的协议,每年获得数亿美元的资助。

Web 太重要了,以至于不能只有一个主要的资金来源,而这个资金来源又太重要了,以至于不能只有广告。

所以,我们需要一个新的浏览器。

为了迫切改变现状,Ladybird 浏览器创始人 Andreas Kling 和 Chris Wanstrath 二人合作创建了一个名为“Ladybird 浏览器计划”(Ladybird Browser Initiative)的美国非营利性组织,旨在推动浏览器的开发,并使各种规模的支持者更容易赞助开发。

同时,正如文章伊始所述,Ladybird 在开发运营时主打了三个独一无二的特性,即:

  • 构建一款真正独立的 Web 浏览器。基于 Web 标准的全新引擎,不借用其他浏览器的任何代码。

  • 整个组织只有一个目标,就是开发 Ladybird 浏览器。

  • 不追逐营收:永远不会存在“默认搜索交易”、加密代币或其他任何形式的用户货币化。

现实来看,没有资金收入,不将用户视为待售产品的浏览器,Ladybird 究竟要如何先度过生存这一关卡?

Andreas Kling 在官方公告中写道,与依赖用户盈利的传统商业模式不同,Ladybird 的资金完全来自关心开放网络的公司和个人的赞助和捐赠。我们的非营利组织不会在无限制捐赠之外寻求企业交易或收入。该软件及其源代码将永远免费提供。

尽管很多人很容易将“通过捐款资助网络浏览器”的想法视为无法实现的异想天开的目标,但 Ladybird 其实已经获得了初步的成功,除了 GitHub 创始人兼前 CEO Chris Wanstrath 捐赠 100 万美元之外,早在一年前,在其所有代码全都托管在 GitHub 上时(https://github.com/LadybirdBrowser/ladybird),也引起不少组织和开发者的关注,包括加拿大的一家跨国电子商务公司 Shopify 就赞助了 10 万美元。


Ladybird 当前的开发进度

截至目前,Ladybird 的主要开发力量是 Andreas Kling 一个人,随着 Chris Wanstrath 的资金赞助,也即将会有三名全职开发者加入该项目。不过,Ladybird 仍处于早期开发阶段("pre-alpha")。

Andreas Kling 表示,浏览器和库都是用 C++ 编写的,并根据 BSD-2 许可证授权。它目前可以支持 Linux、macOS 和其他类 Unix 系统,也可以通过 Windows Subsystem for Linux (WSL) version 2 在 Windows 上运行。

根据 GitHub 介绍,Ladybird 许多核心库支持组件都是从 SerenityOS 继承而来的,主要技术栈包括:

  • Ladybird:选项卡式浏览器 GUI 应用程序

  • LibWeb:Web 引擎,多种标准:HTML、DOM、CSS、SVG……

  • LibJS:ECMAScript 语言、运行时库、垃圾收集器

  • LibGfx:2D 图形、文本渲染、图像格式(PNG、JPG、GIF 等)

  • LibRegex:正则表达式引擎

  • LibXML:XML 解析器

  • LibWasm:WebAssembly 解析器和解释器

  • LibUnicode:Unicode 支持库

  • LibTextCodec:文本编码转换库

  • LibMarkdown:Markdown 解析器

  • LibCore:其他支持功能(I/O、日期时间、MIME 数据……)

  • Qt:跨平台 GUI 和网络

采用多进程的浏览器架构图如下:

当前 Ladybird 浏览器的功能还比较少,拥有 URL/搜索栏、重新加载、标签页、内容放大/缩小、截图以及前后导航功能。但它没有书签、历史显示、扩展、密码管理、打印,甚至没有保存图片的功能,似乎还不支持 WebRTC。

不过,Ladybird 确实为开发者提供了一些工具,例如文档对象模型 (DOM) 树和可访问性树的检查器,以及创建各种内容转储的能力:DOM 树和布局树、计算样式等。它还具有伪装浏览器发送的用户代理 (User-Agent) 字符串的功能,使测试人员能够尝试绕过那些拒绝与“未知”浏览器配合工作的网站。

值得注意的是,该项目当前没有为任何平台提供二进制文件。感兴趣的用户需要获取源代码(https://github.com/LadybirdBrowser/ladybird),并按照说明进行构建。用户需要 GCC 13+ 或 Clang 17 以及 Qt6 开发包才能在自己的设备上运行。


随着 Ladybird 官宣成立非营利组织,越来越多的开发者持以期待。

一位名为 Jack Kelly 评价道:

开放的网络需要一个由多个相互竞争的浏览器组成的健康生态系统,每个浏览器都有足够的市场份额,没有任何一家厂商能实际控制网络标准。20 世纪 90 年代,火狐浏览器(Firefox)打破了微软 Internet Explorer(IE)浏览器的霸主地位,这就是我们曾经拥有的世界。在整个 20 世纪 90 年代末和 21 世纪初,IE 对互联网标准的不力支持阻碍了网络开发,而 Firefox 的竞争让开发者可以 “为 Web”而不是“为 IE6”开发,从而迫使浏览器供应商迎头赶上。

不幸的是,我们又回到了一个没有良性浏览器竞争的世界。Statcounter.com 声称,谷歌浏览器 Chrome 的市场份额超过 65%。加上 Edge(使用了开源的 Chromium 引擎),市场份额已超过 70%。这种市场主导地位使谷歌能够推动各种变革,比如针对浏览器扩展的“Manifest V3”格式,巧合的是,这种格式会削弱广告拦截器。

一个健康的浏览器生态系统本可以大力反对那些夺走用户控制权的功能。相反,Mozilla 却为了维持火狐浏览器的市场份额而屈服,甚至连这一点都没有做到。

Mozilla 已经陷入了非常不利的境地。近年来,Mozilla 公司为了追求收入,做出了一些有争议的举动。在我的印象中,有自动加载到人们浏览器中为电视节目做广告的“Mr Robot”插件;地址栏中的赞助商链接;“新标签”页面上的赞助商“热门网站”;一个名为“Pocket”的阅读列表启动程序,在没有任何警告的情况下集成到火狐浏览器中;以及一个带有浏览器弹出广告的 Mozilla VPN 服务。Cal Paterson 列出了另一份不错的清单。与此同时,火狐浏览器的市场份额下降,即将离任的 Mozilla 公司首席执行官获得了数百万美元的薪酬(2022 年为 690 万美元)。

Ladybird 曾是 SerenityOS 的网络浏览器。大约一个月前,他将 Ladybird 分叉为一个单独的项目并离开了 SerenityOS 。他们非常坦诚地承认该浏览器尚未完成——第一个 alpha 版本计划于 2026 年发布。但他们有正在运行的代码,我实际上可以帮助资助他们。

也有开发者 Joe Brockmeier 实测发现:

Ladybird 在 Fedora 40 等平台上的编译和运行没有问题,但距离适合常规使用还有很长的路要走。

此外,Ladybird 对 GitHub 和许多其他网站的呈现都很好,尽管速度很慢。不过,使用 Ladybird 无法登录 Discord。它在渲染网页方面做得还不错,但速度和稳定性仍有欠缺。

每个 Ladybird 标签都有自己的渲染进程,作为一项安全措施,该进程被置于沙盒之中,以防止任何恶意网页影响系统的其他部分。不过,这似乎并不足以防止单个页面导致浏览器完全崩溃。对于一个仍被视为预开发阶段的项目来说,这也在意料之中。

只能说,Ladybird 还没有准备好成为主流应用,但它确实显示出了潜力。在过去的一个月里,该项目已经获得了来自 49 位作者的 880 多次提交。如果该项目能保持这样的势头,或者更上一层楼,那么用不了多久,它就能成为主流浏览器的可用替代品。

X 平台上 boris1993 用户认为:

所有引擎都重写……这工作量不是一般的大吧…… 而且,就算是引擎完全符合规范,如果不能给用户带来差别体验(Chrome显示不正常但是它显示正常),那我感觉很难作为卖点,更不提其他浏览器的周边生态,同步账号之类的

不过,这大哥也是个狠人,靠写代码来戒毒……

当然还是预祝成功

对此,Andreas Kling 坦然表示,「我们已经可以使用 Ladybird 进行一些日常浏览,例如管理 GitHub 问题和拉取请求,以及在 Hacker News 上发表评论。由于我们的贡献者社区正在积极修复错误并添加功能,该浏览器每天都在改进。

但它还远远没有完成。我们想把 Ladybird 变成一款你可以每天用来处理所有与网络相关的任务的浏览器。它应该快速、稳定、支持网络标准并保护你的隐私。一款属于你的浏览器。」

按照预期,该组织可能会在 2026 年某个时候推出功能齐全的 Ladybird 浏览器“Alpha”版本,期待会有不一样的浏览器落地。

来源:

https://ladybird.org/announcement/

https://ladybird.org/why-ladybird/

http://jackkelly.name/blog/archives/2024/07/06/im_funding_ladybird_because_i_cant_fund_firefox/

https://lwn.net/Articles/976822/

https://lunduke.locals.com/post/5812560/ladybird-web-browser-becomes-a-non-profit-with-1-million-from-github-founder

https://x.com/LuoSays/status/1808289887348838504

大模型刷新一切,让我们有着诸多的迷茫,AI 这股热潮究竟会推着我们走向何方?面对时不时一夜变天,焦虑感油然而生,开发者怎么能够更快、更系统地拥抱大模型?《新程序员 007》以「大模型时代,开发者的成长指南」为核心,希望拨开层层迷雾,让开发者定下心地看到及拥抱未来。

读过本书的开发者这样感慨道:“让我惊喜的是,中国还有这种高质量、贴近开发者的杂志,我感到非常激动。最吸引我的是里面有很多人对 AI 的看法和经验和一些采访的内容,这些内容既真实又有价值。”

之前在搭建jumpserver的时候有用到了Guacamole,但是没有对Guacamole做一个详细的介绍,刚好在网上看到一篇Guacamole官方手册的翻译,所以整理了一些相关内容,下面介绍一下Guacamole的具体实现和架构。


Guacamole

Guacamole 是一个基于 HTML 5 和 JavaScript 的 VNC 查看器,服务端基于 Java 的 VNC-to-XML 代理开发。要求浏览器支持 HTML 5。目前该项目是 Apache 基金会的孵化项目。

该项目包含三个组件,分别是:

  • apache/incubator-guacamole-server
  • apache/incubator-guacamole-client
  • apache/incubator-guacamole-website

Guacamole 是无客户端的远程桌面网关,Guacamole 支持标准协议,比如 VNC 和 RDP。

Guacamole 不要求任何插件和客户端软件。

Guacamole 是提供远程桌面的解决方案的开源项目,通过浏览器就能操作虚拟机,适用于Chrome,Firefox,IE10等浏览器(浏览器需要支持HTML5)。 由于使用 HTML5,Guancamole 只要在一个服务器安装成功,你访问你的桌面就是访问一个 web 浏览器。


Guacamole的介绍以及架构

Guacamole不是一个独立的Web应用程序,而是由许多部件组成的。Web应用程序实际上是整个项目里最小最轻量的,大部分的功能依靠Guacamole的底层组件来完成。

用户通过浏览器连接到Guacamole的服务端。Guacamole的客户端是用javascript编写的,Guacamole server通过web容器(比如tomcat)把服务提供给用户。一旦加载,客户端通过http承载着Guacamole自己的定义的协议与服务端通信。

部署在Guacamole server这边的Web应用程序,解析到的Guacamole protocal,就传给Guacamole的代理guacd,这个代理(guacd)实际上就是解析Guacamole protocal,替用户连接到远程机器。

Guacamole protocal协议本身以及guacd的存在,实现了协议的透明:Guacamole客户端(浏览器运行的js)和Web应用程序,都不需要知道远程桌面具体用哪个协议(VNC,RDP etc)


Guacamole protocal协议

Web应用程序是不知道任何远程桌面协议。应用程序不包含支持VNC,RDP等其他协议的Guacamole模块。应用程序只需要理解 Guacamole protocal协议,这个协议支持显示渲染和消息传输。尽管Guacamole protocal的这些功能与一个远程桌面协议类似,不过远程桌面协议和Guacamole protocal背后的设计原则是不一样的:Guacamole protocal并不是为了实现一个特定的桌面环境的远程功能。

Guacamole protocal作为一个远程显示和交互协议,实现了现有的远程桌面协议的超集(superset)。为了让Guacamole支持一个新的远程桌面协议 (比如RDP),需要写一个中间层(middle layer)来实现Guacamole protocal和这个新协议的转换。实现这样的转换机制和本地客户端远程访问桌面的实现没什么区别,唯一的不同是这个转换是要渲染远程的显示器(浏览 器),而不是本地客户端(比如real vnc)。

而实现这个协议互相转换的中间层就是guacd。


guacd

guacd是Guacamole的“心脏”,插件式的动态支持远程桌面协议,根据Web应用程序发来的指令连接到远程桌面。

guacd是和Guzcamole一起被安装到机器的,以驻留后台进程形式提供代理服务,接收来自Web应用程序的Tcp连接。guacd同样也不 知道具体的远程桌面协议,它只是需要决定加载那个插件并且传送特定的参数给插件。(这个插件就是用来解析具体远程桌面协议的)一旦这个插件被加载,插件就 独立于guacd运行,对Web应用程序和自己之间的会话(conmunication)具有绝对的控制权,直到插件被关闭。


Web应用程序

在Guacamole中与用户打交道的就是Web应用程序。

之前说过,Web应用程序自己不实现任何的远程桌面协议。Web应用程序依赖guacd,只关心优美的界面以及权限认证。

Web应用程序用Java语言编写,对,只要你愿意,完全可以用其他语言实现。因为,事实上,Guacamole被设计成API,我们鼓励开发者使用API开发自己的应用。


RealMint

说到Guacamole,一般是指一个远程桌面的网关,但是也不完全是这样。起初,Guacamole用javascript写了一个纯文本的Telnet客户端叫做:RealMint(RealMint是一个终端的名字)。这个项目主要是写了个示范程序,目的希望它能有用,它一度声名鹊起是因为RealMint是只用javascript写的。

RealMint的隧道是用PHP写的。跟Guacamole的HTTP的隧道相比,RealMint的隧道用的是简单的长轮询技术,比较低效。RealMint有一个比较像样的键盘实现是保存至今,被应用到Guacamole的键盘部分的代码,也许这就是RealMint唯一保留下来的功能和特性。

鉴于RealMint只是实现了一个古老的协议(telnet),业界内还有几个其他的比较成熟稳定的javascript客户端模拟器的实现,RealMint这个项目就被遗弃了。


VNC Client

开发者一旦接触HTML5的canvas标签,就会发现这个标签Firefox和Chrome已经支持,而且开始替代哪些所谓的Javascript实现的VNC的客户端了。

完全用javascript实现的客户端加上java服务器的组件,工作原理是把VNC协议转化成一样的基于XML的版本。这样的实现受限于 VNC的特性,无法把一个连接传送给多个用户。概念上的项目需要很好的线上环境,虽然发展有点滞后,一个HTML5的VNC客户端已经在SourceForge上以“Guacamole”的名字注册了。

当Guacamole慢慢发展,变得不仅仅是一个概念上的产品时,需求快速增长,过去的像RealMint一样采取长轮询的XML的解决方案就慢慢被废弃了。

因为Websocket此时还无法被完全信赖,Java有没有Websocket的servlets标准,一个替代品,基于HTTP的隧道解决方案应运而生。


远程桌面网关(Remote Desktop Gateway)

一个更快的基于文本的协议被提出,它可以支持现有的大多数的远程桌面协议,不仅仅是VNC。整个系统被重新设计成一个标准的后台驻留进程(guacd)和一些公用的库文件(libguac),可扩展地支持远程桌面协议。

这个项目从一个完整的VNC客户端扩展成一个高性能的HTML5远程桌面网关以及通用API。目前,Guacamole被用做一个中心网关,可以支持连接任意数量的,运行着不同远程桌面协议的机器。提供可扩展地认证体系,这样你可以做一些特定的适配,Guacamole也提供一个用户Html5远程 连接的通用API。


篇幅有限,关于Guacamole的内容就介绍到这了,后面会分享更多devops和DBA方面的内容,感兴趣的朋友可以关注一下~

家好,我是 Echa。

今天来分享 50 个超实用的 Chrome 浏览器扩展!

JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可视化JSON文件。其核心功能包括:

  • 支持将JSON数据进行格式化,并使用属性或者图表进行展示;
  • 使用面包屑深入遍历 JSON 属性;
  • 在输入区写入自定义 JSON;
  • 导入本地 JSON 文件;
  • 使用上下文菜单下载 JSON 文件;
  • 网址过滤器;
  • 改变主题;
  • 自定义 CSS ;
  • 复制属性和值;

输入界面如下:

格式化之后:

2. JSONVue

JSONVue 是一个JSON数据查看器,主要用来格式化JSON数据:

网站技术

3. Library Sniffer

Library Sniffer 是一款给开发者使用的工具,能够探测当前网页所使用的类库、框架和服务器环境,为开发者提供了方便。

4. Wappalyzer

Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展,可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。

5. WhatRuns

WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。

开发调试

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以将设计图加载至网页中,与已成型的网页进行重叠对比,以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。

7. Clear Cache

可以使用此扩展程序快速清除缓存,无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量,包括:应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。

8. VisBug

VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具,它可以让用户使用点击式和拖放式界面来查看网站的元素。

9. Debug CSS

Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播,按住Ctrl,并将鼠标悬浮在元素上,即可查看其信息:

10. CSS Viewer

CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义,CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。

11. EditThisCookie

EditThisCookie 是一个 cookie 管理器。可以添加,删除,编辑,搜索,锁定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后,将在 Chrome DevTools 中获得两个新选项卡:"?? Components" 和 "?? Profiler":

  • Components 选项卡显示了在页面上呈现的根 React 组件,以及它们最终呈现的子组件;
  • Profiler 选项卡用来记录性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件,可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。

14. Augury

Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件,在Chrome中安装了Firebug Lite插件以后,开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容,其包含了基本的HTML、CSS以及Javascript的调试功能,用于帮助网页前端开发工程师快速地调试网页,以便及时地找到网页中的BUG并及时修复。

16. HTML Validator

HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示,详细信息可以在浏览器的开发者工具中查看。

17. Web Developer

Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox,并且可以在这些浏览器支持的任何平台上运行,包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox浏览器插件,提供URL转发、修改HTTP请求和结果、插入脚本等功能。

19. Window Resizer

Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。

21. Moesif Origin & CORS Changer

此插件允许直接从浏览器发送跨域请求,而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头,并将 Access-Control-Allow-Origin 设置为 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具,可让从网页等中选择颜色值。

23. CSSPeeper

CSS Peeper 用于检查和复制元素样式的优秀工具,使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上,然后单击鼠标即可复制元素的样式。

24. Dimensions

Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件,该插件在点击启动插件图标后,可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量,同时还可以通过使用快捷键来快速启用或关闭该插件的功能,简单实用。

25. Site Palette

Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。

26. ColorZilla

ColorZilla 是一款功能强大地提取网页色彩的工具;也是个快速的对颜色进行调节的Chrome插件,许多的用户将这款软件称呼为颜色吸取插件,它提取的颜色是非常的多样化,还可生产css颜色的代码等。

  • 吸管器-获取页面上任何像素或区域的颜色;
  • 一个先进的颜色选择器类似于可以在Photoshop和Paint Shop Pro中找到的;
  • 网页颜色分析器-分析任何网页上的DOM元素颜色,找到相应的元素;
  • 终极CSS梯度发生器;
  • 调色板查看器与7预先安装调色板;
  • 颜色历史最近挑选的颜色;
  • 显示标签名称,类别,编号,大小等元素信息;
  • 光标下的轮廓元素;
  • 自动将生成或采样的颜色复制到CSS RGB,Hex和其他格式的剪贴板;
  • 使用键盘快速采样页面颜色的键盘快捷键。

字体

27. WhatFont

当我们想查看网页中文字的字体时,最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢?WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标,再点需要查看为文字即可:

28. Fonts Ninja

Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。

标签页

29. BrowserStack

使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。

30. Toby

Toby 是一款 Chrome 新标签页工具,能够将未读的标签页分组显示在新标签页中,这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口,将你的标签页都拖进 Toby 中,就不需要实时开着占地方了。

31. daily.dev

该扩展提供了每日热门开发者新闻,不需要再浪费时间搜索高质量的文章了。

32. Momentum

Momentum 拥有漂亮的新标签页面,每日更新精彩背景壁纸图片,可设置每日新鲜事焦点以及跟踪待办事项,无广告,无弹窗。

33. The Great Suspender

The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡,在可配置的时间之后未查看的选项卡将在后台自动挂起,从而释放该选项卡消耗的内存和 CPU。

34. Session Buddy

Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复,从而达到节省内存的作用。

Github

35. Octotree

Octotree 旨在让 GitHub 体验更好。通常,为了检查 Github 中的子文件夹,需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构,这有助于更好地理解文件夹结构。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。

网页测试

37. axe DevTools

ax DevTools 是一个快速、轻量级但功能强大的测试工具,由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。

38. OctoLinker

OctoLinker 可以将特定语言的语句(如 include、require 或 import)转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时,只需将鼠标悬停在链接的文件上并单击即可打开。

39. Web Developer Checklist

此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。

40. Check My Links

Check My Links 是一个链接检查器,它可以抓取网页并查找损坏的链接。

41. Checkbot

Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告,该报告汇总了引起某种警告或错误的所有链接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。

隐私广告

44. Ghostery

Ghostery 是强大的隐私保护扩展程序。其主要有以下功能:

  • 拦截广告:Ghostery 内置的广告拦截工具可以移除网页上的广告,防止网页杂乱无章,让你专注于想看的内容。
  • 保护隐私:利用 Ghostery 可以查看和拦截所浏览的网站上的跟踪器,控制收集数据的跟踪器。增强反跟踪功能还能将数据匿名化,进一步保护隐私。
  • 提高浏览速度:Ghostery 的智能拦截功能可以自动拦截和取消拦截跟踪器来满足网页质量标准,提高网页加载速度,优化网页性能。

45. AdBlock

AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。

效率工具

46. Marinara

番茄工作法(Pomodoro?)时间管理助理。? 长短两种休息时间 ? 带有倒计时显示的工具栏图标 ? 追踪Pomodoro历史和统计讯息 ? 可配置的长休间隔 ? 可配置的定时器时长 ? 桌面与新标签页通知 ? 超过20种音效可选的声音通知 ? 计时器秒针走动音效

47. Loom

Loom 可以用来快速录制视频,并且能够将录制的视频上传到指定的网页中,Loom还支持在用户点击启动插件时,立即捕捉屏幕图像,同时开始视频录制操作,还可以将录制好的视频复制到粘贴板中存储。

48. GoFullPage

GoFullPage 是一款全屏截图插件(整个网页截图),完整捕获您当前页面的屏幕,进行滚动截图,而无需任何额外的权限。单击扩展程序图标,然后将其传输到屏幕快照的新标签页中,可以在其中将其下载为图像或PDF,甚至只需拖动即可,保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的图像查看体验,旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时,只需在页面右键点击图片,选择“在新标签页中打开图片”即可。

50. svg-grabber

svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。