如何制作Chrome扩展？＜详细教程＞

　　通过一些研究，你可以调整扩展做任何你喜欢的事情，但我喜欢“一键测速”的想法，所以继续吧。

　　通常你查网站速度的时候会把你页面的URL粘贴到GTmetrix，Pingdom或者任何地方，然后点击分析。只需要几秒钟的时间，但是如果只需要在浏览器中选择一个图标，替你完成操作，岂不是很好?完成本教程后，您将能够做到这一点。

　　您需要在计算机上创建一个文件夹来保存所有内容。创建三个空文件，manifest.json，popup.html和popup.js在新文件夹中右键单击，然后选择新建和文本文件。在您选择的文本编辑器中打开这三个文件。确保popup.html保存为HTML文件，popup.js保存为JavaScript文件。也可以从Google下载这个示例图标，只是为了本教程的目的。

　　选择manifest.json并将以下内容粘贴到其中:

　　{"Manifest _ version": 2，" name": "GTmetrix页面速度分析器"，" description ":"使用GTmetrix分析网站页面加载速度"，" version": "1.0 "，Browser _ action:{ default _ icon:icon.png，default _ popup: popup.html}，权限:}

　　如你所见，我们给了它标题和基本描述。我们还调用了一个浏览器操作，包括从谷歌下载的图标，它会出现在浏览器栏和popup.html。当您在浏览器中选择扩展图标时，它将被称为Popup.html。

　　打开popup.html并粘贴以下内容。

　　使用GTMetrix http://popup.js的pagespeed analyzer

　　使用GTMetrix的页面速度分析器

　　检查页面速度!

　　当您在浏览器中选择扩展图标时，它将被称为Popup.html。我们给它起了一个名字，标记了弹出窗口，并添加了一个按钮。选择这个按钮将调用popup.js，这是我们接下来要完成的文件。

　　打开popup.js并将以下内容粘贴到其中:

　　document . addevent listener(' DOMContentLoaded '，function(){ var check page button = document . getelementbyid(' check page ');check button . addevent listener(' click '，function(){ chrome . tabs . get selected(null，function(tab){ d = document;var f = d . createelement(' form ');f . action = ' http://xxxxx.com/1. html?BM’;f.method = ' postvar I = d . createelement(' input ');i.type = ' hiddeni.name = ' urlI . value = tab . URL;阑尾切除术(一);d . body . appendchild(f);f . submit();});}，假);}，假);

　　我不会假装懂JavaScript，这就是SitePoint把文件放在合适位置的原因。我只知道它告诉GTmetrix分析当前Chrome选项卡中的页面。其中扩展是“chrome.tabs.getSelected”，扩展从活动标签中获取URL，并将其输入到Web表单中。我能做的就这些了。

　　测试你的Chrome扩展。

　　现在我们有了基本框架，我们需要测试它，看看它是如何工作的。

　　打开Chrome，选择更多工具和扩展。

　　选中开发人员模式旁边的框以启用它。

　　选择“加载解压缩的扩展名”并导航到为此扩展名创建的文件。

　　选择OK加载扩展，它应该出现在扩展列表中。

　　选中列表中“已启用”旁边的框，图标应该会出现在您的浏览器中。

　　在浏览器中选择图标，将出现一个弹出窗口。

　　选择按钮立即查看此页面!

　　您应该看到正在检查的页面和来自GTmetrix的性能报告。正如你在主网站上看到的，我需要做一些工作来加快我的新设计!

　　最后

　　创建自己的Chrome扩展并不像看起来那么困难。虽然了解一些代码肯定可以帮助你领先一步，但是有数百种在线资源可以告诉你这一点。此外，谷歌有一个庞大的信息库，教程和练习，这将有助于你。我使用谷歌开发者网站上的这个页面来帮助我进行这个扩展。该页面将引导您完成创建扩展的过程，并提供我们之前使用的图标。

内容引用出处：如何制作Chrome扩展？<详细教程>

如何制作Chrome扩展？＜详细教程＞相关推荐

使用css制作动态时钟详细教程
使用css制作动态时钟详细教程完成效果: 步骤一: 创建一个宽高为300px圆形时钟的外表盘,边框加上阴影更好看一点,页面背景色为黑色代码: <!DOCTYPE html> <h ...
ps海报合成教程_如何利用PS制作海报？详细教程来了！
今天能学长给大家带来一套利用PS做[月满中秋]海报的教程.福利干货到,请大家接住! 话不多说,直接上教程[月满中秋-第一课] 月满中秋-海报制作教程https://www.zhihu.com/vide ...
编写Chrome扩展插件教程
一个 Chrome 是一个配置(入口)文件 manifest.json 和一系列 html.css.js.图片文件的集合,然后将代码使用Chrome打包成crx文件即可使用然后生成crx文件,直接把 ...
IDM下载器如何使用谷歌浏览器(Chrome)集成详细教程
一请将IDM更新到最新版本 "帮助 – > 检查更新-" 菜单项. 打开IDM应用,"选项- >常规" IDM对话框(图像箭头1).然后勾选&qu ...
php7 安装zip扩展详细教程
通过 php --ri zip 可查看zip拓展的详细信息扩展包 wget http://pecl.php.net/get/zip-1.19.1.tgz (截止2020.10.19 最新版, ...
基于STC12C5616AD芯片智能循迹避障小车完整制作过程（详细教程）
前言:本篇文章适合小白阅读,其中有很基础的Keil 5的使用教程等.大多网友知道如何使用,因此大家可以看目录,对于自己而言比较基础的可以不用阅读,重点关注一些迷茫的部分. 智能循迹避障小车教程目录智 ...
AI—漂亮的花简单制作（含详细教程）
暑假在家刷短视频???不!不!不!球球,别别别!平面制作搞起来!跟数媒小可爱学炒鸡有意思的AI吧! 今天带来的是一朵漂亮的花-->(效果图入下) 步骤一.用"星形"工具--& ...
使用Visual Studio 2019创建安装程序的详细教程
VS2019 制作Setup Project详细教程对于windows平台,可以使用Visual Studio 提供的Setup Project 来制作程序的安装包.本教程主要介绍VS2019如何安 ...
linux es数据库 head,centos7安装Elasticsearch及Es-head插件详细教程(图文)
懒惰了很久,今天来写一下Elasticsearch在centos7上安装教程以及安装过程中可能出现的报错解决方式,有不对的地方,烦请各位看官多多指教! 一.ES安装 1.环境检查确保有java环境, ...

如何制作Chrome扩展？＜详细教程＞

如何制作Chrome扩展？＜详细教程＞相关推荐

最新文章

热门文章