chrome拡張機能を自作してウェブストアで公開する手順

chrome拡張機能を自作してウェブストアで公開する手順

初めてchrome拡張機能を自作しました。
あわせてchromeウェブストアで公開もしてみたので、手順をまとめてみようかと。

chrome拡張機能を作ることにしたきっかけになったのは先日リリースしたサービス、clink(クリンク)。

https://clink.me

リンクを管理するブックマークサービス的なものなのですが、わざわざ上記サイトに行ってリンクを登録するのも自分で使っていて面倒に感じまして。
その時閲覧しているページをそのままclinkに登録できたら便利かなと思ったわけです。それで目を付けたのが、chrome拡張機能。

思いのほか簡単に自作できたchrome拡張機能

さて、思い立ってまず見たのがchrome拡張機能開発のための公式ドキュメント。

https://developer.chrome.com/extensions/getstarted

サンプルコードがあるので試しにやってみたところ、すぐに動かすことができました。
htmlやjavascriptなど、ウェブサイト制作で利用するベーシックなところ抑えていれば、難易度は低いのかなというイメージです。

自作chrome拡張機能をローカルで作成し実際にchromeで動かしてみる

何はともあれ、まずは適当なデモを実際に動かしてみるのが一番。
公式ドキュメントからサンプルを抜粋してサクッと試してみます。

僕が作りたかったのは、chromeの右上に表示されるアイコンをクリックするとポップアップが表示されるタイプのもの。
拡張機能にはBrowser actions・Page actions・Override Pagesと3つ種類がありますが、今回作りたいのはBrowser actionsという種類のものになります。

とりあえずのポップアップテスト

まずは試しに、chromeの右上に表示されるアイコンをクリックするとポップアップが表示されるだけのサンプルを作ってみます。

必要なのは下記の2ファイル。
ディレクトリを作って、その中で構築してください。

  • manifest.json
  • popup.html

manifest.jsonには次のように書いておきます。

manifest_versionは公式マニュアルに合わせると良いかと思います。今は2。
versionは拡張機能のバージョンです。更新時には、前回のバージョンより新しくする必要があります。

大事なのはbrowser_action。
default_popupに指定したhtmlが、アイコンをクリックした時に表示されるポップアップの内容になります。

ここでは内容は適当で良いので、popup.htmlを作っておきます。

自作拡張機能データの読み込み方法

さて、先ほど作ったテストファイルを、実際にchromeで読み込んで使ってみます。

chrome拡張機能を自作してウェブストアで公開する手順

chromeの設定画面から、「その他のツール→拡張機能」を選択。

chrome拡張機能を自作してウェブストアで公開する手順

続いて、デベロッパーモードをONにして、「パッケージ化されていない拡張機能を読み込む」をクリックします。

chrome拡張機能を自作してウェブストアで公開する手順

するとディレクトリ選択用のポップアップが表示されるので、先ほど作成したファイルが入っているディレクトリを選択。

chrome拡張機能を自作してウェブストアで公開する手順

こうすることで拡張機能が読み込まれます。
ウェブストアでは公開せず、自分だけで使う拡張機能であればこれで事足ります。

また、上記に表示されているIDが重要で、「chrome-extension://上記ID/popup.html」とすることで、ポップアップを別ウィンドウとして表示できます。
こうやって別ウィンドウで開くことで、インスペクタでデバッグできるようになります。

chrome拡張機能を自作してウェブストアで公開する手順

画面右上にアイコンが追加されているはずです。アイコンをクリックしてポップアップが表示されればテスト成功。
あとは拡張機能を完成させていくだけとなります。

ajax時などの注意点

拡張機能の構築は、ウェブサイトを作るのと同じようにできる印象です。
先ほどテストで作ったpopup.htmlからjsやcssを読み込んで機能を作り込んでいきます。

chrome拡張機能を自作してウェブストアで公開する手順

今回作ったのはこんなポップアップ拡張機能。

  1. chromeの右上に表示されるアイコンをクリックするとポップアップが表示される
  2. ポップアップを開くと、「URL」「カテゴリ」「タグ」の入力欄
  3. その時閲覧しているページのURLを取得しURL入力欄に自動出力
  4. submitボタンが押されたら、入力されたデータをajaxで外部サイト(clink)へデータ送信
  5. ajaxで受け取ったデータを外部サイト(clink)側のデータベースに保管

ポップアップの内容の作り込みはhtmlとcssで作れば良いので簡単でしたが、今回は外部サイトとの通信が必要なのでその点が若干引っかかりました。

上記が、今回書いたmanifest.jsonの最終形態。

外部サイトとの通信に必要だったのは、manifest.jsonにpermissionsを追加して、通信を許可するサイトを記述すること。
また、外部サイト側ではPHPで処理していたのですが、「header(“Access-Control-Allow-Origin: *”);」を記述してリクエストを許可する必要もあります。忘れていて若干ハマったり。

また、今回大事だったのが、permissionsのtabs。

tabsを許可して、上記のようにjavascriptを書くと、拡張機能を使った時に開いているタブのページのURLを取得できます。
詳しい仕様は公式を見てみてください。色々あります。

https://developer.chrome.com/extensions/tabs

自作拡張機能をchromeウェブストアで公開する

さて、拡張機能が自作できたら、chromeウェブストアで公開して一般ユーザが使えるようにします。
注意点としては、拡張機能を登録する際にはデベロッパー登録する必要があり、初回にUS5ドルを支払う必要があります。

一般に公開する必要がなく自分で利用するだけなのであれば、テストでおこなったように「パッケージ化されていない拡張機能を読み込む」から利用すればよろしいかと。
一般に公開する必要がある方は、下記にお進みくださいまし。

デベロッパー登録し拡張機能をウェブストアで公開する手順

まずは Chrome ウェブストアへアクセス
https://chrome.google.com/webstore/category/extensions

chrome拡張機能を自作してウェブストアで公開する手順

ログインしてデベロッパーダッシュボードを開きます。

chrome拡張機能を自作してウェブストアで公開する手順

デベロッパーダッシュボードのアイテム追加部分の下に、初回はデベロッパー登録手数料が必要との旨が書かれています。
支払いボタンがあるのでクリックすると、支払い画面に遷移するので支払いを終えましょう。US5ドルになります。

chrome拡張機能を自作してウェブストアで公開する手順

支払いを終えると、「アイテムを公開できるようになりました」と表示されるはずです。
「新しいアイテムを追加する」ボタンから登録を進めます。

chrome拡張機能を自作してウェブストアで公開する手順

自作した拡張機能のファイル選択画面になります。
制作した拡張機能のファイルが入ったディレクトリをzipにし、「ファイルを選択→アップロード」することでアップロードできます。

chrome拡張機能を自作してウェブストアで公開する手順

manifest.jsonにエラーがあった場合などはエラーが出力されます。
直して改めてアップロードしましょう。

chrome拡張機能を自作してウェブストアで公開する手順

アップロードが成功すると、ウェブストアで表示される拡張機能の情報の入力画面になります。
アイコンなど含め、足りない部分はmanifest.jsonにも記載し、ファイルをアップロードし直して調整する形になります。

chrome拡張機能を自作してウェブストアで公開する手順

必要情報を入力して公開すれば、chromeウェブストアに掲載されます。

chrome拡張機能を自作してウェブストアで公開する手順

早速インストールしてみると、無事に追加されました!

chrome拡張機能を自作してウェブストアで公開する手順

アイコンをクリックしてみると無事に動作しているようです。
これでウェブストアでの公開は完了。

更新時も同じ手順になります。
注意点としては、manifest.jsonに記載しているversionは前回よりも高くしないとアップロード時にエラーが出ることくらいでしょうか。

まとめ

もっと色々と面倒かと思いましたが、意外とすんなり作れた拡張機能。
chromeウェブストアでの公開も思いの外それほど面倒ではありませんでしたね。

遅まきながらですが、拡張機能を利用すれば色々やれそうだなと妄想しております。

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。
制作のご依頼はお問い合わせフォームよりお願いします。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*