mermaidの図を表示してくれるchrome拡張機能
背景
最近だと、Githubがmermaid記法に対応しました。
ただ、現在でも、mermaid記法に対応していないサービスはいくつかあります。
そのため、どのサービスでもmermaid記法を図で確認できるように、chrome拡張機能を作成しようと思いました。
※ 作った後に気づいたのですが、すでに以下の拡張機能が存在しているようです。
もし、私と同じ悩みをお抱えの方は、以下の拡張機能の使用をご検討ください。
完成図
作成コード
使用技術
- React
- Typescript
- Webpack
- Sass
使用chrome機能
- content_script
- sidepanel
- background
※ content_script → sidepanelへのメッセージパッシングは、content_script → popupと同じやり方でできるよう。
処理フロー
主に、chromeのcontent_scriptとsidepanelを用いて実現しました。
流れは、以下のよう。
サイドパネル(sidepanel)とは？
サイドパネルとは、2022年3月頃に導入された、ブラウザ右上の四角アイコンを押下した際に開かれるパネルのこと。
Google公式 サイドパネルの説明
最近だと、chromeの拡張機能でサイドパネルを使用できるようになったようです。
chrome.sidePanel
参考記事