Day 29:编写你的第一个 Google Chrome 扩展程序

编者注:咱们发现了有趣的系列文章《30天学习30种新技术》,正在翻译,一天一篇更新,年终礼包。下面是第 29 天的内容。css


今天的《30天学习30种新技术》,我决定去学习如何写一个 Chrome 扩展程序。在作了一些搜索以后,我发现一个 Yeoman 生成器能够用来写 Chrome 扩展程序。咱们在这篇要写的扩展程序是一个能够在工做时间内,把 Facebook、Twitter、LinkedIn 等等的社交网站屏蔽掉的插件。这篇文章不会说到 Yeoman 的基本知识,你能够阅读第 24 天的内容了解一下 Yeoman。
请输入图片描述html

Chrome 扩展程序用例

咱们会写一个在办公时间内(早上 9 点到下午 6 点),禁止咱们访问相似 Facebook、Twitter 这样的社交网站的一个简单的插件。若是用户访问 facebook 或者 twitter,他会看到下面的页面:
请输入图片描述
我没有屏蔽 Google + :)git

安装 Yeoman

执行下面的命令安装 yeoman。这个命令默认你已经安装了 Node 和 Npm:github

$ npm install -g yeoman

上面的命令会全局安装 yeoman。-g 选项是指明全局安装的意思。若是你的机器上没安装 Grunt 和 bower,那么这个命令也会自动帮你安装这两个软件。web

GitHub

今天这个演示应用的代码能够在 GitHub 上获得:github: day29-chrome-extensionchrome

建立 Chrome 扩展程序

如今,在已经说过所需的基础后,让咱们开始进行 Chrome 扩展程序的开发。npm

在你文件系统上便利的地方,为你的扩展程序建立一个目录,而后把工做目录转到扩展程序目录下。json

$ mkdir no-socializing
$ cd no-socializing

接着运行 yo chrome-extension 命令,它会问你以下所示的几个问题。
请输入图片描述
让咱们一个个过一下这些问题:
1. 它首先问一下咱们要对这个扩展程序如何命名,默认的名字是文件夹名字。
2. 接着它询问这个扩展程序的用处
3. 而后,它询问咱们要不要使用 UI Action。咱们使用 Browser UI Action。Browser Action 容许咱们在 Chrome 的 Omnibox 旁边放一个能够点击的图标。点击这个图标就能够打开一个 html 文件。
4. 接着,它会问咱们是否须要添加更多 UI 的功能。咱们添加选项页(Option Page)和 Omnibox 特性。
5. 最后,它询问咱们要给这个扩展怎样的权限。请阅读文档了解更多的细节。segmentfault

你能够像下面那样安装未打包的扩展程序到 Chrome 上。勾选开发者模式(Developer Mode)而后点击加载未打包的扩展(Load unpackaged extension),而后在 no-socializing 目录下给它 app 目录。
请输入图片描述数组

安装以后,你能够看到下面那样:
请输入图片描述

更新 Background.js

这个 Chrome 扩展程序的行为是受在文件夹 app/scripts 下面的 background.js 控制的。复制下面的代码,而后替换 background.js 的源代码。

'use strict';

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        var currentTime = new Date();
        if(isOfficeTime(currentTime) && isWeekday(currentTime)){
            return {redirectUrl: chrome.extension.getURL('index.html')};    
        }
        return details.url;
    },
    {
        urls: [
            "*://*.facebook.com/*",
            "*://*.twitter.com/*",
            "*://*.gmail.com/*",
        ],
        types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"]
    },
    ["blocking"]
);

function isOfficeTime(currentTime){
    var hour = currentTime.getHours();
    return hour > 9 && hour < 18;
}

function isWeekday(currentTime){
    var dayOfWeek = currentTime.getDay();
    return dayOfWeek >= 1 && dayOfWeek <= 5;
}

上面的代码作下面的事情:
它监听 onBeforeRequest 事件,它触发将要出现的请求。addListener 函数接受三个参数:
1. 一个回调(callback)函数,它会在事件触发时执行。
2. RequestFilter 对象,是一个将 webRequest 事件过滤的过滤器。咱们会列出一系列要被过滤掉 URL 模式。
3. 一个包含 blocking字符串(只容许特定的事件)的数组,回调函数会被同时处理。

咱们也另外定义了一些函数去查询当前的时间和当前日期是在一周中的哪一天。它只会在工做日的上午九点到下午六点之间屏蔽掉社交网站。

上面的代码使用 WebRequest API。咱们须要让这个扩展程序访问 chrome.webRequest API。这要用到 webRequest 权限。因为这个扩展程序在屏蔽模块中使用了 chrome.webRequest API,因此咱们也不得不赋予 webRequestBlocking 权限。打开 app 目录下的 manifest.json 文件,而后更新权限模块:

"permissions": [
    "webRequest",
    "tabs",
    "http://*/*",
    "https://*/*",
    "webRequestBlocking"
  ]

咱们最后要作的就是添加一个 index.html。这个是用户访问 facebook、twitter 等等网站时要渲染显示的。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>No Socializing</title>
  <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
  <h1>NO, Socializing</h1>
  <img src="/images/no-social-media.jpg" height="450" width="450">
  <h2>It's Office Time  Dude</h2>
</body>
</html>

你能够在 GitHub 仓库里下载图片

如今,从新加载这个扩展,而后打开 http://facebook.com 或者 http://twitter.com 。若是当前时间是工做日的上午九点到下午六点之间,你会看到下面的页面:
请输入图片描述

这就是今天的内容了,保持反馈。


原文:Day 29: Yeoman Chrome Generator--Write Your First Google Chrome Extension
翻译:Segmentfault

相关文章
相关标签/搜索