如果您是Chrome用户，则可能正在使用一个或多个扩展程序。 无论是阻止广告还是添加功能，扩展程序都为浏览器增加了很多实用程序。 那么，如果您可以构建自己的Chrome扩展程序，那岂不是很酷吗？ 我正是在这里向您展示。
另请参阅我们的文章“最佳触摸屏Chromebook”
在为客户维护网站时，我想知道每个网站在页面加载方面的表现。 由于Google现在在其SEO计算中使用加载时间，因此了解网页优化的速度是一项重要指标。 当针对移动设备优化网站时，情况更是如此。 它必须轻巧，快速且加载正确，并且在Google中获得高分。
除此之外，SitePoint的进取心人也使用与我检查网站速度相同的网站GTmetrix，并开发了一个Chrome扩展程序来检查它，我想我会做同样的事情并逐步引导您。
Chrome扩展程序
Chrome扩展程序是一些微型程序，可在核心浏览器中添加功能。 它们可以像我们将要创建的那样简单，也可以像安全的密码管理器或脚本仿真器一样复杂。 它们以兼容的语言（例如HTML，CSS和JavaScript）编写，是位于浏览器旁边的自包含文件。
根据需要，大多数扩展都是执行给定操作的简单图标单击执行。 实际上，该操作可以是您希望Chrome执行的任何操作。
构建自己的Chrome扩展程序
通过一些研究，您可以调整扩展名以执行您喜欢的任何事情，但是我喜欢“一键式速度检查”的想法，因此继续进行。
通常，当您检查网站速度时，会将您所在页面的URL粘贴到GTmetrix，Pingdom或任何位置，然后单击Analyze。 只需要几秒钟，但是如果您只需要在浏览器中选择一个图标并为您完成操作，那岂不是很好吗？ 在学习完本教程之后，您将能够做到这一点。
您将需要在计算机上创建一个文件夹以保留所有内容。创建三个空文件，manifest.json，popup.html和popup.js。 在新文件夹内右键单击，然后选择新建和文本文件。 在您选择的文本编辑器中打开三个文件中的每个文件。 确保popup.html保存为HTML文件，而popup.js保存为JavaScript文件。 也仅出于本教程的目的从Google下载此示例图标。
选择manifest.json并将以下内容粘贴到其中：
{“ manifest_version”：2，“ name”：“ GTmetrix Page Speed Analyzer”，“ description”：“使用GTmetrix分析网站页面加载速度”，“ version”：“ 1.0”，“ browser_action”：{“ default_icon” ：“ icon.png”，“ default_popup”：“ popup.html”}，“权限”：}
如您所见，我们给了它标题和基本描述。 我们还调用了一个浏览器操作，其中包括从Google下载的图标，该图标将出现在浏览器栏和popup.html中。 当您在浏览器中选择扩展程序图标时，将称为Popup.html。
打开popup.html并将以下内容粘贴到其中。
使用GTMetrix的Pagespeed Analyzer
当您在浏览器中选择扩展程序图标时，将称为Popup.html。 我们给它起了一个名字，标记了弹出窗口并添加了一个按钮。 选择该按钮将调用popup.js，这是我们接下来要完成的文件。
打开popup.js并将以下内容粘贴到其中：
document.addEventListener（'DOMContentLoaded'，function（）{var checkPageButton = document.getElementById（'checkPage'）; checkPageButton.addEventListener（'click'，function（）{chrome.tabs.getSelected（null，function（tab）{d =文档; var f = d.createElement（'form'）; f.action ='http://gtmetrix.com/analyze.html?bm'; f.method ='post'; var i = d.createElement（ 'input'）; i.type ='hidden'; i.name ='url'; i.value = tab.url; f.appendChild（i）; d.body.appendChild（f）; f.submit（） ;}）;}，false）;}，false）;
我不会假装知道JavaScript，这就是为什么SitePoint已将文件放置在适当位置的原因。 我所知道的是，它告诉GTmetrix分析当前Chrome标签中的页面。 扩展名为“ chrome.tabs.getSelected”的地方，扩展名从活动标签中获取URL，并将其输入到Web表单中。 那是我所能做到的。
测试您的Chrome扩展程序
现在我们已经有了基本框架，我们需要进行测试以查看其工作原理。
- 打开Chrome，选择更多工具和扩展程序。
- 选中开发人员模式旁边的框以启用它。
- 选择“加载解压缩的扩展名”，然后导航到为此扩展名创建的文件。
- 选择确定以加载扩展名，它应显示在扩展名列表中。
- 选中列表中“已启用”旁边的框，该图标应出现在浏览器中。
- 在浏览器中选择图标，以便出现弹出窗口。
- 选择按钮，立即检查此页面！
您应该看到正在检查的页面以及来自GTmetrix的性能报告。 从主站点的我自己的站点中可以看到，我需要做一些工作来加快我的新设计！
扩展扩展
创建自己的Chrome扩展程序并不像看起来那样困难。 虽然知道一些代码当然可以帮助您抢先一步，但是有数百种在线资源可以告诉您这一点。 此外，Google拥有大量的信息，教程和演练资源库，将对您有所帮助。 我使用Google Developer网站上的此页面来帮助我进行此扩展。 该页面将引导您完成扩展的创建过程，并提供我们之前使用的图标。
通过足够的研究，您可以创建扩展程序，这些扩展程序几乎可以执行浏览器的所有功能。 Chrome商店中的一些最佳扩展来自个人而非公司，证明您确实可以创建自己的扩展。
所有内容均归功于SitePoint上的John Sonmez作为原始指南。 他做了艰苦的工作，我只是重新整理了一下，并稍作更新。
您是否创建了自己的Chrome扩展程序？ 想推广或分享吗？ 如果您愿意，请在下面告诉我们！
