Angular 11 Web应用调用chrome.runtime返回undefined问题求助

核心原因 #

你遇到的chrome.runtime为undefined的问题和TS类型声明无关，本质是运行环境的API权限问题：

• 你安装的@types/chrome、添加的/// <reference types="chrome" />都只是TS的类型定义，仅用于编译阶段的类型校验，不会给运行环境增加任何实际的API能力
• 普通Web页面运行在Chrome浏览器的沙箱环境中，默认只会暴露极少数Chrome内置API（也就是你打印出来的app、loadTimes、csi这几个），不会开放Chrome扩展专属的chrome.runtime等完整API，所以该属性自然为undefined

对应解决思路 #

场景1：你要开发的是Chrome扩展/Chrome应用，Angular是扩展的内置页面 #

你当前的运行方式错误，需要按Chrome扩展的规范部署：

• 完成Angular代码开发后执行编译打包，在产物目录下补充符合Chrome扩展规范的manifest.json配置文件
• 打开Chrome的chrome://extensions/页面，开启开发者模式后选择「加载已解压的扩展程序」，选中刚才的产物目录
• 从扩展的对应入口（比如popup、后台页、自定义新标签页）打开Angular页面，此时Chrome会自动给扩展页面注入完整的Chrome API，chrome.runtime即可正常访问

场景2：你要在普通公开Web页面中调用chrome.runtime能力 #

Chrome不会给普通Web页面开放该权限，你需要调整实现方案：

• 自己开发配套的Chrome扩展，在扩展的内容脚本（content script）中调用chrome.runtime相关能力
• 普通Web页面通过postMessage和页面内注入的内容脚本通信，由内容脚本中转调用浏览器API后再把结果返回给Web页面

内容的提问来源于stack exchange，提问作者noninertialframe