iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
1
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 1

Chrome Extension 01 - 前言 + HelloWorld

每天使用的瀏覽器最多的就是 Chrome, 也裝了一大堆有的沒有的 Chrome Extension。
為了讓自己更熟悉 Chrome Extension,所以想要在 30 天做幾個可以縮短一些操作的 Chrome Extension ,提高一些工作效率。

先付上官方文件 : https://developer.chrome.com/extensions

相關資源 :

Day 1 : Hello World

目標 :建立一個沒有功能,只會顯示 Hello World 的 Chrome Extension
https://ithelp.ithome.com.tw/upload/images/20181016/20094223b34bSbT2iQ.png

檔案如下 :
https://ithelp.ithome.com.tw/upload/images/20181016/20094223azHe38Whoa.png

  • manifest.json 檔案,定義應用程式的權限與相關設定
  • 會有 3 個不同尺寸的 icon
  • popup.html 頁面,就是上面顯示 Hello World 的頁面

那我們就開始了 !

使用 Visual Studio Code 建立 manifest.json 檔案

{
    "manifest_version" : 2, //執行的版本,Chreome 18 以上版本使用 2
    "name" : "Hello World", //名稱
    "version" : "1.0", //當前版本
    "description" : "A hello world extension", //描述
    "icons":{ //icon
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "browser_action" :{ //瀏覽頁面
        "default_icon" : "icon16.png",
        "default_popup" : "popup.html"
    }
}

然後建立 popup.html
頁面 popup.html 就是顯示 Hello World 的部分,只是簡單的 HTML

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <title>Title Page</title>
    </head>
    <body>
        <h1 class="text-center">Hello World!</h1>
    </body>
</html>

icon16.png 等圖示部分,則直接去免費的 icon 圖庫下載 ,如 https://www.iconfinder.com/

最後,開啟 Chrome ,在 Chrome 瀏覽器的網址列輸入 chrome://extensions 進入擴充功能的管理頁面,選擇[載入未封裝項目]
https://ithelp.ithome.com.tw/upload/images/20181016/2009422389gtQlPxwD.png
選擇檔案所在資料夾後,便會被載入
https://ithelp.ithome.com.tw/upload/images/20181016/20094223NHp6SLrxfU.png

點擊右上角的 icon 圖示,便會出現 Hello World 字樣
https://ithelp.ithome.com.tw/upload/images/20181016/20094223pzyie4TgJc.png

從明天開始暫定以寫出 ToDoList 為目標,感謝大家收看!


下一篇
Chrome Extension 02 – 在博客來搜尋書
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言