Day 29：編寫你的第一個 Google Chrome 擴展程序

時間 2020-01-12

標籤 day 編寫第一個 google chrome 擴展程序欄目 Google 简体版

原文原文鏈接

編者注：咱們發現了有趣的系列文章《30天學習30種新技術》，正在翻譯，一天一篇更新，年終禮包。下面是第 29 天的內容。css

今天的《30天學習30種新技術》，我決定去學習如何寫一個 Chrome 擴展程序。在作了一些搜索以後，我發現一個 Yeoman 生成器能夠用來寫 Chrome 擴展程序。咱們在這篇要寫的擴展程序是一個能夠在工做時間內，把 Facebook、Twitter、LinkedIn 等等的社交網站屏蔽掉的插件。這篇文章不會說到 Yeoman 的基本知識，你能夠閱讀第 24 天的內容瞭解一下 Yeoman。
html

Chrome 擴展程序用例

咱們會寫一個在辦公時間內（早上 9 點到下午 6 點），禁止咱們訪問相似 Facebook、Twitter 這樣的社交網站的一個簡單的插件。若是用戶訪問 facebook 或者 twitter，他會看到下面的頁面：

我沒有屏蔽 Google + :)git

安裝 Yeoman

執行下面的命令安裝 yeoman。這個命令默認你已經安裝了 Node 和 Npm：github

$ npm install -g yeoman

上面的命令會全局安裝 yeoman。-g 選項是指明全局安裝的意思。若是你的機器上沒安裝 Grunt 和 bower，那麼這個命令也會自動幫你安裝這兩個軟件。web

GitHub

今天這個演示應用的代碼能夠在 GitHub 上獲得：github: day29-chrome-extension。chrome

建立 Chrome 擴展程序

如今，在已經說過所需的基礎後，讓咱們開始進行 Chrome 擴展程序的開發。npm

在你文件系統上便利的地方，爲你的擴展程序建立一個目錄，而後把工做目錄轉到擴展程序目錄下。json

$ 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. 最後，它詢問咱們要給這個擴展怎樣的權限。請閱讀文檔瞭解更多的細節。segmentfault

你能夠像下面那樣安裝未打包的擴展程序到 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