Day 29：编写你的第一个 Google Chrome 扩展程序
今天的《30天學習30種新技術》，我決定去學習如何寫一個 Chrome 擴展程序。在做了一些搜索之后，我發現一個 Yeoman 生成器可以用來寫 Chrome 擴展程序。我們在這篇要寫的擴展程序是一個可以在工作時間內，把 Facebook、Twitter、LinkedIn 等等的社交網站屏蔽掉的插件。這篇文章不會說到 Yeoman 的基本知識，你可以閱讀第 24 天的內容了解一下 Yeoman。
Chrome 擴展程序用例
我們會寫一個在辦公時間內（早上 9 點到下午 6 點），禁止我們訪問類似 Facebook、Twitter 這樣的社交網站的一個簡單的插件。如果用戶訪問 facebook 或者 twitter，他會看到下面的頁面：
我沒有屏蔽 Google + :)
安裝 Yeoman
執行下面的命令安裝 yeoman。這個命令默認你已經安裝了 Node 和 Npm：
$ npm install -g yeoman上面的命令會全局安裝 yeoman。-g 選項是指明全局安裝的意思。如果你的機器上沒安裝 Grunt 和 bower，那么這個命令也會自動幫你安裝這兩個軟件。
GitHub
今天這個演示應用的代碼可以在 GitHub 上得到：github: day29-chrome-extension。
創建 Chrome 擴展程序
現在，在已經說過所需的基礎后，讓我們開始進行 Chrome 擴展程序的開發。
在你文件系統上便利的地方，為你的擴展程序創建一個目錄，然后把工作目錄轉到擴展程序目錄下。
$ 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. 最后，它詢問我們要給這個擴展怎樣的權限。請閱讀文檔了解更多的細節。
你可以像下面那樣安裝未打包的擴展程序到 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
總結
以上是生活随笔為你收集整理的Day 29：编写你的第一个 Google Chrome 扩展程序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Day 28： OpenShift的Ec
- 下一篇： Day 30: Play Framewo