Chrome Extension也就是Chrome瀏覽器的擴充功能,像是常見的AdBlock就是眾多的擴充功能之一。
今天主要是紀錄一個我自己在學Chrome Extension所寫的第一個例子,作用是「當我按下右上角的擴充功能的按鈕時它會Show出當前網頁的網址」。
參考網頁:(1)https://developer.chrome.com/extensions (Google提供的教學及技術文件,十分詳細)
(2)http://www.cnblogs.com/guogangj/p/3235703.html (Extension開發攻略)
這個例子需要的程式有6個檔案,會使用到HTML、CSS、JavaScript以及JQuery
1. icon.png
(Chrome右上角 所顯示擴充功能的圖示,個人推薦圖片可至https://design.google.com/icons/搜尋)
2. manifest.json(關於這個擴充功能的版本、功能、圖示的匯入、權限等資訊)
3. popup.html(Chrome右上角按下去所彈出來的畫面)
4. popup.css(設計popup.html外觀的CSS檔)
5. popup.js(Show出當前網頁的網址所需要的程式碼,並在popup.html檔中載入)
6.jquery-3.1.0.min(JavaScript Library,可至官網下載https://jquery.com/)
程式碼如下
manifest.json
manifest→版本為2,Chrome 18開始已不支援version 1
name→此擴充程式的名字
description→此擴充程式的描述
version→此擴充程式的版本
browser_action
↑所有頁面,右上角的圖示都會顯示,如只針對部分網頁顯示要使用Page_Action
default_icon→右上角圖示
default_popup→彈跳出來要顯示的html
permissions": ["tabs"]→允許擴充程式擁有那些權限
popup.html
popup.css
popup.js
將這4個檔案、圖片Icon以及下載下來的jquery-3.1.0.min,放在同一個資料夾,參考這篇文章Chrome中使用自己撰寫的擴充功能,丟到Chrome上,測試這個簡單的Chrome Extension!
執行畫面
執行畫面