Front End 101 網頁前端入門

講師：張凱迪（KD Chang）

Chrome Extension 實戰

Copyright © 2016 All rights reserved

Outline

一、開啟專案建置文件架構

二、Chrome Extension 簡介

三、函數 / 事件處理 / 日期物件

四、Ajax 非同步資料傳輸 / JSON

五、案例實作

開啟專案建置文件架構

檔案結構

一個 Chrome Extension 由一個 manifest.json 和其他網頁檔案組成，

檔案結構約如左圖

動手實作

Chrome Extension 簡介

什麼是 Chrome Extension ?

Extensions are small software programs

Modify and enhance the functionality of the Chrome browser

Write in HTML, JavaScript, and CSS !

按這看更多

Manifest File Format

{
    "name": "台灣風景分頁(Taiwan New Tab)",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "分享台灣的美好風景",
    "short_name": "台灣風景分頁",
    "icons": {
        "16": "images/icon-16.png",
        "128": "images/icon-128.png"
    },
    "background": {
        "scripts": [
            "scripts/background.js"
        ]
    },
    "chrome_url_overrides": {
        "newtab": "index.html"
    },
    "permissions": [
        "http://*/*",
        "https://*/*"
    ]
}

Manifest File Format

  // 必要
  "name": "Extension",
  "version": "0.0.1",
  // 一個代表 manifest file 格式版本的整數，如果使用的是 Chrome 18 以上，則應該設定成 2。 
  "manifest_version": 2,

  // 建議填寫
  "description": "A plain text description",
  // 建議使用 .png 檔案。128x128：安裝時使用，48x48：在 chrome://extensions 裡顯示，16x16：favicon  
  "icons": { ... },

  "default_locale": "en",

  // 選填
  "chrome_url_overrides": {
    "newtab": "index.html"
  },

按這看更多

架構簡介

Background Pages

{
  ...
  "background": {
    "scripts": ["background.js"]
  },
  ...
}

Background Pages

{
  ...
  "background": {
    "page": "background.html"
  },
  ...
}

架構簡介

運用 browser action 定義 popup.html

UI Action 類型

Browser Action (常駐工具列)

{
  ...
  "browser_action": {
    "default_icon": "icon.png",     // 選擇性
    "default_title": "Popup title", // 選擇性
    "default_popup": "popup.html"     // 滑鼠點擊呈現內容
  },
  ...
}

Browser Action (常駐工具列)

Page Action (特定頁面啟用)

{
  ...
  "page_action": {
    "default_icon": "icon.png",     // 選擇性
    "default_title": "Popup title", // 選擇性
    "default_popup": "popup.html"     // 滑鼠點擊呈現內容
  },
  ...
}

Page Action (特定頁面啟用)

Content Script

可以在瀏覽頁面裡面嵌入 JavaScript，可以透過 DOM 得知使用者目前瀏覽的頁面的內容，甚至可以修改頁面內容。

應用：去除廣告

{
  ...
  "content_scripts": [
    {
      "matches": ["http://www.facebook.com/*"],
      "css": ["main.css"],
      "js": ["jquery.js", "main.js"]
    }
  ],
  ...
}

函數 / 事件處理 / 日期物件

函數

    // initializeClock
    function initializeClock() {
        var timeinterval = setInterval(function() {
            var now = new Date();
            $('#clock-font').html(formatAMPM(now));
        }, 1000);
    }

事件處理

    // toogle search bar
    $('#navbtn').on('click', function() {
        $('#input-block').toggle();
    });

日期物件

    // transfer AM/PM
    function formatAMPM(date) {
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var ampm = hours >= 12 ? 'PM' : 'AM';
        var strTime = '';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
        return strTime;
    }

Ajax 非同步資料傳輸 / JSON

Ajax 非同步資料傳輸

        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: url,
            success: function(response) {
                consoel.log(response)
            },
            error: function(e) {

            }
        }).done(function() {
            // hide the loading bar as loading over
            $('#loading-block').hide();
        });

JSON

{
     "name": "John",
     "sex": "male",
     "age": 25,
     "address": 
     {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": "10021"
     },
     "phoneNumber": 
     [
         {
           "type": "home",
           "number": "212 555-1234"
         },
         {
           "type": "fax",
           "number": "646 555-4567"
         }
     ]
 }

案例實作

張凱迪（KD Chang）