翻译：疯狂的技术宅原文：https://www.sitepoint.com/bui…未经允许严禁转载浏览器扩展程序是可以修改和增强Web浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。好消息是浏览器扩展并不难写。可以用你已经熟悉的Web技术（HTML、CSS和JavaScript）创建——就像普通网页一样。但是与网页不同的是，扩展程序可以访问许多特定于浏览器的API，这才是有趣的地方。在本教程中，我将向你展示如何为Chrome构建一个能够改变

在介绍 prettier-chrome 之前请允许我先介绍一下什么是Prettier如果你已经知道这是什么了并且已经会配置了，那么你可以直接跳到 prettier-chrome 的介绍什么是Prettier？有见识的代码格式化工具支持多种语言与大多数编辑器集成零配置，开箱即用（但你也可以少量配置）为什么使用Prettier？您按保存并且代码被格式化无需在代码审查中讨论风格节省您的时间和精力和更多支持的语言JavaScriptES2017JSXFlowTypeScriptVueJSONCSSCSS3+Les

写在前面：文章是ChromeDevTools介绍系列的一部分，查看全部文章可以关注Github上的 ChromeDevTools详解，也可以关注这个系列所在的项目：front-end-study。在Chrome中调试JS代码，那你不得不与ChromeDevTools的Sources面板打交道，所以文章主要通过介绍Sources面板上的各部分功能来介绍如何调试网页中的JS。熟悉Sources面板先来认识一下Sources面板(以我的Github首页举例)。可以看到面板被分为左中右三个部分，左边是文件导航，中