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這個庫以后應該用不到了。

.