沒有寫過瀏覽器的插件(PlugIn)程式,嘗鮮一下並順手紀錄在此,日後有需要的時候可以快速回憶基礎架構。
1. manifest.json 組態檔
2. icon 圖示檔(其實非必要,請自己找一個好看的128X128之PNG圖檔即可)
3. 主要運作Javascript程式碼
{ "manifest_version": 3, "name": "APP名稱", "description": "APP說明", "version": "1.0", //APP版本 "icons": { "128": "icon128.png" //APP圖示 }, "content_scripts": [ { "matches": ["https://www.google.com.tw/"], //APP要應用到的目標網址 "js": ["script.js"] //要執行的主要運作程式碼 } ] }
這個實驗性的插件一點意義也沒有,主要就是看到當使用者尋訪台灣GOOGLE首頁,且經過五秒鐘後沒有輸入任何搜尋字眼,就直接尋找搜尋框中插入台灣地區時間之字串,然後送出這個表單,利用Google內建的機制在標題顯示出台灣現在的時間。將下列Javascript程式碼存成檔名為「script.js」。
let iSecond = 5; console.log(`${iSecond}秒後啟動自動查詢台灣時間`); window.setTimeout(function () { var oSearch = document.querySelector("input[type=text]"); oSearch.value = "Taiwan Local Time"; var oForm = document.querySelector("form"); oForm.submit(); }, iSecond * 1000);
將三個檔案manifest.json、icon128.png、script.js存放到一個名為MyPlugInTest的資料夾中,並在瀏覽器網址列輸入edge://extensions/(或 chrome://extensions/),就可以進入到瀏覽器的擴充功能。
進入後點選「載入解壓縮」指定到MyPlugInTest資料夾並確認,就可以看到你寫的插件(PlugIn)被載入了,此時訪問台灣Google首頁應該可以看到console跳出相關訊息,五秒後就被form submit到搜尋結果頁面。
若要進行插件的Javascript除錯,可以在擴充功能頁面中屬於你的插件處,找到「重新載入」字樣,請善用這個連結來載入你修正過後的程式碼用以測試。
Browser Chrome Edge Chromium PlugIn Plig-In Basic Intro Introduction