[譯] 第二十九天：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>