社内用Google Chrome拡張機能を作ろう

こんにちは。エンジニアの加藤です。
私はしばらく前から社内用のGoogle Chrome拡張機能を作って社内公開しています。
今回はその紹介と、簡単な拡張の作り方、配布方法の話をしたいと思います。

いきさつ

大抵のウェブサービスには、様々な設定や操作をするための管理画面が作られていると思います。
もちろんココナラにも管理画面があり、様々な目的で使われています。
エンジニアも、バグやお問い合わせに対する調査などで使うことがあります。

私も長いこと何も考えずに使っていましたが、あるときふと無駄な作業をしているな…と気付きました。
例えばサービスの画面を開いているときにそのサービスの管理画面に行きたい場合、サービスIDをコピーしてから管理画面を開き、IDをペーストして検索、その検索結果をクリック、という手順を踏んでいました。
エンジニアはそれほど頻繁に使うわけではありませんが、よく使うCSのメンバーなどは毎日何度もこの作業を繰り返すため、積み重なって大きな手間になります。

そこでChrome拡張を作って、現在開いている画面に関連する管理画面を1クリックで開くことができるようにしました。

f:id:tiger4th:20181120205256p:plain:w200

サービスやユーザーなどの画面の場合も、URLに含まれるIDを取得して管理画面へのリンクを作るので、入力や検索の手間がなくなります。

拡張機能の作り方

Chrome拡張は、ウェブサイトと同じような感覚で簡単に作ることができます。
作った拡張は、Chromeウェブストアで配布しなくてもファイルを配ればインストールできるので、自分用や社内用のちょっとした拡張も気軽に作ることができます。

今回の拡張のファイル構成は以下のようになっています。

f:id:tiger4th:20181120205352p:plain:w200

拡張機能として特別必要なのは manifest.json だけで、後は通常のHTML, CSS, JSでできています。
jQueryやBootstrapなども普通に読み込んで使うことができます。
manifest.json の中身は以下の通りです。

{
  "manifest_version": 2,
  "name": "Coconala Admin Extension",
  "version": "1.2",
  "browser_action": {
    "default_popup": "html/popup.html"
  },
  "permissions": [
    "tabs"
  ],
  "icons" : {
    "128": "img/icon.png"
  }
}

manifest_version: 固定値2を入れる
name: 拡張機能の名前
version: 拡張機能のバージョン
browser_action: 拡張機能の設定。default_popupはポップアップで開くHTMLファイルのパス（詳細）
permissions: 拡張機能に必要なパーミッション（詳細）
icons: アドレスバーなどに表示されるアイコン画像のパス（詳細）

JSからChromeが用意したAPIを使うこともできます。
今回は tabs のパーミッションがあると使える chrome.tabs APIを使って、下記のように開いているページのURLを取得しています。（API詳細）

chrome.tabs.getSelected(null, function(tab){
  var url = tab.url;
  ...
});

その他の詳細は公式ドキュメントをご覧ください。

これらのファイルが入ったディレクトリを、Chromeの拡張機能画面（chrome://extensions/）でデベロッパーモードを有効にし、「パッケージ化されていない拡張機能を読み込む」で読み込むと、拡張をインストールした状態になります。
その状態でファイルを編集するとChrome上にもすぐに反映されるため、動作確認を行いながらスムーズに開発できます。

f:id:tiger4th:20181120210357p:plain

拡張機能を配布する

拡張機能が完成したら、拡張機能画面の「拡張機能をパッケージ化」で配布用の.crxファイルを作ることができます。
.crxファイルは、拡張機能画面にドラッグ&ドロップするだけでインストールすることができるので、社内で見られるところにファイルを置けば利用できるようになります。

せっかく作ったのであれば、より使ってもらえるように社内のWikiなどに説明のページを作ると良いでしょう。
今回の拡張では特にエンジニア以外にも使ってもらいたいので、画像付きの詳しいインストール方法の解説も用意しました。

f:id:tiger4th:20181120205558p:plain:w400

.crxファイルをこのページに添付しておけば、ダウンロードしてインストールすることができます。

Chrome 71以降で配布するには

ただし、2018年12月にアップデートが予定されているChrome 71以降では、Chromeウェブストア以外から拡張機能をインストールできなくなってしまいます。（参考）

実際にChrome Canary (Chrome 72)で試してみたところ、以下のような表示が出てインストールできませんでした。

f:id:tiger4th:20181120205813p:plain

しかし、社内などの限定的な配布であれば、ソースコードをパッケージ化せずにzipに圧縮するなどして配布し、開発時のようにデベロッパーモードで読み込みをしてもらうことで利用は可能です。
少し手順が複雑になってしまいますが、この方法であれば今後も利用可能なはずです。

最後に

この拡張機能を使ってみたい方はこちらをご覧ください！ yomoyamablog.coconala.co.jp yomoyamablog.coconala.co.jp

Copyright © coconala Inc. All Rights Reserved.