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

时间 2019-11-09

标签第二十九天 9天 yeoman chrom generator 开发谷歌 chrome 扩展栏目 Google 繁體版

原文原文链接

前言

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

Chrome 扩展用例

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

Google+ 没有被阻止 :) git

安装Yeoman

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

$ npm install -g yeoman

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

安装Yeoman Chrome Generator

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

NPM用于装generators.npm

$ npm install -g generator-chrome-extension

Git仓库

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

建立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