[译] 第二十九天:Yeoman Chrom Generator - 开发谷歌Chrome扩展

前言

今天的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, 它会问你如图几个问题。

  

一个个来看这些问题。

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

你可以安装没有打包的扩展到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功能有三个参数。

  1. 一个callback功能,当有事件锁定时执行。
  2. RequestFilter对象描述对适用于webReqeust事件的过滤,我们指定了一个URL模式的列表用于过滤。
  3. 一个包含字符'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

posted on 2014-01-20 17:58  百花宫  阅读(657)  评论(0编辑  收藏  举报