手動でのChrom機能拡張インストール

みなさん、こんにちは山口征啓です。
先日ChatGPTで英単語を調べるChrome機能拡張を作ったので、そのインストール方法の解説です。

ローカルの機能拡張をインストールする

Chrome拡張には便利なものがたくさんあるので、皆さんも使われているかもしれません。
私が使っているものとしては
・Google翻訳
・Notionへの保存
・PaperPile
などがあります。

通常はChromeウェブストアで、選んでクリックすることでインストール出来ます。しかし自作した機能拡張はウェブストアにないので、別の方法でインストールする必要があります。

ファイルの配置

まずChrome機能拡張のファイルを準備します。

今回はmanifest.json, background.jsというテキストファイルとアイコン用のpngファイルがはいっているimageフォルダを使います。これらが「Explain Engish」というフォルダーに入っています。

これをパソコンの好きなところに置きます。私は書類フォルダの中にChrome拡張というフォルダを作ってその中に置きました。

このような感じで配置します。

機能拡張のインストール

まずChromeを起動しましょう。
次にメニューの「ウィンドウ」から「機能拡張」を選びます。

ウィンドウメニューから機能拡張を選択

続いて、右上にある「デベロッパーモード」のトグルをオンにします。

トグルを右に動かしてオンにする

すると左に「パッケージ化されていない機能拡張を読み込む」というメニューが出てくるので、これをクリック

左にある「パッケージ化されていない機能拡張を読み込む」をクリック

ファイル選択画面が開くので、最初に配置したフォルダを選択して、右下の選択ボタンを押す

最初に配置したフォルダを選択

すると、拡張機能が読み込まれました！

拡張機能が読み込まれた

デベロッパーモードはオフに戻しておいてかまいません。

これで、ブラウザのどこかの文字を選択して、右クリックするとメニューに機能拡張が表示されるはずです。

いかがですか？意外と簡単だったのではないでしょうか？
Chrome拡張は簡単に作成できてインストールできるので、便利ですね。
皆さんも自作の拡張機能を作ってみてください。