我生活中不可或缺的 10 大 Chrome 扩展程序

Chrome 扩展程序是一些简单的扩展工具，可以帮助协调工作。我是一个不断成长的开发者，对我来说，一个高效的 Chrome 扩展程序能够帮助我加深对网站和 API 的理解，提高工作效率，对我来说至关重要。

在这篇博客中，我将列出我作为开发者经常使用的十大 Chrome 扩展程序，我相信每个开发者都应该使用它们。我还会告诉你为什么你应该继续阅读：

详细了解如何以及何时使用扩展
每个人的个人评分以及理由

简而言之，对我的十大扩展进行简要回顾。

1.阅读器模式

阅读器模式是一款扩展程序，可帮助移除网页中任何冗余/不必要的部分，例如溢出的广告。用通俗的话说，阅读器模式能带来类似 Kindle 的阅读体验。此外，它还提供各种功能，例如：

自定义主题样式
移除网页上任何多余的部分，例如广告 - 此功能非常方便，因为广告会遮挡部分网页，导致您无法 100% 专注于阅读。使用此功能，您可以 100% 专注于阅读。
文本转语音 - 这是我个人最喜欢的，因为当我累的时候，我只想有一种有声读物般的感觉。
您可以在阅读器模式下保存已编辑的文章，然后转到仪表板以便稍后查看它们 - 就像个人图书馆一样，易于管理，并且可以轻松重新阅读已保存的文章。

我可以在何时何地使用阅读器模式？

我习惯阅读大量博客和文章来理解不同的概念。比如说，Geeks for Geeks 是一个充斥着广告的网站，我希望获得流畅的阅读体验，没有导航栏、广告或任何无用的部分。

在这种情况下，我有一个阅读器模式扩展，我只需单击它，瞧，我有一个整洁的纸质视图，可提供无缝的阅读体验。

原始视图

阅读器模式视图

通过图片比较，您可以清楚地知道您是想直接从网站上阅读还是使用阅读器模式扩展来阅读！

扩展链接 - https://bit.ly/3u7wcDY
个人评分 - 4/5

唯一的问题是大多数功能都是付费的，但即使使用免费功能，您也可以获得惊人的体验。✨

2. Talend API 测试器

Talend Cloud API Tester 允许您与 REST 服务进行交互。简而言之，它提供的功能类似于 Postman，但 Talend API Tester 是以 Chrome 扩展工具的形式存在于 Web 上的。

根据我的经验，它在小型项目中表现良好，并且在某些情况下对我来说是 Postman 的最佳替代方案。设置和开始使用对我来说非常容易。Talend API Tester 的一些基本功能包括：

根据您的项目创建环境
导入 JSON 文件并获取所有 API 端点 - 我发现这是一个很棒的功能，而且您可以根据需要进行编辑和测试
创建 API 端点，包括您的团队，并将端点导出为 JSON 文件

从图中可以看出，它确实给人一种 Postman 的感觉，并且有助于直接通过 Web 操作 API 端点。我之所以选择 Talend API 而不是 Postman，可能是因为有时我想直接使用 Web，而不是打开单独的应用程序。

链接 - https://bit.ly/3diaTJ5
个人评分 - 3.5/5

即使它确实提供了灵活性并且可以通过 Web 轻松使用 API 端点，但它无法与邮递员提供的灵活性相提并论。

3. Redux DevTools

Redux 是一个用于管理应用程序状态的 JavaScript 库。它主要与 React JS 或 AngularJS 配合使用。当你想探索状态是如何管理的时，你肯定不想不断地重复操作，因为console.log这会让人感到沮丧。另一种更理想的方法是直观地查看用户与应用程序交互时状态的变化。

使用 Redux DevTools 扩展可以实现这种可视化。在浏览器中安装此扩展后，在代码库中创建 store 时，只需添加一行配置即可。对于 ReactJS，请执行以下操作：

const store = createStore(
   reducer, /* preloadedState, */
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

yarn start当您使用默认开发工具或npm run start与默认开发工具一起运行应用程序时，您也会观察到一个Redux。此扩展提供的功能：

检查器跟踪哪个状态从一个值变为另一个值
还提供了各个状态的列表，您可以在其中查看应用程序中每个状态的当前状态
差异部分展示状态的差异

链接- https://bit.ly/2Oc6qPS
个人评分- 4.5/5

4. ColorZilla

颜色在网站中非常重要，因为它们需要根据定义的规则具有适当的对比度，同时，您还需要选择一种颜色组合，作为网站独特的调色板。ColorZilla 是一款出色的 Chrome 扩展程序，它提供了一系列令人惊叹的功能，仅列举其中几项：

从当前网页中选择整个调色板
提供颜色渐变生成器和直接将其包含在我们网站上的代码
从页面中选择任意颜色 - 我最喜欢的功能

我主要使用 ColorZilla 的颜色选择器功能。有时，选择一个调色板不足以满足你的网站需求，它可能符合也可能不符合对比度规则。因此，我认为颜色与网站的标志相关，而标志中包含着多种颜色。有了 ColorZilla，我可以轻松选择我想要的颜色！当然，ColorZilla 的用途远不止于此，你还可以用很多实用的方法，包括我使用的方法。

在图中，我刚刚展示了用于分析网页颜色的功能，这是它的一个令人惊奇的功能。

链接- https://bit.ly/39sjiIW
个人评分- 4.5/5

我无法提供 5，唯一的原因是我希望它具有附加功能：

它分析网页的调色板并生成类似的调色板
根据从网页上选择的颜色，生成相同的调色板组合

5. CSS Peeper

一款 Chrome 扩展工具，可分析完整网页的 CSS。它是一款非常出色的 Chrome 扩展程序，主要原因是，当你分析网页时，只需打开开发工具，在“元素”下，将鼠标悬停在某个组件上，即可自行获取其 CSS 属性和资源！

此扩展程序为您完成所有工作。它提供以下功能：

网页中使用的所有字体系列
网页的整个调色板以及单独复制每种颜色的能力
每个资产图像都是从网页生成的 - 喜欢这个功能，因为只需单击一下即可访问网页的所有图像
通过将鼠标悬停在各个组件上来访问网站中组件的属性

图中展示了所选组件的属性是如何赋值的，这也是 CSS Peeper 的一大亮点。同样，直接跳转到你想查看的页面，点击扩展程序，就能体验到它的强大功能。

链接- https://bit.ly/3wmzjdo
个人评分- 5/5

我发现所有这些功能对于分析网页的 CSS 都非常有用。简直简洁又神奇 ✨

6. Web开发人员清单

在我看来，清单非常有效。对于任何重要的任务，我都会确保创建一个清单，并根据清单跟踪我正在执行的所有任务。这不仅适用于我的日常生活，而且作为开发人员创建网站时，我也需要一份清单来保持网站评分。这时，这个扩展就派上用场了！

当创建网站时，人们会检查所提供的开发工具中的审核，以检查可访问性、SEO 等分数，并编辑网站以不断改进它。

Web 开发人员检查表主要帮助分析 Web 应用程序是否违反了最佳实践。它检查的项目包括：

搜索引擎优化
可用性，包括友好的 URL 和 HTML 验证
无障碍设施

我使用的方法是，针对我创建的网站，运行此扩展程序，检查是否存在任何我可能遗漏的与最佳实践相关的具体错误或任务。完成清单后，我会根据我的审核运行一次，检查分数。（分数会增加！）

从图中可以看出，尽管我创建了一个简洁的网站，但在创建DSC、NIT Surat网站时，我还是忽略了一些方面。根据这些方面进行修改很容易，而且也能保持良好的审核分数！

链接- https://bit.ly/3frpKUd
个人评分- 4/5

7. 检查我的链接

让我们描绘一个场景，让您了解此扩展的重要性。假设您负责维护一个高度文档化的网站，例如 Camel 网站或 Bootstrap 网站。就 Camel 网站而言，存在多个版本，每个版本都基于此版本提供文档。检查网页上是否存在任何损坏的链接非常重要，因为旧版本的文档通常维护或检查不充分。因此，为了验证网页上的所有链接，此扩展就显得尤为重要。

此功能当然也适用于您的网站，因为最好使用扩展程序反复检查是否有任何损坏的链接！让我们列出此扩展程序的功能：

检查网页上所有链接的有效性
对于任何警告，它会在控制台中提供警告
它会彻底检查网页上是否有任何损坏的链接，并提供从控制台复制所有损坏链接的选项
当它识别出网页上的断开链接时，它会将其标记为红色，并显示其相应的状态代码

从图中可以看出，一个链接无效，扩展程序很容易就捕获到了它。当你在开发工具中检查控制台时，它也会打印出这个无效的 URL。

链接- https://bit.ly/39uRPGr
个人评分- 4/5

我唯一不喜欢这个扩展的地方是，当我检查完网页上的链接后，关闭扩展程序，那些高亮的链接仍然保留着（我不喜欢这样）。因此，我需要刷新页面，如果我已经浏览了很深的页面，这可不是个好办法。

8. 增强 Github

即使与扩展无关，我也会把它放进盘子里，因为我是一个活跃的 Github 用户，而且我热爱 GitHub。Github 是一个很棒的平台，但它也有一些功能没有提供，而这个出色的 GitHub 相关扩展让我对 Github 感到满意。

让我们在 Github 平台上布局一下扩展提供的功能：

显示 repo 大小 - 这对我来说很有用，因为我喜欢提前了解 repo 所需的存储量
显示分支中每个文件的大小
提供下载文件或将整个文件复制到剪贴板的功能——我非常喜欢这个功能，因为我在某个代码库（比如说某个竞争性代码库）里看到一个文件，想找个解决方案参考。有了这个扩展，我可以轻松地一键将文件复制到剪贴板，而不用点击“原始文件”然后复制粘贴（说实话，这对我来说很麻烦）。

要启用图中所示的扩展，请执行以下操作：

将 Chrome 扩展程序添加到您的浏览器，然后单击该扩展程序
点击后，系统会要求您提供访问令牌
为了提供访问令牌，您可以通过此链接为扩展创建访问令牌，并为其生成一个新令牌
使用这个新令牌并将其提供给扩展程序

这样，你就可以在任意仓库上运行这个扩展了！瞧！

链接- https://bit.ly/2QV5b8D
个人评分- 3.5/5

这确实是一个有用的扩展，但我认为它可以包含更多功能。以下是我的看法：

提供第一次提交的开始日期和最晚提交的日期，以了解项目周期
当我查看用户的 repo 列表时，它应该显示总大小信息以及星号和 fork 的数量

9. daily.dev

我再说一遍，我喜欢阅读那些足够有趣或与我感兴趣的领域密切相关的博客和文章。我主要用dev.to查找和阅读软件相关的博客，但我也喜欢阅读技术相关的博客，但有时很难找到合适的博客。

这就是我使用这个超棒扩展的原因。它的用户界面设计简洁，给人一种图书馆般的感觉。打开扩展后，页面会跳转到一个新页面，感觉就像是一些小卡片，上面写着一些有趣的主题，我只想读几句。我每天早上至少会读两篇博客，主题涵盖各个领域，或者只是与开源新闻或科技新闻相关的。

daily.dev 确实是了解最新编程新闻的最简单方法，如果你喜欢阅读，我推荐它。🖖🏻

链接 - https://bit.ly/2QKDWNS
个人评分- 4.5/5

10. 动量

Momentum 是一款生产力扩展工具，说实话，在生产力工具中，它是我继 ReaderMode 之后第二喜欢的工具。这款扩展程序巧妙地运用了灵感和舒缓的图片引导用户走上正确的工作之路（即想要工作！），并提供鼓励和动力，让他们持续工作并完成待办事项。

除了舒缓的图像和引语外，该扩展还提供其他功能，包括：

天气和预报
待办事项 - 我喜欢提供待办事项的舒缓应用程序，它让我更有工作热情！
搜索和链接功能
还可以选择将您的小部件添加到动量网页

链接- https://bit.ly/3sEIHqv
个人评分- 5/5

我不是一个很积极的人，但我也希望在大多数时间里都能有动力去工作而不被分心，这个扩展很有帮助！✨

这 10 个扩展都是我最爱用的，不过还会额外赠送 2 个扩展！分别是：

Github Gloc - 此扩展程序会创建一个徽章，指示用户在 Github 上每个可见存储库的行数
Wakatime - 追踪我在 VS Code、XCode 和 Chrome 等应用程序上花费的时间。它帮助我追踪在不同项目上花费的时间。

希望以上信息足以帮助您理解每个扩展的用例。你最喜欢哪个扩展？它对你有什么用？🤔

文章来源：https://dev.to/aemiej/top-10-chrome-extensions-i-can-t-live-without-2bdf