前幾天在修復過往開發的 Google Chrome 套件。不過在 VS Code 使用 Live Server 之類的套件開啟 Hot Reload 預覽時，會在取用 Chrome API 的資料環節出現 Cannot read property of undefined 的錯誤。這邊筆記下原因，以及替代 Hot Reload 的方案。
![[筆記] 初次開發 Google Chrome 套件時要注意的事項](https://smlpoints.com/wp-content/uploads/guide-how-to-make-your-google-extension-with-a-few-steps-1.jpg "[筆記] 初次開發 Google Chrome 套件時要注意的事項")
原因
因為 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
