如何在10分钟内创建一个chrome插件(译)

629 阅读6分钟

原文链接:www.sitepoint.com/create-chro…

针对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.htmlpopup.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!按钮,你将会立马看到当前页面的检查结果。