第八屆 佳作

web
Chrome Extension 開發與實作
羅拉拉

系列文章

DAY 1

Chrome Extension 開發與實作 01-開始之前

目標 首先假定你已經熟悉Web開發所需的基礎知識。 接下來我們會了解Chrome Extension是什麼,熟悉他的組成零件及架構。 進一步,我們會比較詳細的...

DAY 2

Chrome Extension 開發與實作 02-官網導讀:快速打造一個chrome extension

快速的建立我們第一個 Chrome extension,這裡我們將了解一個extension最基本構成及其操作。 簡單的定義什麼是 Chrome extensi...

DAY 3

Chrome Extension 開發與實作 03-官網導讀:架構總覽Architecture Overview

進一步的說明什麼是Chrome Extension extension是一個HTML、CSS、JS、images,以及你extension中需要的任何東西,...

DAY 4

Chrome Extension 開發與實作 04-名詞定義:架構的組成部份

前面兩篇都是官網的新手教學,而這篇跟上一篇文章討論的東西(官網的overview)有點重複,我們將探索Creating  Google Chrome Exten...

DAY 5

Chrome Extension 開發與實作 05-腳本組件與擴充功能的執行階段

擴充套件與網頁的執行階段 基本上我們可以把Extension想成一個獨立的網站,他跟使用者載入頁面是完全獨立的兩個個體,擁有不同的執行階段,並且兩者之間只能籍由...

DAY 6

Chrome Extension 開發與實作 06-事件腳本與背景頁面

什麼是事件腳本 Extension的功能實作由於腳本之間無法直接進行溝通,所以非常依靠事件趨動來傳送訊息,處理操作邏輯,事件腳本可以被視為是Extension的...

DAY 7

Chrome Extension 開發與實作 07-內容腳本(content script)之臉書下雪了

什麼是內容腳本 內容腳本是在網頁的上下文中運行的JavaScript文件,它們可以通過標準的文檔對像模型(DOM)來獲得瀏覽器訪問的網頁的資訊,甚至可以對其DO...

DAY 8

Chrome Extension 開發與實作 08-輸入組件:瀏覽器按鈕與頁面按鈕

什麼是按鈕Action Chrome允許你設定一個icon在網址列的右側,當使用者點擊icon時,會展開一個由開發者自訂內容的彈出介面,來與使用者互動。而根據使...

DAY 9

Chrome Extension 開發與實作 09-啟用頁面按鈕

本篇請與上一篇一起服用。 什麼是頁面按鈕(Page Action) 頁面按鈕在啟用前,在右上角呈現黑白的狀態,在開發者設計的情景下才會啟用。對使用者來說,這樣可...

DAY 10

Chrome Extension 開發與實作 10-快捷鍵輸入組件 Shortcut Key or Commands

快捷鍵輸入組件的簡介 Chrome允許Extension設定多組快捷鍵,當這個快捷鍵被觸發時,可以處理對應的操作。快捷鍵設定使用Command API。 下圖展...