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

爆速でChrome拡張機能を作成する

More than 1 year has passed since last update.

Chrome拡張機能は便利だが、いざ自分が作るとなると覚えることが多くて面倒くさい。
そこで generator-chrome-extension というひな壇生成ツールを使って効率的にChrome拡張機能を作ってみる。

作るもの

https://github.com の背景が真っ赤になる誰得拡張機能

Chrome拡張機能にもいくつか種類があり、今回のように特定のURL(全体でもできるが)で何かを実行したい場合はContent Scriptsと呼ばれるタイプを使う。

インストール

依存ライブラリのインストール

npm install -g yo bower gulp

Chrome拡張機能のコードテンプレートを生成するためのジェネレータをインストール

npm install -g generator-chrome-extension

ひな壇生成

yoはひな壇を生成するコマンド。それ以上でもそれ以下でもない。

mkdir my_extension
cd my_extension
yo chrome-extension

いろいろ質問される。今回はContent Scriptsを作りたいので

? What would you like to call this extension? my_extension
? How would you like to describe this extension? My Chrome Extension <<そのままエンター>>
? Would you like to use UI Action? No <<そのままエンター>>
? Would you like more UI Features? <<Content Scriptsでスペースキー押してエンター>>
? Would you like to set permissions? <<そのままエンター>>

これでひな壇が生成される。いろいろディレクトリがあるが肝心の拡張機能部分はappであることに注意

manifestの設定

デフォルトだとすべてのサイトで動作するが、今回はGithubのサイトのみで動いて欲しいのでmachesの部分も以下に変更

  "content_scripts": [
    {
      "matches": [
        "https://github.com/*"
      ],
    }
  ]

面倒なので最初からJQueryをインストールしておくと吉

bower install jquery --save
  "content_scripts": [
    {
      "js": [
        "bower_components/jquery/dist/jquery.min.js",// ← これをcontentscript.jsより前に追加
        "scripts/contentscript.js"
      ],
    }
  ]

ファイルの編集

いよいよgithubの背景色を赤くする誰得処理を記述する時が来た。編集するファイルはapp/scripts.babel/contentscript.jsでapp/scripts/contentscript.jsではないので注意

app/scripts.babel/contentscript.js
'use strict';

$(function () {
  $('body').css('background-color', '#ff0000');
});

実行

以下のコマンドを実行すると、app/scripts.babel/ 以下のコードをビルドし、
app/scripts/ 以下に実行ファイルを生成してくれる。

gulp watch

その後、Chromeの拡張機能管理画面より「パッケージ化されていない拡張機能を読み込む」でインストール。ディレクトリはさっき生成したappを選択する。

うまく読み込まれれば https://github.com/ を開くと赤く染まったGithubがオデムカエしてくれる。

開発するときのTips

開発するときは当たり前だが何度もコードを書き換える。その都度再インストールしてたらやってられない。 generator-chrome-extension ではそこもカバーしてくれており、以下のコマンドを実行すると

gulp watch

「何かコードを修正したら、それを検知してビルドを行い、さらにChromeに再読み込みさせる」をリアルタイムで実行してくれる。

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
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