您应该拥有的 15 多个 Chrome 扩展程序。

这周我回顾了迄今为止用过的、对我的开发之旅很有帮助的 Chrome 扩展程序。我很喜欢我使用的某些应用也自带了功能相同的 Chrome 扩展程序。这省去了我下载应用到笔记本电脑的麻烦。还有一些更常见的扩展程序，例如大多数开发者都会使用的动量 (Momentum)、Json viewer、八叉树 (Octree) 等。但我也会列出一些虽然不是特别流行，但我喜欢它们在我的日常开发工作中发挥的效率的扩展程序。我还想推荐一些可能对你有帮助的设计和开发扩展程序。
我列出的所有扩展程序都是免费的，而且非常有用。有时我简直不敢相信它们竟然如此高效，而你却可以免费获得它们。这就是我热爱开源贡献的原因，这是一种回馈这些杰出开发者的方式。

您应该添加到列表中的 12 个顶级扩展

1）挥手致意

这个强大的扩展程序可以评估你的网站，并告诉你存在的可访问性问题。通过这个工具，你可以了解你的网站是否可访问。此外，它还会引导你找到问题代码，并提供详细的解释。此外，它还会提供可访问性标准和指南的文章链接，帮助解决特定错误。
当我参与任何开源项目时，这个工具都能帮到我，我可以记录许多问题，例如对比度错误、标签缺失、图像中的 alt 文本相同等等。它还能根据作品集评审的要求，帮助我分析某人的网站。如果你去面试，并告诉公司团队应该如何使用它来提升网站的可访问性，那一定非常棒（我保证，他们会将你视为一位优秀的初级开发人员）。

2）水星阅读器

Mercury Reader 可以去除广告或其他干扰，只保留文本和图片，让您在任何网站上都能更专注地阅读。此外，您还可以根据需要将文章直接发送到您的 Kindle。只需点击send to Kindle link博客文章顶部即可。
这款扩展程序是我最喜欢的扩展程序之一，因为我喜欢在早上阅读设计或科技博客。对于许多开发者来说，阅读像 Smashing Magazine 或 Hacker News 这样的博客是了解最新动态的好方法。有了这个工具，您现在可以不受广告干扰地阅读博客。现在我的阅读过程更加流畅，更加愉快。

我在 Smash 杂志上读到的一篇博客文章

当我使用 Mercury Reader 时

您可以点击右上角的设置图标进行自定义。更改字体大小、排版或主题。

3）黑暗读者和午夜蜥蜴

从名字来看，Dark Reader Chrome 扩展程序可以将任何网站切换为暗黑模式主题。这在夜间尤其有利于保护眼睛。但我一天24小时都在用它，哈哈，我不喜欢网站太亮，无论白天还是晚上。（不，我不是吸血鬼，哈哈😁）
Midnight Lizard 也与 Dark Reader 类似，但它更易于定制，拥有多种不同的配色主题。

Smashing Magazine 与 Dark Reader

午夜蜥蜴自定义设置

4）进行全页面截屏

这款扩展可以截取整个网站的高质量截图。当我想从不同的网站收集设计灵感时，我会用到这个工具。我会把这些截图放到我的 Figma 画布上，看看能为我的个人项目挑选哪些素材。此外，它还能帮你截取项目图片，并添加到你的作品集或社交媒体账户中。

5）完整截取网页截图 - FireShot

此扩展程序可以捕获、编辑并保存为 PDF/JPEG/GIF/PNG 格式，方便上传、打印、发送到 OneNote、剪贴板或通过电子邮件发送。它提供了更多功能，方便您捕获网站的特定区域。本月 Hackoberfest 期间，我多次使用过此工具。在创建项目前端问题或创建拉取请求并展示我的更改时，它非常有用。人们总是更喜欢直观的视觉呈现，而不是纯文本。

6）专注待办：番茄钟和待办事项清单

这是一款 Chrome 任务管理扩展程序，可帮助您在日常工作中更加专注和积极。如果您想在电脑上使用它而无需下载应用程序本身，这款扩展程序可以满足您的需求。它具有与桌面或移动应用程序相同的功能。您可以创建正在进行的项目并设置休息时间。无论是每 25 分钟还是每 40 分钟。这款扩展程序的基本使用是免费的，但您可以根据需要购买高级套餐。

7）Chrome 版 Loom

这款扩展非常适合向团队发送视频消息或与朋友进行项目协作。它还可以用来进行代码评审，或向客户展示如何解决他们网站上的小问题。它的优点在于，您可以根据自己的需求进行自定义。无论是录制整个桌面、仅录制当前选项卡，还是选择使用摄像头或仅录制音频，它都能满足您的需求。

8）图片下载器

从名字上看，这款扩展程序可以帮助你从任何网站下载图片，而且它是免费开源的。当你想批量或单张获取图片时，它是个很棒的工具。我曾经用它编写我喜欢的网站代码，只是为了提高我的前端技能。获取到的图片和你克隆的网站一模一样，太棒了。

9）大声朗读

这款扩展程序只需单击一下即可朗读任何网站上的文本。当您既想阅读博客，又想编写代码时，这款工具将非常有用。它会在您继续编写代码时在后台为您朗读博客内容。即使在我撰写这篇博客的同时，我也在用它朗读 Smashing Magazine 和 Dev to 上的一些文章。您可以自定义语音、语速、音调、音量等。

我现在正在听Hemant Joshi 的《React 完全初学者指南》

10）获取 Pocket

此扩展程序可帮助您保存在网上看到的喜爱视频或文章。此外，您还可以使用标签进行整理，以便更轻松地在一个地方找到它们。

11）CSS Peeper

此扩展程序是一个 CSS 查看器，可让您检查网站中使用的样式。您还可以查看网站上使用的颜色或图片、图标等资源。

检查样式

网站使用的颜色

使用的资产

综上所述

还有很多扩展我没有列出，但它们确实非常有效。列表里会有 20 多个扩展，哈哈。不过我会写第二部分，介绍我使用的高效生产力工具。其他我常用的扩展包括：

• whatfont - 检查使用的字体系列或字体大小
• 颜色选择吸管- 用于网站的缩放颜色选择器。
• 动力- 用包含待办事项、天气和灵感的个人仪表板替换新标签页。
• JSON 查看器-
• Grammarly - Grammarly 帮助您消除写作错误并找到完美的词语来表达自己。
• Daily Dev - 这是获取科技领域最新资讯的最快方式。而且，我非常喜欢这款扩展程序的用户体验。
• Lorem Ipus Generator - 轻松生成 lorem ipus 文本。
• Lighthouse - 通过为您提供可改进的指南来提高您网站的性能。
• Web 开发人员清单- 分析任何网页是否违反最佳实践。
• Octotree - 用于 Github 探索和代码审查。
• Wappalyzer——它向您展示该网站是基于什么构建的。

希望您能找到新的工具来帮助您提高效率和生产力。分享您最喜欢的、不在列表中的扩展程序。我很乐意看看它们。💖✨

更新：我已将“伟大的吊带”从列表中移除。更多详情请查看此链接。感谢Entio告知我此事。

如果你觉得这篇文章有用，请分享给你的同行或学习代码的初学者，他们或许会发现这些扩展对他们的学习之旅很有帮助。你也可以请我喝杯咖啡。🙂