针对Chrome浏览器,我最感兴趣的一点在于它的可扩展性。似乎你所能够想到任何可能的功能,都能够有一款浏览器插件能够满足你。
不过,你曾想过要创建你自己的插件么?你是否曾经考虑过创建一个插件的过程有多困难,或者都有哪些必要条件?好吧,实际上创建一个插件超级简单——甚至超乎你的想象。
在这篇文章中,我将要教你如何在5分钟创建一个基本的浏览器插件——绝对不开玩笑!
我们将要创建什么
我非常着迷于我自己网站的速度,simpleprogrammer.com/,所以我经常利用像gtmetrix.com/这样的网站来进行网站速度的检测,确保它没有慢下来。
同时我也会检测其他我经常关注的网站,以此来进行对比。
如果有一款浏览器插件,当你浏览任何网站的时候,能够只通过点击一个按钮,就能够使用GTmetrix进行速度检测岂不快哉?
我在Chrome Web 商店里并没有找到一个这样的插件,所以这就是我们今天将要进行构建的插件。
什么是Chrome浏览器插件
在我们开始构建插件之前,对浏览器插件是什么,它是如何工作的有一个基本的理解可能会更好些。
从最基本的层面理解,一个Chrome浏览器插件就是由一些HTML,CSS以及JavaScript文件组成,通过调用Chrome浏览器提供的JavaScript API,来给浏览器添加一些功能。一个浏览器插件基本上就是一个内置于Chrome浏览器里可以访问一些额外API的网页。
在改文章里,我讲给你展示如何创建一个基本的Chrome扩展插件:Browser Action。这个插件,会在浏览器工具栏里放置一个按钮,点击按钮之后将会展示一个HTML页面,同时执行一些JavaScript脚本。
通过使用Page Actions,也可以构建一些Chrome插件,仅仅在某些特定的页面生效。它们可以通过使用Background Pages,在后台执行脚本。通过Content Scripts,它们甚至能够修改一个已经在浏览器里加载的页面。不过我们在该篇文章里,我们将简而化之。
如果你想了解更多关于浏览器插件的功能,请参考:Chrome’s extensions documentation。
第一步: 创建项目
首先创建一个项目以及我们插件所需要的所有文件。创建一个新的文件夹 GTmetrix Extension
。我们将把所有插件相关的文件都放在这个新的的文件夹里。Chrome浏览器允许我们通过一个指定的文件夹加载插件。
所有的浏览器插件都需要一个manifest文件。这个Manifest文件告诉浏览器加载这个插件所依赖的所有内容。所以我们创建一个manifest.json
文件,把它放在新创建的文件夹里。我们暂时可以不添加任何内容。
接下来我们需要一个插件的icon。这个icon只需要 19px * 19px 大小的png图片。你可以通过Google Demo 项目的样例icon来进行修改。
接下来我们需要一个HTML网页,当我们在点击 Browser Action 的时候需要展示。所以我们在GTmetrix Extension
文件夹里创建 popup.html
和 popup.js
两个文件。
由于安全限制,在浏览器插件里,我们不能够在HTML文件里写内联的JavaScript代码。所以我们需要创建一个单独的文件来放置JavaScript代码, 并在HTML文件里引用它。
第二步:创建manifest文件
目前为止,我们已经拥有了基本的项目结构,我们需要在manifest文件里添加浏览器插件的描述内容。打开manifest.json文件,并输入如下的内容:
{
"manifest_version": 2,
"name": "GTmetrix Analyzer Plugin",
"description": "This extension will analyze a page using GTmetrix",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
JSON文件里大部分字段的意思,我们都能够通过字面意思来理解。不过请留意 browser_action 字段部分,定义了默认icon,以及当我们点击Browser Action时所展示的页面。
同时我也添加了permissions部分,指定了我们需要访问activeTab的权限。为了使我们能够获取到当前tab的URL,以便能够传递给GTmetrix,这个是必须要写的。
很多Chrome提供的API都需要指定相应的权限。
第三布: 创建UI
接下来就是创建Browser Action被点击之后需要显示的UI。
我们的UI将会非常简单,包含了一些文本GTmetrix Analyzer
,以及一个按钮,用户点击之后进行对当前页面的分析。
打开popup.html并输入如下内容:
<!doctype html>
<html>
<head>
<title>GTmetrix Analyzer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>GTmetrix Analyzer</h1>
<button id="checkPage">Check this page now!</button>
</body>
</html>
你应该已经看到,我在该HTML内容中,引入了 popup.js
脚本,我们将会把点击ID为checkPage按钮执行的逻辑放在这个文件中。
第四步: 编写逻辑
创建插件的最后一步,编写实现点击Check this page now!
按钮之后执行的逻辑。
我们给checkPage
按钮添加一个点击事件的监听。当按钮被点击的时候,我们需要创建一个新的表单,包含了当前页面的URL,并提交给GTmetrix,然后显示获取到的结果。
打开popup.js
文件,添加如下内容:
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
chrome.tabs.getSelected(null, function(tab) {
d = document;
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);
我从GTmetrix网站提供的书签工具中借鉴了大部分的代码来提交表单。
如果你检查以上代码,你将会发现,我们给checkPage
按钮注册了一个点击事件。然后,让按钮被点击之后,我们获取到当前选中的tab,然后通过JavaScript并创建一个表单以及隐藏的输入框,包含了提交给GTmetrix的参数。我们使用当前tab的URL告诉GTmetrix执行检查的内容。
验证
在Chrome里测试验证一个插件非常简单。在浏览器tab里输入chrome://extensions
,打开扩展页面。
在这个页面上勾选开发者模式,使我们能够加载未打包的插件。这允许我们从文件夹加载插件。最后,点击加载未打包的扩展程序
选择插件文件夹,或者拖拽GTmetrix Extension
文件夹到该页面来加载插件。你就会立马在当前tab工具栏看到插件的icon。
想要测试我们的插件,打开我们希望通过GTmetrics进行检查分析的网站。然后点击我们的 GTmetrix
插件。当HTML页面显示之后,点击Check this page now!
按钮,你将会立马看到当前页面的检查结果。