Chrome Extension笔记:typescript开发chrome插件时的类型提示
引入typescript就是为了有类型组织代码和静态检查开发起来会更爽的,结果发现默认情况下ts对于chrome extension的api识别不了,需要引入另外的类型库:
https://www.npmjs.com/package/@types/chrome
这个库定义了chrome扩展的api,使得在ts中能够进行chrome extension api的代码提示与静态检查,大大提高开发效率。
先为项目添加依赖:
yarn add @types/chrome -D
等待一会儿会自动安装完成,检查packet.json文件看下依赖是否已经被添加上了:
{ ... "devDependencies": { ... "@types/chrome": "^0.0.96", ... } ... }
然后打开tsconfig.json文件,检查编译选项(compilerOptions)的types部分是不是有chrome类型,如果没有的话就添加上此类型:
{ ... "compilerOptions": { ... "types": [ ... "chrome", ... ], ... ... }
在content-script中调用chrome的api,能够有代码提示和静态类型检查:
public static async sendMessage(message: Command<any>): Promise<any> { return new Promise((resolve, reject) => { chrome.runtime.sendMessage(message, (result: CommandExecResult) => { if (result.isSuccess) { return resolve(result.payload); } else { return reject(result.payload); } }); }); }
同样的类型库还有一个@types/chrome-apps,不过google即将要放弃掉chrome apps了,@types/chrome-apps这个库以后应该用不到了。
.