[笔记] 初次开发 Google Chrome 套件时要注意的事项

章节连结

前几天在修复过往开发的 Google Chrome 套件。不过在 VS Code 使用 Live Server 之类的套件开启 Hot Reload 预览时,会在取用 Chrome API 的资料环节出现 Cannot read property of undefined 的错误。这边笔记下原因,以及替代 Hot Reload 的方案。
google chrome


原因

因为 Google Chrome 相关的 api,需要套件实际被加载到 Google Chrome 中运行时,才能够正常存取资料。因此,用 Live Server / Browser Sync 之类的 Hot Reload 套件,并没有实际加载套件到 chrome 里,所以无法存取如 chrome.tabs 之类的 api。

解法

1. 在“更多工具→扩充功能”的选项中,右上角开启“开发人员模式”
google-chrome-extensions-common-issues-

2. 点选“加载未封装项目”,并选择你的开发套件所存放的资料夹,此时你就会看到套件已经成功加载
3. 每次有新修改的结果时,别忘记来“扩充功能”的选单内,重新加载你的套件 ( 在开启 / 关闭的开关旁,有一个重新整理的图示 )


参考资料

1. 如何将 Google Chrome 已安装的扩充功能汇出、备份为 .CRX 档案?
2. “Cannot read property of undefined” when using chrome.tabs or other chrome API in content script


按赞加入粉丝团

延伸阅读