<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p>こんにちは。実務が始まって 3 週間ほどのまよねーづです。<br>
みなさんは Chrome 拡張機能の開発をしたことがありますか？</p>
<p>自分は過去に 1 度つくったことがあるのですが、素の <code>HTML / CSS / JS</code> のみで開発したり、海外の方の <code>React / TypeScript</code> のテンプレートをクローンして、<code>CSS Modules</code> を使って開発することしかありませんでした。</p>
<p>せっかくだし Chrome 拡張も自分の好きな技術を使いたいなと思い、下記スタックで今回挑戦して作ってみました。</p>
<ul>
<li>Next.js</li>
<li>TypeScript</li>
<li>Tailwind CSS</li>
</ul>
<p>今回は上記スタックで Chrome 拡張機能を作り、その副産物として<strong>テンプレートリポジトリを作成したので、それの紹介記事</strong>です。</p>
<p>手軽に Chrome 拡張を作りたい人は、是非今回紹介する ↓ のテンプレートリポジトリをご活用ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a3b9525598dc4" src="https://embed.zenn.studio/card#zenn-embedded__a3b9525598dc4" data-content="https%3A%2F%2Fgithub.com%2Fmayone-du%2Fchrome-extension-template-with-nextjs" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/mayone-du/chrome-extension-template-with-nextjs" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mayone-du/chrome-extension-template-with-nextjs</a></p>
<p><strong>初期の動作</strong><br>
<img src="https://storage.googleapis.com/zenn-user-upload/deployed-images/d008e796a5e255b7d68cda74.gif?sha=e83adaa2f8f7fdcfb1c50cadbf56d3086c7ae4e6" alt loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>最低限の使い方は README にも書いてあるので、こちらの記事は読み飛ばしてもらっても使用できると思います。</p>
</div></aside>
<h3 id="%E5%89%8D%E6%8F%90">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h3>
<ul>
<li>今回使う技術の基礎知識</li>
<li>Chrome 拡張機能についての基礎知識（manifest や ChromeAPI など）</li>
</ul>
<p>Chrome 拡張についての基礎知識は、既にわかりやすい記事があるのでそちらを参考にしてください。</p>
<h4 id="chrome-%E6%8B%A1%E5%BC%B5%E9%96%8B%E7%99%BA-%E5%85%A5%E9%96%80%E8%A8%98%E4%BA%8B">
<a class="header-anchor-link" href="#chrome-%E6%8B%A1%E5%BC%B5%E9%96%8B%E7%99%BA-%E5%85%A5%E9%96%80%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> Chrome 拡張開発 入門記事</h4>
<ul>
<li><a href="https://www.tackn.jp/post-3806.html" target="_blank" rel="nofollow noopener noreferrer">https://www.tackn.jp/post-3806.html</a></li>
<li><a href="https://roy29fuku.com/web/browser/google-chrome-extension-tutorial/" target="_blank" rel="nofollow noopener noreferrer">https://roy29fuku.com/web/browser/google-chrome-extension-tutorial/</a></li>
</ul>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7090dffd8991e" src="https://embed.zenn.studio/card#zenn-embedded__7090dffd8991e" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fdocs%2Fextensions%2Freference%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/docs/extensions/reference/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/docs/extensions/reference/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4db1513d316a3" src="https://embed.zenn.studio/card#zenn-embedded__4db1513d316a3" data-content="https%3A%2F%2Fsupport.google.com%2Fchrome%2Fa%2Fanswer%2F2714278%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://support.google.com/chrome/a/answer/2714278?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://support.google.com/chrome/a/answer/2714278?hl=ja</a></p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p>1 つ注意点として、manifest v2 と v3 で大きく変わる箇所があるので、そこだけ注意しながら開発してください。今回は v3 で作成しています。</p>
</div></aside>
<h2 id="%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> <a href="https://github.com/mayone-du/chrome-extension-template-with-nextjs/" target="_blank" rel="nofollow noopener noreferrer">テンプレートリポジトリ</a>の使い方</h2>
<p><a href="https://github.com/mayone-du/chrome-extension-template-with-nextjs/#readme" target="_blank" rel="nofollow noopener noreferrer">README</a> にも記載してますが、ここでも説明します。</p>
<ul>
<li>ビルドは、<code>npm run export</code>で <code>/extensions</code> 以下に出力されます。Chrome 側で拡張機能を読み込む際は <code>/extensions</code> を選択してください。</li>
<li>
<code>/src/scripts</code> 以下の 2 種類のファイルが、それぞれ Chrome 拡張用のスクリプトファイルです。(<code>content.js</code> | <code>background.js</code>)</li>
<li>ChromeAPI を使用する場合は、コンポーネント化して<code>dynamic import</code> で読み込み、<code>ssr: false</code>にするようにしてください。そうしないとビルド時に<code>chrome</code>が未定義だと怒られビルドできません。</li>
<li>自分で webpack の設定を書いて Chrome 用のスクリプトをバンドルしています。ここらへんのパスやフォルダ構成等をいじる際は、<code>/webpack</code> の設定も見直してください。</li>
<li>適宜 <code>manifest.json</code> や linter, formatter の設定を変えてください。</li>
<li>ページ遷移は普通に Next.js のルーティングに従います。</li>
</ul>
<h2 id="%E6%AC%A0%E7%82%B9">
<a class="header-anchor-link" href="#%E6%AC%A0%E7%82%B9" aria-hidden="true"></a> 欠点</h2>
<p>実は、このリポジトリは大きな欠点があり、<strong>ChromeAPI を使う場合</strong>、開発中の動作確認方法が今の所（2021/11/23 日現在）毎回ビルド(npm run export)するしかなく、効率が悪いです。タイトル詐欺ってごめんなさい。</p>
<p><strong>理由としては ChromeAPI が window オブジェクトに存在しないため</strong>なので、ローカルの場合は ChromeAPI を使わずにうまいことやれば出来なくはないです。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>ChromeAPI を使用しない場合であれば、普通に<code>npm run dev</code>で確認できます</p>
</div></aside>
<p>もし本格的に Chrome 拡張の開発をしたことがある人や、なにか良い方法があれば是非コメントや PR 等いただけると嬉しいです 🙏</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9b07d74c4c8e1" src="https://embed.zenn.studio/card#zenn-embedded__9b07d74c4c8e1" data-content="https%3A%2F%2Fgithub.com%2Fmayone-du%2Fchrome-extension-template-with-nextjs%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/mayone-du/chrome-extension-template-with-nextjs/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mayone-du/chrome-extension-template-with-nextjs/</a></p>
<h2 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E8%A8%98%E4%BA%8B">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考にさせていただいた記事</h2>
<ul>
<li><a href="https://qiita.com/yushimatenjin/items/8f476dd018550922f1e9" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/yushimatenjin/items/8f476dd018550922f1e9</a></li>
<li><a href="https://zenn.dev/cti1650/articles/81016618ec5a87" target="_blank">https://zenn.dev/cti1650/articles/81016618ec5a87</a></li>
</ul>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<ul>
<li>
<code>/extensions</code>が拡張機能のディレクトリになる</li>
<li>
<code>/src/scripts</code>が Chrome 用のスクリプトファイルになる</li>
<li>Chrome 用のスクリプトファイルと通信したい場合は、<code>dyamic import</code>を使ってコンポーネント側で <code>sendMessage</code> などする。</li>
<li>動作確認方法や、ディレクトリ構造の変更に注意。</li>
</ul>
<p>Chrome 拡張は作れるとなにかと便利だし、できることの幅も広がって楽しいので、ぜひ今回紹介したテンプレートを使用して Chrome 拡張の開発に挑戦してもらえればと思います！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b416a6c540979" src="https://embed.zenn.studio/card#zenn-embedded__b416a6c540979" data-content="https%3A%2F%2Fgithub.com%2Fmayone-du%2Fchrome-extension-template-with-nextjs" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/mayone-du/chrome-extension-template-with-nextjs" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mayone-du/chrome-extension-template-with-nextjs</a></p>
<p>今回のテンプレート自体にもまだまだ改善の余地はあると思うので、気が向き次第改善し続けます。</p>
<p>最後までご覧頂きありがとうございました 🙏<br>
コメントやご指摘等も大歓迎ですので、是非ご提案、ご意見をお待ちしております。</p>


Next.js, TypeScript, Tailwind CSS で快適に始める（かもしれない）Chrome拡張機能開発

テンプレートリポジトリの使い方

zenn-contents

chrome

Discussion