Chrome拡張 初級チュートリアル

Chorme拡張の基礎的なチュートリアルです。
Chrome拡張を作成するのは初めての方向けの内容です。

# 概要

ブラウザで特定のページを開いた時にブラウザのDOM要素に対して何か処理をするChrome拡張（Chrome Extension）を作ります。

# 環境

* mac OS
* JavaScript
* Chrome Manifest V2
* VS Code

# Chrome拡張とは何か？

ざっくりですが、ブラウザに便利な機能を追加するJavaScriptで実装したプログラムです。
「Chromeウェブストア」からインストールするものと思いがちですが、自分で作成したプログラムをそのまま読み込んで実行することもできます。
今回は自分のPCやmacで作成したプログラムをChrome拡張機能のメニューから読み込んで動作させます。

# プログラム作成

作業用にフォルダを作成します。
フォルダを作成したらファイルを2つ作成します。

```
$ mkdir my-first-extension
$ cd my-first-extension/
$ touch manifest.json
$ touch content.js
$ tree .
.
├── content.js
└── manifest.json
```

## マニフェストファイルの作成

Chrome拡張はマニフェストファイル("manifest.json")にプログラムの構成を記述します。
内容は下記の通りにしました。

```manifest.json
{
    "name": "My First Chrome-Extension",
    "version": "0.0.1",
    "description": "Chrome-Extension Tutorial",
    "content_scripts": [{
        "matches": ["https://*.cybozu.com/k/*/show"],
        "js": ["content.js"]
    }],
    "manifest_version": 2
}
```

"manifest_version"は現在"バージョン 3"が出ていますが、"バージョン 2"で作成します。
今回作成するプログラムはブラウザのDOMにアクセスする為、コンテンツスクリプト(Content scripts)を利用します。

マニフェストファイルの"content_scripts"に特定のページで動作する為のマッチパターンと、マッチした時に動作させるJavaScriptファイルを指定します。

今回はcybozuのkintoneアプリのレコード詳細画面が表示された時にプログラムが動作するように設定します。

## JavaScriptプログラムの作成

ファイル名は自由で良いですが今回は"content.js"としました。
マニフェストファイルの"js"と同じにしてください。


```content.js
"use strict";

console.log("content.js done"); // debug
const sidebar = window.document.querySelector('div.gaia-argoui-app-show-sidebar');
const child = sidebar.childNodes;
if (!child[0].hasAttribute('style')) {
  child[0].setAttribute('style', 'display: none');
}
```

cybozuのkintoneの詳細画面が表示された時に、画面右側のサイドバーを自動で閉じるようにプログラミングしています。

# Chrome拡張の登録
プログラムを作成したフォルダを指定して作成したChrome拡張をテストします。

その他のツールから拡張機能を選択。
![スクリーンショット 2021-04-20 22.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/6aebcf9a-07e9-4f67-37fe-f566ae9bca5f.png)

「パッケージ化されていない拡張機能を読み込む」を選択。
![スクリーンショット 2021-04-20 22.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/fa859044-7395-bceb-c1f8-bd4fc52ed617.png)

ディレクトリを選択すると拡張機能に読み込まれます。
![スクリーンショット 2021-04-20 22.28.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/a29c374a-43b7-274e-e479-7ffd3af414eb.png)


# 動作確認

通常は画面右のサイドバーメニュー（コメントと変更履歴）が開いた状態で表示されます。
![スクリーンショット 2021-04-20 22.31.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/a8563741-ef03-ffeb-8281-5edf34d732f8.png)

作成した機能拡張を読み込むと、kintoneの詳細画面がサイドバーを閉じた状態で表示されます。
![スクリーンショット 2021-04-20 22.35.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/299eabbd-5aeb-aef9-efbb-6f0d7e9e972a.png)

# 参考

* APIリファレンス

https://developer.chrome.com/docs/extensions/reference/

* 拡張機能開発の概要

https://developer.chrome.com/docs/extensions/mv2/devguide/

* マニフェストファイルフォーマット

https://developer.chrome.com/docs/extensions/mv2/manifest/

* マッチパターン

https://developer.chrome.com/docs/extensions/mv2/match_patterns/

* コンテンツスクリプト

https://developer.chrome.com/docs/extensions/mv2/content_scripts/

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts

* HTML DOM

https://developer.mozilla.org/ja/docs/Web/API/Node

https://developer.mozilla.org/ja/docs/Web/API/Document

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

https://developer.mozilla.org/ja/docs/Web/API/Element

https://developer.mozilla.org/ja/docs/Web/API/Element/hasAttribute

https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute


* Web API

https://developer.mozilla.org/ja/docs/Web/API#interfaces