嗨各位,我是 Robin
今天想跟大家分享如同標題,
到底什麼是 Chrome Extension?
不知道各位有沒有在 Chrome 線上應用程式商店 搜尋過一些工具?
像我比較常用的話...
當然是邊上班邊看影片,
並且能在各個網頁都能看到 cc 字幕的擴充 CCViewer啊!
好啦這是我很久以前寫的擴充,充滿時代的眼淚,也不敢回頭看原本怎麼寫xDD (會再找時間重構的),原本想更多的無情工商,可是怕被檢舉
我個人實質比較常用的... xDD
比方說不想看廣告用 ADblock
,
或是英文菜雞用Google翻譯
,
或是英文文法菜雞用 Grammarly
,
這些就是 Chrome Extension
啦~
以上是我自己比較常用的Chrome擴充啦xDD
聽到這邊你是不是覺得
今天我就要帶領你學習如何製作第一個你的擴充。
開始之前來看看 Chrome Extension 的架構長怎樣呢?
畫了一張圖如下
看完是不是還是沒有頭緒xD
這並不難,請讓我跟你簡單的解釋。
名字
, 需要的權限
或是要做的動作之類的。DOM
,就像是你打開 F12 的 devtools
在 console
下 scripts 一樣,在這邊你可以任意的操作你看到的網頁(開始動手做~
manifest.json
。
{
"name": "Hello Extensions", //你也可以改成你喜歡的名字
"description": "Base Level Extension", // 敘述你這擴充的用途之類的
"version": "1.0", // 擴充的版本
"manifest_version": 3 // manifest 版本(以前是2)
}
hello.html
。
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
hello_extensions.png
或是其他你想要的名字。mainifest.json
知道要做什麼吧~
{
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png" // 你的 icon 檔案名稱
}
}
接著我們來看看成果
打開管理擴充功能
點選載入未封裝項目
選擇你的目錄
在管理擴充可以看到你寫的擴充
擴充列表也會顯示 (可以將它釘選)
點選擴充
恭喜你成功完成你的第一個擴充~
還沒完,我們把它加上快捷鍵吧~
manifest.json
並增加以下內容。 "commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
重新載入你的擴充
使用快捷鍵呼叫你寫的擴充
以上是今天的內容,
感謝各位觀看
我們明天見
短期目標達成xDDD