読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【53:Chrome Extension】Google Chromeの拡張機能を作成する

one's wayプロジェクト API

f:id:seintoseiya:20160412234614p:plain
プロジェクトNo.53:Chrome Extension

Chrome Extension(Google Chrome拡張機能)の作成に必要な知識はHTML/JavaScript(jQuery)/CSSだけです。
Webページの作成と特に変わりませんね。
今回は最低限の機能のみで、Webサイトのタイトルを表示するだけの拡張機能を作ってみました。

手順

  • 必要なファイルを用意する
  • chrome拡張機能を開き、作ったファイルをロードする
  • chrome web storeにアップロード

必要なファイル

最低限必要なファイルはmanifest.jsonのみ。
その他必要に応じて、
・HTMLファイル
JavaScript
・画像
などを用意します。

「manifest.json」では拡張機能の作者や名前、アイコン、権限などのメタ情報を定義します。
Chromeのオリジナル拡張機能を開発しよう(ソースコードあり) | 株式会社LIG
Chrome Extension を作って公開する - Qiita

またchrome独自のAPIも使えます。
JavaScript APIs - Google Chrome

chromeにてロード

ディベロッパーモードにチェックを入れ、パッケージ化されていない拡張機能を読み込むを押下。
作ったファイル(manifest.jsonがあるフォルダ)をアップロードする。
f:id:seintoseiya:20160412234527p:plain

公開

公開したければ、zipにまとめてchrome web storeにアップロードします。
その際、初回のみ登録手数料$5が必要です。
Publish in the Chrome Web Store - Google Chrome

全ソースはこちら

github.com