Chrome拡張機能の開発は意外と簡単？！その１

この記事では、Chromeブラウザの拡張機能を作成する方法を書きます。第1回目は、とりあえず、作って動かして見よう！です。最初調べ始めたときは、拡張機能って難しそうというイメージが有りましたが、すげー簡単でした。しっかりしたものを作成しようとすると、大変だと思いますが、基本は簡単ですね。

Chrome拡張機能の構成ファイル
Chrome拡張機能のサンプルコードと説明
Chrome拡張機能のサンプルの動作
お世話になったページ
Chrome拡張機能の概論
まとめ

Chrome拡張機能の構成ファイル

開発に必要なファイルは以下です。

manifest.json
JavaScriptファイル（JQueryの使用も可能）
HTML
CSS（今回は登場しません）
画像ファイル

ホームページを作成する知識とJavaScriptの知識があれば、基本的には作れます。VisualStudio等で開発するのが良いかと思いますが、今回は、ChromeBookのTextで作成しました。

Chrome拡張機能のサンプルコードと説明

manifetst.json

{
  "//": "manifetst.jsonは、拡張機能を作る際に必須。書き方は、適宜、補足を入れます。",
  "manifest_version": 2,
  "version": "0.0.1",
  "name": "MyChromeExtensionTest",
  "description": "Chrome拡張機能を自作してみるテスト",
  "browser_action": {
        "default_icon": "icon.png",
        "default_title": "しもたさんのChrom拡張テスト",
        "default_popup": "popup.html"
  },
  "icons" : {
     "128": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contents.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
		"tabs",
		"background",
                "contextMenus",
		"http://*/*",
		"https://*/*"
  ]
}

マニフェストのフォーマットの書き方
JSONはコメントかけないですが、、、”//”は、コメントの代わりです。バリデーションエラー出てますが、今回は問題なく動作しています。
manifest_versionは、「2」しか指定できません。
「version」「name」「description」は、「その他ツール＞拡張機能」に表示されるものです。「icons」で指定した画像は、「その他ツール＞拡張機能」に使用されます。
browser_actionの「default_icon」は、アドレスバーの横に表示されるアイコン（ファビコン）に使用されます。「default_title」は、ファビコンにマウスカーソルを合わせた際に表示される文言。「default_popup」は、ファビコンをクリックした際に表示されるHTMLを指定します。
content_scriptsは、コンテントスクリプトを使用する場合に記載します。今回は、書いてはありますが、気にしなくて良い記載です。
backgroundは、イベントを処理するjsファイルを指定します。
permissionsは、主に chromeAPI を使うときなどに、使う対象を指定します。

popup.html

<!-- 
popup.htmlは、manifest.jsonの"browser_action"のdefault_popup"で指定する。<br/>
アドレスバーの横の拡張機能のアイコンをクリックした際に表示させる画面を指定する。
通常のHTMLと同様、JavaScriptを読み込ませることも可能
-->
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello , How are you?</p>
    <form>
        <input type="button" value="start" />
    </form>
  </body>
</html>

説明は、特になし。サンプルの為、「Hello・・・」という文言とボタンを表示させるHTML

background.js

// 
// background.jsは、拡張機能が有効だと常に読み込まれているjs
// イベントに対するControler的な役割にすると良さそう
//
// 直下の指定だと、ページが読み込まれるごとにアラートが出力される。いまは、コメント
// alert("background.jsの疎通");


// アドレスバーの右側の拡張機能のアイコンをクリックした際のイベント
// ※ manifest.jsonの"browser_action"=>"default_popup"の指定があると無効になる
chrome.browserAction.onClicked.addListener(  function() {
	alert("Hello World BrowserAction");
});

// 右クリックした時に表示されるコンテキストメニューの表示
chrome.contextMenus.create({title: "しもたさんの拡張機能"});

// 右クリックした時に表示されるコンテキストメニューを選択されたときの動作
chrome.contextMenus.onClicked.addListener( function(){
     alert("onClickedイベントでクリック");
});

コード内の説明文参照

contents.js

// 
// "content_scripts"で指定したcontents.jsは、
// "matches"で合致したURLで、実行されるJavaScript
// 通常では、JavaScriptでCSSやHTMLのDOMを操作することに使用する
// レイアウトのみを操作する
//
// 下記は、manifest.jsonの指定が正しいかを確認するための記述


//	alert("Hello World !!!");

コード内の説明文参照

Chrome拡張機能のサンプルの動作

ファビコンをクリックした場合

右クリックして、赤い四角を選択した場合

お世話になったページ

https://risaiku.net/archives/1653/
http://www.koikikukan.com/archives/2014/06/05-015555.php
http://oxynotes.com/?p=8906
http://degitekunote.com/blog/2016/11/02/chrome-extension/

Chrome拡張機能の概論

今回は触りだけだったので、本質を理解するために必要そうなページ

https://qiita.com/edit-mode/items/26d7a22233ecdf48fed8
https://qiita.com/Tachibana446/items/696bb93bd4a23525cbb0
https://risaiku.net/archives/1816/
http://oxynotes.com/?p=8960

まとめ

Chrome拡張機能をコピペで作って見ました。ブラウザのパースやレンダリングロジックを理解していない作れないかと思ったら、HTML/CSS/JavaScriptとJSONマニフェストが書けると作れることがわかりました。JavaScriptが使えるとなると、サーバとも通信可能ですし何でもできますね（笑）ちょうど、JavaScriptを勉強しようと思っていたので何か作ってみようかなと思います。

それでは、また。