Front End 101 網頁前端入門

講師:張凱迪(KD Chang)

Chrome Extension 實戰

Copyright © 2016 All rights reserved

Outline

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

 

二、Chrome Extension 簡介

 

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

 

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

 

五、案例實作

開啟專案建置文件架構

檔案結構

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

檔案結構約如左圖

動手實作

建立新的資料夾,打開 Sublime 後開啟資料夾

於專案列建立 images, styles, scripts 資料夾

於根目錄建立 index.html 和 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 Page 常駐在背景,有可能是一個 HTML 或者 JavaScript 檔,定義邏輯部分,並透過 API 與 UI(browser actions 或 page actions)做溝通。

Background Pages

引入 JS ,將邏輯寫在裡面,為常駐程式

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

Background Pages

引入 HTML,可以引入多個 JS 檔案

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

架構簡介

UI Pages

Chrome Extension 的 UI 介面使用的是 HTML

運用 browser action 定義 popup.html

UI Action 類型

Browser Action (常駐工具列)

Page Action (特定頁面啟用)

Desktop Notifications (通知)

Omnibox (搜尋框旁小工具)

Override Pages (覆蓋頁面/新頁面)

Context Menu (右鍵選項單)

Browser Action (常駐工具列)

適合在需要一個常駐的功能放在 Chrome 工具列時使用,可以加上 tooltip、badge(訂閱RSS更新、信件數量) 和 popup

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

Browser Action (常駐工具列)

popup 範例

Page Action (特定頁面啟用)

類似 browser action,最大差異在於 page action 用於特定網頁才需要的功能,由於 browser action 常駐時會佔用一部份的記憶體。若是針對特定頁面如擋 Facebook,偵測 RSS 建議使用 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

JSON(JavaScript Object Notation)是一種由輕量級的資料交換語言,以文字為基礎,且易於讓人閱讀。

{
     "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)

[Front End 101] Chrome Extension 範例實戰

By 張凱迪(KD Chang)

[Front End 101] Chrome Extension 範例實戰

101一般是國外入門課程的課程代號,希望藉由這次的 Front End 101 Workshop 能讓對於網頁前端程式設計有興趣的朋友可以有一個和藹可親的入門管道,啟發學習興趣並認識志同道合的朋友。工作坊目標希望帶大家從基礎開始,最後完成一個瀏覽器外掛(extenstion)!

  • 1,420
Loading comments...

More from 張凱迪(KD Chang)