Chrome Extension笔记：typescript开发chrome插件时的类型提示

引入typescript就是为了有类型组织代码和静态检查开发起来会更爽的，结果发现默认情况下ts对于chrome extension的api识别不了，需要引入另外的类型库：

https://www.npmjs.com/package/@types/chrome

这个库定义了chrome扩展的api，使得在ts中能够进行chrome extension api的代码提示与静态检查，大大提高开发效率。

先为项目添加依赖：

01	yarn add @types/chrome -D

等待一会儿会自动安装完成，检查packet.json文件看下依赖是否已经被添加上了：

01 02 03 04 05 06 07 08 09 10 11 12 13

{     ...       "devDependencies": {         ...           "@types/chrome": "^0.0.96",                   ...     }       ... }

然后打开tsconfig.json文件，检查编译选项（compilerOptions）的types部分是不是有chrome类型，如果没有的话就添加上此类型：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

{     ...       "compilerOptions": {         ...           "types": [             ...                           "chrome",               ...         ],           ...       ... }

在content-script中调用chrome的api，能够有代码提示和静态类型检查：

01 02 03 04 05 06 07 08 09 10 11

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这个库以后应该用不到了。

.