ChromeExtensionって、ネット上の情報が少ない気がします。そんな訳で、Javascript＆ChromeExtention歴２ヶ月ほどですが役に立った知識を羅列していこうと思います。間違いがあったら教えて下さい。そんなこと知ってるわ！みたいなことがあっても許してください。前提条件として下記のことが挙げられます。
・ECMAScript6環境です。
・JavaScriptの知識もあれば、Extension固有の知識もあります・
・chrome.storageを使ったデータベース風なclassを作っていて、そこで躓きまくったので、classに関する話がほどんどです。
Background.jsではexport/importが使えない
Background.jsは裏に見えないウインドウを展開して、その中でJavaScriptの処理を行うらしいので、基本的には普通のブラウザと同じようにプログラミングして問題ありません。故にasync/awaitとかも使えるんですが、export/importだけは使えません。原因はわかりませんが、クラスを作ってそれでデータのやり取りをするときに困りました。
対策
exportはmanifest.jsonで予めexportしたいファイルを読み込みます。ポイントはbackground.jsより先に読み込みたいファイルを書くことです。
"background": {
"scripts": ["js/test.js", "js/test.js", "js/background.js"],
"persistent": false
},
importはhtml上で普通に先に読めこめば使えますが、Background.jsでしか使わない関数があったりするので、エラーの原因になりやすくあまりおすすめできません。故に、読み込むよりは共通部分を抜き出してjsファイルにして、先の方法で共通化したjsファイルをbackground.jsに読み込む方が早いと思います。
classのコンストラクタではawait/asyncが使えない。
ChromeAPIsは基本何でもコールバック内で処理をさせようとします。故に、かなりの頻度でasync/awaitを使うことになりますが、コンストラクタ内では使えません。
対策
staticなinit(初期化）関数を作って、擬似的なコンストラクタとして運用します。privateとかのアクセス修飾子がないので、きちんとコメント書いておかないと事故に繋がります。擬似的にprivateにする方法もあるようですが、可読性が下がる気がして個人的にあまり好きではないです。
class Test {
//このコンストラクタは使わない
constructor() {
this.name = "amuza";
};
//コンストラクタの代わりにこちらを使う
static async init() {
const test = new Test();
this.name = await changeName();
return test;
};
async changeName(){ /*中略*/ };
}
class内では定数が作れない
ChromeExtensionの情報保存手段として、chrome.storageというAPIがあります。JSON形式で保存するのでkeyが必要になります。でも設定とかを保存するので、毎回決まったkeyを使います。そのためkeyが定数だとタイプミスの可能性が減り、プログラムの完成度が上がります。でも、class内ではconstが使えません。
対策
getterを使うことで読み込み専用のプロパティを作り、定数として運用します。
class Test{
static get GREETING() {
return "greeting";
};
saveGreeting(){
const obj = {[Test.GREETING]: "hello"};
chrome.storage.sync.set(obj, () => {
if (chrome.runtime.lastError) {
return ;
} else {
resolve(objectPlusKey);
}
});
});
}
最後に
多分今後も色々気づきがありそうなので、その都度加筆するか新しい記事を書きます。あと、１月末くらいまでにはChromeExtentionが一つリリースできそうなので、試してみていただけたら幸いです。リリース時には多分Twitterで告知します。なので、フォローしてくださったらとても嬉しいです。（欲張りな告知）
参考文献
https://qiita.com/guru_taka/items/37a90766f4f845e963e5
https://qiita.com/k7a/items/26d7a22233ecdf48fed8
https://qiita.com/noriaki/items/e7adaaf440020fbf6836