VueでChrome拡張機能を作る際、Chromeオブジェクトが無くてエラーになる

Question

Vue-cli を使ってChrome拡張機能を作成しようとしています。

単一ファイルコンポーネントの中で、

chrome.tabs.update({ url: "chrome://bookmarks" })

のように chrome オブジェクトを使用すると、

Cannot find name 'chrome'. Did you mean the instance member 'this.chrome'?

のようにエラーで怒られます。

// eslint-disable-line しても怒られるので、ESlintのエラーではなく、Vue-cli自体がエラーをはいているようです。当然といえば当然なのですが、ビルドしてChrome拡張機能として使う際には Chrome がグローバルオブジェクトにいるはずなのです。

vue-cliのエラーを無視してそのままのJavaScriptとしてビルドさせる方法はないでしょうか...。

Answer 1

自己解決しました。Vue-cliというか、TypeScriptの型定義エラーだったようです。

npm install --save-dev @types/chrome

して、

tsconfig.jsonに

"types": [
//(various types, e.g. jquery, core-js),
"chrome"
]

を追記するとうまくいきました