Fork me on GitHub

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


.

posted @ 2020-02-23 17:20  CC11001100  阅读(3422)  评论(1编辑  收藏  举报