Help us understand the problem. What is going on with this article?

Chrome拡張の作り方 (超概要)

More than 1 year has passed since last update.

はじめに

普段、Chrome拡張使ってますか? そもそもChrome使ってますか?

使っている方であればわかると思いますが、
Chrome拡張はとても便利な機能です。ブラウザを自分流にカスタマイズすることができます!

そんなChrome拡張はストアからインストールするだけでなく、 自作 することもできます!
(ストアに公開しなければ自分だけの拡張になります)

ただ、いろいろネットで作り方を調べてみると、手が凝っていたりしてソースコード量も多く、
「ちょっと難しそう、、」という印象を受けます (僕自身がそうでしたw)

ってことで、これから作りたい人向けの超さわりの部分を説明します!

準備するもの

Chrome拡張を作る上で必要なものは

  • Chromeブラウザ (Googleアカウント登録済み)
  • エディタ (プログラムを書く用)

だけです。めっちゃ簡単ですね。
はい、敷居が下がりました 笑

作り方

Chrome拡張の中身は大きく

  • JavaScriptファイル (実際に動作させるやつ)
  • HTMLファイル (設定画面等を使いたい場合)
  • CSSファイル (デザイン用)
  • Imageファイル (Chrome拡張のアイコンとか)
  • manifestファイル (設定ファイル)

こんな感じに分けられると思います (結構アバウトです)

ですが、

  • JavaScriptファイル (実際に動作させるやつ)
  • HTMLファイル (設定画面等を使いたい場合)
  • CSSファイル (デザイン用)
  • Imageファイル (Chrome拡張のアイコンとか)
  • manifestファイル (設定ファイル)

の2つがあれば、とりあえず最低限のものはできます。
はい、また敷居が下がりました 笑

manifest.json

この設定ファイルがまさに初見殺し (^_^;)
書くべきことがいろいろあるのですが、何をどう書いていいのか最初わからないんですよね。。

軽く説明すると、このmanifest.jsonには、
「作成するChrome拡張の設定全般」について書く必要があり、

  • どんなファイルがあるのか (利用するJSファイル、HTMLファイル〜のパス指定など)
  • どんな機能を利用するのか (ポップアップメニューをつけるのか〜など)
  • どんな制限をつけるのか (常に動作するのか、特定の画面のみ動作するのか〜など)

などなどを決まった形式で記述する必要があります (敷居が高い!)

この記事では必要最低限のことしか記載しません!
はい、またまた敷居が下がりました 笑

※ 細かい部分については、他の記事で詳しく説明されているのでそちらを!
Chrome 拡張機能のマニフェストファイルの書き方

Chromeへの適用方法

作ったファイルたちはChromeの拡張ページの左上「パッケージ化されていない拡張機能を読み込む」からフォルダごと選択します!
スクリーンショット 2018-11-06 19.02.55.png

これだけでChromeに適用できます!
はい、またまたまた(ry

サンプル

とりあえず、自分で作ったChrome拡張をいくつかご紹介します!
(kintoneの人間なので、kintoneの画面ですが、対象ページはなんでも大丈夫です)

特定の画面でアラートを出す

特定のアプリ (問い合わせ管理アプリ)のみアラートを出す
alert.gif

コード

content.js
window.alert('アプリ開いたね!');
manifest.json
{
  "name": "Sample",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Sample Chrome Extension",
  "content_scripts": [{
    "matches": ["https://{subdomain}.cybozu.com/k/{AppID}/*"],
    "js": [
      "content.js"
    ]
  }]
}
ファイル構造
.
└── src
     ├── content.js
     └── manifest.json

見た目を変更する

kintoneの背景色を変更する

スクリーンショット 2018-11-06 19.24.45.png

コード

content.js
window.onload = function() {
  var body = document.getElementsByClassName('body-top');
  body[0].style.backgroundColor = '#000000';
};
manifest.json
{
  "name": "Sample",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Sample Chrome Extension",
  "content_scripts": [{
    "matches": ["https://{subdomain}.cybozu.com/k/*"],
    "js": [
      "content.js"
    ]
  }]
}
ファイル構造
.
└── src
     ├── content.js
     └── manifest.json

ガチなやつ (実際に愛用してるやつ)

日報のテンプレをスレッドに挿入する
DRMaker.gif

コード

JavaScriptファイル
複数あるので割愛 m(_ _)m
manifest.json
{
  "name": "DRMaker",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "個人日報用",
  "icons": {
    "16": "icons/Artboard-n@2x.png",
    "48": "icons/Artboard-n@2x.png",
    "128": "icons/Artboard-n@2x.png"
  },
  "permissions": [
    "storage",
    "https://{subdomain}.cybozu.com/*",
    "tabs",
    "background",
    "contextMenus"
  ],
  "content_scripts": [{
    "matches": ["https://{subdomain}.cybozu.com/*"],
    "js": [
      "js/moment.js",
      "js/jquery-3.2.1.min.js",
      "js/getSchedule.js",
      "js/formatSchedule.js",
      "js/checkScheduleType.js",
      "js/setColor.js",
      "js/makehtml.js",
      "js/getKintoneTask.js",
      "js/content.js"
    ]
  }],
  "background": {
    "matches": ["https://{subdomain}.cybozu.com/*"],
    "scripts": [
      "js/jquery-3.2.1.min.js",
      "js/background.js"
    ]
  },
  "browser_action": {
    "default_title": "DRMaker",
    "default_popup": "popup/popup.html"
  }
}
ファイル構造
.
├── README.md
├── icons
│   ├── Artboard-n@2x.png
│   ├── Artboard@10x.png
│   └── Artboard@2x.png
├── js
│   ├── background.js
│   ├── checkScheduleType.js
│   ├── formatSchedule.js
│   ├── getKintoneTask.js
│   ├── getSchedule.js
│   ├── jquery-3.2.1.min.js
│   ├── makehtml.js
│   ├── moment.js
│   ├── script.js
│   └── setColor.js
├── manifest.json
└── popup
    ├── popup.html
    └── popup.js

※ かなり複雑なのでJSの中身については割愛します
(Garoonのスケジュールを取得したり、kintoneのレコードを取得したりしています)

おわりに

最後のサンプルは置いといて、それ以外なら初めてでも作れそうですよね。
作ろうと思えばかなり作り込めるので、難易度が高めに見えてしまいますが、
シンプルなところからまずはじめてみると良いですよ!

たくさんChrome拡張を作って自分だけのChromeをぜひ作ってみてください!!

それでは!≧(+・` ཀ・´)≦

RyBB
サイボウズ テクニカルエバンジェリスト / kintone認定 カスタマイズスペシャリスト、アプリデザインスペシャリスト
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした