Chrome、Edge瀏覽器插件（PlugIn）撰寫初體驗

沒有寫過瀏覽器的插件（PlugIn）程式，嘗鮮一下並順手紀錄在此，日後有需要的時候可以快速回憶基礎架構。

最基本的瀏覽器插件理論上需要三種檔案元素

1. manifest.json 組態檔

2. icon 圖示檔（其實非必要，請自己找一個好看的128X128之PNG圖檔即可）

3. 主要運作Javascript程式碼

manifest.json組態檔

{
  "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"] //要執行的主要運作程式碼
    }
  ]
}

主要運作Javascript程式碼

這個實驗性的插件一點意義也沒有，主要就是看到當使用者尋訪台灣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除錯，可以在擴充功能頁面中屬於你的插件處，找到「重新載入」字樣，請善用這個連結來載入你修正過後的程式碼用以測試。