本記事では、配布された拡張機能のフォルダを、実際にChromeブラウザにインストールする手順を解説します。
拡張機能を入れる3つの手順
作業の流れは、シンプルに以下の3つのステップです。
フォルダの準備(ダウンロード・解凍)
デベロッパーモードへの変更
拡張機能の読み込み
ファイルを解凍してから、Chromeの設定画面を開き、そのままフォルダを読み込ませるのが一番スムーズで確実です。
さっそくやっていきましょう!
ここでは「LINEスタンプCSV分析」というツールをインストールしていきます。
1. フォルダの準備(ダウンロードと解凍)
まずは、配布された拡張機能のファイル(Zipファイルなど)をパソコンにダウンロードしておいてください。
ダウンロードしたファイルは「Zipファイル(圧縮ファイル)」になっています。

このままだとChromeが読み込めないので、必ず「解凍(展開)」しておきます。
Macの場合:ダウンロードしたZipファイルをダブルクリックするだけで、自動でフォルダに解凍されます。
Windowsの場合:Zipファイルを右クリックして「すべて展開」を選択します。

チャックの付いたアイコンの隣に普通の「フォルダ」がでてきたら解凍ができた状態です。これで準備OKです。
これからChromeにインストールするときは、この解凍済みのフォルダを使用します。
💡 超重要ポイント!
拡張機能を読み込んだ後、このフォルダを「削除」したり「別の場所(別のフォルダなど)に移動」したりすると、拡張機能が動かなくなってしまいます。
解凍したフォルダは、デスクトップや書類フォルダなど、「後から絶対に移動しない安全な場所」に置いて作業してくださいね。
2. デベロッパーモードにする
次に、Chromeの「拡張機能の管理画面」を開いて、開発者向けのモードをONにします。
①Chromeの右上にある「拡張機能マーク」をクリックします

②下の方にある「拡張機能を管理」 を選択します。

③画面の右上に表示されている「デベロッパーモード」のスイッチをON(青色)にしたあと左上にある「パッケージされていない拡張機能を読み込む」を押します。

3. 拡張機能を読み込む
「パッケージ化されていない拡張機能を読み込む」というボタンでファイル選択画面が開くので、手順1で用意した「解凍済みのフォルダ」を選択して「選択(開く)」をクリックします。
画面に新しく拡張機能のカードが表示されれば、インストールは完了です!

※新しく入れた拡張機能でも、下の方に表示されていることもあります。下の方までスクロールして確認しましょう。
拡張機能を「ピン留め」する方法
拡張機能は入れただけだと、画面の裏側に隠れてしまって使いにくいことがあります。
そこで、よく使う機能はブラウザの右上に常に表示させておく「ピン留め」をしておきましょう。
これも10秒でできますよ。
Chromeの右上にある「パズルのピース」のような形をしたアイコンをクリックします。
インストールした拡張機能の名前の横にある「ピンのマーク(固定アイコン)」をクリックします。
ピンが青色に変われば、画面の右上にアイコンが常時表示されるようになります!

これで、いつでもワンクリックでツールを起動できるようになります。
【補足】拡張機能をアップデート(更新)する方法
配布された拡張機能の「新しいバージョン(アップデート版)」が公開された場合は、以下の「入れ替え手順」でアップデートを行うのが一番おすすめです。「アップデート版が新しく出ました」という時に参考にしてください。
「古いデータをいきなり消すのは不安」「新しいものがちゃんと動くか確認してから古い方を消したい」という場合でも、以下の手順なら安全に切り替えられますよ。
おすすめ:安心の「順次入れ替え」手順
同じ機能が同時に動いてバグが起きるのを防ぐため、古い方を一時的にOFFにしてから、新しい方を読み込むのが最大のポイントです。
上記方法で新しいアップデート版のZipファイルをダウンロードして解凍(展開)します。
(※古いフォルダとは別の場所に置くか、解凍後のフォルダ名を変えておきます。例:`analyzer_v2`など)拡張機能管理画面(chrome://extensions)を開きます。
いま使っている古い拡張機能のカードの右下にある「スイッチ」をクリックして、OFF(グレー)にします。
(※これで古い機能が一時的に止まり、動作の競合を防げます)

新しい拡張機能が無事に動くことが確認できたら、一時的にOFFにしていたこの古い拡張機能の「削除」ボタンをクリックして完全に消去します。
(※パソコン内に残っている古い方のフォルダもゴミ箱に捨てて大丈夫です)
拡張機能の作り方についてはこちらのBrainで解説してます
Antigravityを使ったChrome拡張機能の作り方を以下のBrainでまとめています!自分でも作ってみたい方はこちらどうぞ。
この記事はnoteに掲載した記事を転載しています。
