Udemyのページ上に情報を追加するChromeの拡張機能を作った
Udemyのページ上に情報を追加するChromeの拡張機能を作りました。
名前はなんのひねりもありませんが「Udemy - complement course data」としています。
https://github.com/ryo-fujinone/udemy-complement-course-dataコースの作成日と最終更新日、またコースがUdemy Businessコンテンツコレクション(Udemy Businessで受講可能なコース)に含まれているかどうかを各ページに表示させたかったため、これを作りました。Vite、React、CRXJSを使用しています。Redux Toolkitも使用しました。
対象ページはコースページ、検索結果ページ、講師のユーザーページです。
最終更新日に関しては元からコースページには項目が存在していますが、年と月しか表示されないのが気に入らなかったので日付もちゃんと表示するようにしました。
この拡張機能ではIBM SkillsBuildユーザー用のUdemyのページをUdemy Businessのページと見なしています。Udemy Businessで受講可能な場合にはSkillsBuildのコースリンクを表示するようにしています。検索結果ページではコースの画像部分をSkillsBuildのコースリンクにします。
SkillsBuildの講師のページにはコース一覧が無いため、その講師が公開しているコースの中からUdemy Businessコンテンツコレクションに含まれているコースのみを抽出して表示するようにもしています。
SkillsBuild、Udemy Businessを利用していない人のことも考慮し、設定でUdemy Business関連の処理は無効に出来るようにしています。
検索結果ページではAPIから取得した結果をキャッシュとして保存出来るようにしています。各コースの情報のリストを返すAPIのパラメータの設定が面倒だったので、検索結果ページでも特定のコースの情報を返すAPIを使用する方法を採用したのですが、結果として検索結果ページで毎回最大20回のリクエストが飛ぶことになり、それが気に入らなかったためキャッシュを採用しました。キャッシュは拡張機能の設定同様にchrome.storage APIを使用します。設定でキャッシュの有効期間を変更可能です。デフォルトは48時間です。
Reactは設定画面とSkillsBuildの講師のページでの表示に使用しています。コースページと検索結果ページ、www.udemy.comの講師のページでの表示はReactを使って書くとかえって面倒そうだったのでReactは使っていません。
chrome.storage.local.setでの設定の保存は、Redux Toolkitのミドルウェアでreducer実行後にやるようにしています。元々は別の場所にuseEffectを使って設定変更の度に保存を実行する処理を書いていたのですが、設定の変更をRedux Toolkitで管理しているので、保存処理を書く場所はミドルウェアの方が適しているのかなと思いそのように実装しました。これで良いのかは分からない。
とりあえず、なんとか形にはなったので良かったです。
ReactやRedux Toolkitを使った拡張機能の開発は初めてでしたが、なんとかなるもんですね。
Chromeウェブストアでの公開は、Udemy BusinessというかSkillsBuild関連の部分がちょっとニッチすぎるかなという感じがしているので今のところは考えていません。何か別の拡張機能を作ったら、その時に合わせてこれもウェブストアで公開するかも。