初めに

chromeの拡張機能を作る事は難しい事だと思っている人は多いと思いますが、実は簡単なんです。
この記事では.chrome拡張機能の基本的な作成方法を書いていこうと思います。

また次回は有料noteを書こうと思いますが、
そのnoteでは一つ実際にchrome拡張機能を１から作るというnoteにしようと思います。

ここでは書きませんが、その有料noteでは

chrome拡張機能について
chrome APIについて
リファレンスの読み方

これらを学びながら、一つ便利な拡張機能を作っていこうと思います。

値段は500円程度にしようと思います。良ければ購入してください！

まず必要なファイル

manifest.json
.html
.javascript

この3つです。
今回の講座では主にmanifest.jsonについて書きます。

htmlファイルについては、ポップアップを出すときに必要なファイルです。

javascriptファイルに関しては、backgroundでやるかcontent_scriptsでやるか、複数の使い方があるので、もしかしたら２つ必要になるかもしれません。

作った拡張機能を読み込む方法

まず拡張機能を作っているフォルダを読み込みましょう。
まだ作ってないのなら、一度無視して後から見てください。

1, まず右上の3つの点をクリック
2, その他のツールをクリック出てきた、拡張機能をクリック
3, パッケージ化されていない拡張機能を読み込むをクリックし、フォルダを選択
4,完了です。ページに戻り右上に見ると追加されているのが分かります。
エラーの場合は、manifest.jsonにちょっとおかしいところがあります。なおしましょう。

manifest.json

{
   "manifest_version": 2,
   "name": "",
   "description": "",
   "version": "1.0",
   "browser_action": {
     "default_icon": "",
     "default_title": "",
     "default_popup": ""
   },
   "permissions" : [
   ],
   "content_scripts": [{
       "matches": [],
       "js": []
   }],
   "background":{
     "scripts": [""],
     "persistent": false
   }
 }

manifest.jsonにはこういう感じで書いていきます。
まず、"manifest_version" : 2とありますが、manifestのバージョンで、現在バージョンが2であるためです。これは絶対にこのまま書いておきましょう

nameとは拡張機能の名前です。

descriptionとは拡張機能の説明です。どのような拡張機能か書きましょう。

versionとは拡張機能のバージョンを指します。なにか変えたりしてアップデートを行った場合、versionも変えましょう

続いてbrowser_actionについて

default_iconは拡張機能のアイコンです。

default_titleは右上にある拡張機能のアイコンにマウスオーバー(マウスを乗せる)すると出てくる名前です。

default_popupに関しては,htmlファイルを指定します。
指定した場合、アイコンをクリックすると、ポップアップが出てきます。
指定しなかった場合,何も出てきません。

permissionsではchrome APIを使いたいときに記述します。
permissionsに書かなくても使えるchromeAPIはあります。

content_scriptsはdom操作をするときに使います。
machesには正規表現で書き、拡張機能を使う対象のサイトを書きます。
jsでは動作させるスクリプトを書きます。
content_scriptsで、今見ているタブ(サイト)をDOM操作で色々と書き換えることができます。
ポップアップを表示させるためのhtmlファイルに外部jsファイルとしてcontent_scriptsのjsに追加していない、jsファイルで特定のサイトのdomを変更しようとしてもできません。ですが、content_scriptsに登録しているjsファイルならdom操作が可能です。

background: バックグランドページとイベントページがあります。
今はイベントページが推奨されています。
scripts で  バックグランドで動作するjsファイルを指定します。
persistentはfalseにすると、イベントページとなり何も書かなかったらバックグランドページとなります。
バックグラウンドページは裏側ではずっと動いているのに対して、イベントページでは必要なときに動くのでpersistent: falseは書いておきましょう。

html

bodyタグの幅をwidthで広くすると、ポップアップに出てくる画面もおおきくなります。

これらができたら、読み込みましょう。上にある 作った拡張機能を読み込む方法 に書いてあります。

終わりに

いかがだったでしょうか、これで基本的な拡張機能を作る事はできました。
ただこれだと、ポップアップに何かを出すことぐらいです。
content_scriptsのjavascriptファイルとポップアップ画面をchromeAPIを使って繋げてあげたりすることは難しく、ネット上で探してもリファレンス以外あまり情報がないです。

なので次回有料noteですが、たった500円で1から拡張機能を作っていきchromeAPIについても知る事ができるnoteを販売しようと思いますので、興味のあるかたは買ってください！

お願いします！