今天的《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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
