[译] 第二十九天：Yeoman Chrom Generator

前言

今天的30天挑战，我决定学习怎样开发谷歌扩展，一番搜索后，我找到一个Yeoman Generator用于开发谷歌扩展。本文要写的扩展会在工作时间阻止我们登陆FaceBook, Twitterm LinkdIn和其他社交网站，这里不再阐述Yeoman基础知识，你可以参考第24天博客了解Yemoman基础。

Chrome 扩展用例

我们来写一个很简单的扩展，在上班时间按(9am-6pm)阻止我们登陆社交网站如Facebook, Twitter等，如果用户想登陆那些网站，会看到如图页面。

Google+ 没有被阻止 :)

安装Yeoman

输入以下命令安装yeoman, 前提假设你已经安装Node和NPM.

$ npm install -g yeoman

以上命令会全局安装yeoman, -g 用于标识全局安装，同时如果你还没安装Grunt，这个命令会帮你装上。

安装Yeoman Chrome Generator

Yeoman依赖Generators来架构程序代码，流行JavaScript MV* 框架有多种generator, 本文我们用Chrome genterator.

NPM用于装generators.

$ npm install -g generator-chrome-extension

Git仓库

今天的demo在 github: day29-chrome-extension.

创建Chrome扩展

基础讲完，现在来开发扩展程序。

在你本地机为扩展新建一个目录，并把当前路径指向这个目录。

$ mkdir no-socializing
$ cd no-socializing

然后运行yo chrome-extension, 它会问你如图几个问题。

一个个来看这些问题。

扩展程序的名字，默认是文件夹名。
扩展程序的目的。
我们是否想用到界面操作，我用了浏览界面操作，浏览操作允许我们把可点击的图标直接放置在Chrome的OminiBox后面，便于访问，点击图标就会新开一个html页面。
是否想增加更多界面功能，我们添加了可选页和Omnibox功能。
最后，给扩展程序什么样的权限，详情请参考文档。

你可以安装没有打包的扩展到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;
}

View Code

以上代码：

监听onBeforeRequest事件，当有请求出现时锁定目标，addListener功能有三个参数。

一个callback功能，当有事件锁定时执行。
RequestFilter对象描述对适用于webReqeust事件的过滤，我们指定了一个URL模式的列表用于过滤。
一个包含字符'blocking'(只允许特定的事件)的数组，callback功能会同步处理。

同时也定义了几个功能用于查询当前时间和星期，只在工作日的9am-6pm禁止使用社交网站。

以上代码使用WebRequest API, 我们需要给这个扩展访问chrome.webRequest API, 使用webRequest权限可以完成。由于这个扩展在阻止方法中用chrome.webRequest API，我们也需要给webRequestBlocking权限，在app路径下打开manifest.json, 更新权限部分。

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

View Code

最后需要添加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>

View Code

你可以从 github仓库下载图片。

重新加载扩展，访问 http://facebook.com 或者 http://twitter.com, 如果现在是9am-6pm,可以看到如图。

这就是今天的内容，继续给反馈吧。

原文：https://www.openshift.com/blogs/day-29-yeoman-chrome-generator-write-your-first-google-chrome-extension