前言
今天的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; }
以上代码：
监听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" ]
最后需要添加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, 如果现在是9am-6pm,可以看到如图。
这就是今天的内容，继续给反馈吧。