More than 3 years have passed since last update.

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

Last updated at 2021-04-22Posted at 2021-04-20

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');
}