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

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


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


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

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


ブラウザ拡張とは?

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


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

Gluegent Flow

共有アドレス帳


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


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

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

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

  1. javascriptの関数の書き方

  2. 非同期処理

  3. Manifest V3

javascriptの関数の書き方

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


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

// functionを用いる書き方

function sample(){

    // processing

}

 

// アロー関数での書き方

let sample = () => {

    // processing

}

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

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

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


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

非同期処理

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

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


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

  • Promise/ then catch

  • async/ await

  • callback

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

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



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

Manifest V3

最後はブラウザ拡張のManifest Versionについてです。

いよいよ、ブラウザ拡張のManifestバージョンの移行期限(2023/1)まで残り半年を切りました。

Manifest V2からV3に移行するにあたって、色々と変更点があってハマりポイントがいくつもありました。


  • service_worker(background.js)が永続的な処理ではなくなったこと。

  • chrome.extension.getBackgroundPage()が使えなくなったこと。

↑  content_scriptからservice_workerの呼び出し処理どうするねーん。

  • chrome.i18n.getMessage(国際化)ができなかったこと。

※現在は使用可能となりました。

などなど


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


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

3.  最近作ったもの

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

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



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

  • 工数の種類が複数

    • 私は6つほど入力できる工数があって、工数ごとの時間は覚えられない

    • 入力が分単位で、そこまで細かい時間を覚えられない...

  • 毎回時間を測れない

    • 仕事に集中してると中々 時間なんて気にできない。

  • ブラウザを開いて仕事をすることが多い

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

実際できたもの

動作

コンテキストメニュー

コンテキストメニューからも操作可能

毎回、退勤を打刻する際に、各工数を入力する際はポップアップ画面で見れるようになり少し便利なツールが作れたかなと思っています。

まとめ

今回はブラウザ拡張のお話を書かせていただきました。


実際ブラウザ拡張を入れると便利ですし、無いものは作っちゃえ精神で作ると結構面白いと思います。この記事を見て面白いなと思った方は、ぜひブラウザ拡張の自作にチャレンジしてみてください。


以上、読んでいただきありがとうございました。また次回の記事でお会いしましょう。