最近(落とし穴にも)ハマったブラウザ拡張

最終更新日：2022年08月24日

• 技術

コピーしました

こんにちは。　せしょうです。

今回はブラウザ拡張機能について(落とし穴にも)ハマったという話をさせていただきます。

ハマった理由としては、最近仕事でブラウザ拡張をManifest V2からV3に修正する作業があったという単純な理由ですが...笑

実際触ってみて、色々と便利なものが作れそうだなと思いました。

1. ブラウザ拡張とは？

ブラウザ拡張とは、ブラウザを利用するうえで特定の機能を追加するためのツールのことを指します。

Gluegent Flowや共有アドレス帳などにも、ブラウザ拡張がありますね！

Gluegent Flow

共有アドレス帳

他にも有名なところでは、Gmailを開かなくても 未読の件数が分かったり、とても便利なツールが多いですよね。

今回はそんなブラウザ拡張について、「ハマった落とし穴」 と 「個人的に作ってみたもの」について話そうと思います。

2. ブラウザ拡張を 自作する際にハマった落とし穴

ハマったものとしては、以下の３点です。

1. javascriptの関数の書き方
2. 非同期処理
3. Manifest V3

javascriptの関数の書き方

まずは、単純にjavascriptの文法です。中でもアロー関数を初っ端見た時(・∀・)??となりました。 絶対初心者〇し！！

下の二つの書き方は、どちらも sample関数として成り立ちます。

// functionを用いる書き方
function sample(){
    // processing
}
 
// アロー関数での書き方
let sample = () => {
    // processing
}

また、宗教派閥が出来そうなことを...

実際は 書き方以外にも、thisの扱い方が違うなどの違いもあるので注意は必要です。

※ ここでは、thisについての説明は省かせていただきます。

因みに私は、アロー関数を知ってからは、出来るだけアロー関数を用いて書いています。

非同期処理

これに関しても上記のと同じパターンですね。

私は、入社するまでJSのお作法を知らなかったので色々とネットで調べたんですが、非同期処理の方法が色々と種類があって　これも(ﾟ_｡)?となりました。

結局は、以下の ３種類の方法がだけだったんですが...笑

• Promise/ then catch
• async/ await
• callback

特にPromiseに関しては、 then内での結果を外で受け取ろうと何回も試行錯誤したのを覚えてます。then等でチェーンリンクをしていかなければいけないのに... どうにかして出せないかと調べていました。

最後には、async/awaitで解決できることを知って、色々と数珠繋ぎで理解していくことができました。

非同期処理が文法の中で理解が一番難しいところでした。

Manifest V3

ほとんどのことは、公式サイト

に移行方法は書いてあるのですが、如何せん初めてのことが多く大変でした。

特に service_worker(background.js)が永続的な処理を前提に書いてあり、気づかずに二重実行が起きてる！！ みたいなことがあったりして 落とし穴にハマってしまいました。笑

3. 最近作ったもの

そんな、落とし穴のハマりポイント(自分だけかも)が多数ある中、せっかくなんで自分でも何かツールを作ってみようかなと思いまして

工数の時間を管理するようなブラウザ拡張を作りました。

作った理由としては以下の三点が大きかったので作ってみました。

• 工数の種類が複数
• 私は６つほど入力できる工数があって、工数ごとの時間は覚えられない
• 入力が分単位で、そこまで細かい時間を覚えられない...
• 毎回時間を測れない
• 仕事に集中してると中々 時間なんて気にできない。
• ブラウザを開いて仕事をすることが多い

※ 現在、Google Chrome拡張機能として公開してないので、まだ私しか使えないです

実際できたもの