今回は、自作したchrome拡張機能のインストール方法をご紹介致します。
また、下記の記事では、Chromeウェブストアからのchrome拡張機能のインストール方法も紹介しておりますのでぜひ!
![](https://exemate.co.jp/wp-content/uploads/2023/07/a424662a3fdc8c24b2dcef8bf15fd0cf-300x158.jpg)
自作chrome拡張機能のインストール方法
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-2.png)
拡張機能をインストールしたいGoogleアカウントでログインしたchromeを開き、右上のアイコンをクリックします。
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-3.png)
① 拡張機能をクリック
② 拡張機能を管理クリック
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-4.png)
拡張機能一覧画面が表示されます。
もしくは、ブラウザURLバーに「chrome://extensions/」と入力し検索した場合でも拡張機能一覧画面を表示することが可能です。
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-6.png)
拡張機能一覧画面の右上のデベロッパーモードをONにします。トグルが青色になっているとONになっています。
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-7.png)
デベロッパーモードをONにした後でページを再読み込みしましょう。
![](http://exemate.co.jp/wp-content/uploads/2024/03/main-150x150.png)
デベロッパーモードをONにした後でページを再読み込みしないと、ドラッグ&ドロップで拡張機能をインストールしようとした際に、エラーとなります。
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-8.png)
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-8.png)
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-9.png)
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-9.png)
「パッケージ化されていない拡張機能を読み込む」からインストールしたい拡張機能フォルダを選択します。
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-10.png)
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-10.png)
拡張機能フォルダを拡張機能一覧画面にドラッグ&ドロップでもインストールが可能です。
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-12.png)
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-12.png)
無事、拡張機能がインストールされました!
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-13.png)
![](https://exemate.co.jp/wp-content/uploads/2024/03/image-13.png)
![](http://exemate.co.jp/wp-content/uploads/2024/03/75c140d3601436d9bf49d9f8aa3af58a-150x150.png)
![](http://exemate.co.jp/wp-content/uploads/2024/03/75c140d3601436d9bf49d9f8aa3af58a-150x150.png)
![](http://exemate.co.jp/wp-content/uploads/2024/03/75c140d3601436d9bf49d9f8aa3af58a-150x150.png)
下記のオレンジ色のアイコンは、Chrome拡張機能のデベロッパーモードでインストールしたものを表しています。つまり、自作した拡張機能を表します。
まとめ
![](http://exemate.co.jp/wp-content/uploads/2024/03/campaign-creators-OGOWDVLbMSc-unsplash-edited-1024x576.jpg)
![](http://exemate.co.jp/wp-content/uploads/2024/03/campaign-creators-OGOWDVLbMSc-unsplash-edited-1024x576.jpg)
Chrome拡張機能の開発には、HTML、CSS、JavaScriptの知識が必要ですが、これらの技術は一般的なウェブ開発の基礎となります。
また、シンプルな機能のChrome拡張機能を作成することは、プログラミングの基礎知識を持っている場合には比較的簡単なので、プログラミングの良い練習となるでしょう。
ぜひ、皆様もプログラミングの練習にChrome拡張機能を作成してみてはいかがでしょうか。
また、EXE MATE 株式会社では、お客様それぞれの用途に合わせたオリジナルのchrome拡張機能の作成も承っております。
コメント