前幾天在修復過往開發的 Google Chrome 套件。不過在 VS Code 使用 Live Server 之類的套件開啟 Hot Reload 預覽時，會在取用 Chrome API 的資料環節出現 Cannot read property of undefined 的錯誤。這邊筆記下原因，以及替代 Hot Reload 的方案。
原因
因為 Google Chrome 相關的 api，需要套件實際被載入到 Google Chrome 中運行時，才能夠正常存取資料。因此，用 Live Server / Browser Sync 之類的 Hot Reload 套件，並沒有實際載入套件到 chrome 裡，所以無法存取如 chrome.tabs 之類的 api。
解法
1. 在「更多工具→擴充功能」的選項中，右上角開啟「開發人員模式」
2. 點選「載入未封裝項目」，並選擇你的開發套件所存放的資料夾，此時你就會看到套件已經成功載入
3. 每次有新修改的結果時，別忘記來「擴充功能」的選單內，重新載入你的套件 ( 在開啟 / 關閉的開關旁，有一個重新整理的圖示 )
參考資料
1. 如何將 Google Chrome 已安裝的擴充功能匯出、備份為 .CRX 檔案？
2. “Cannot read property of undefined” when using chrome.tabs or other chrome API in content script
