Tech Sketch Bucket of Technical Chips by TIS Inc.

Greasemonkey ScriptをChrome Web Storeに公開する

Pocket

過去のGoogle ChromeはFirefox用Greasemonkey Scriptに標準対応していましたが、現在ではセキュリティ上の問題によりWebからのインストールは非対応となっています。この記事ではFirefox用Greasemonkey ScriptをChrome拡張に置き換え、Chrome Web Storeで公開するまでの手順を示します。


FirefoxのGreasemonkeyプラグイン

Firefoxの Greasemonkey は既存ページに様々な変更を加えることのできる便利なプラグインです。
Greasemonkey用のスクリプトを読み込ませることで、特定のページを開いたときに自動的にJavaScriptを実行することができ、画面の見た目の変化やちょっとした機能の追加など、自分の管理下にないWebページに対して、カスタマイズを施すことができます。

こんな便利なGreasemonkeyですが、Google Chromeで使用するには一手間かける必要があります。以前のGoogle ChromeはGreasemonkey Scriptに標準で対応していたため、Webサイト上に配置した*.user.jsファイルにアクセスすればインストールが行えたのですが、現在ではセキュリティ上の理由によりWebサイトからの直接インストールはできなくなっています。

この記事では 「AWS Management Consoleのタイトルを変更する拡張機能」 で作成した aws_title_changer.user.js を拡張機能としてChrome Web Storeに公開するまでの流れをまとめていきたいと思います。

Greasemonkey ScriptをGoogle Chrome上で動かす

と、書いておいて何ですが、Greasemonkey ScriptをGoogle Chrome上で動かすだけであれば、必ずしもWeb Storeに公開する必要はありません。
Web Storeへの公開方法を見る前に、まずはそれ以外の方法を見てみましょう。

方法1: スクリプトを拡張機能としてそのままインストールする

Webサイト上から直接インストールすることはできませんが、*.user.jsファイルを一度ローカルにダウンロードし、「拡張機能」タブにドラッグ&ドロップすればインストールすることができます。少人数向けのGreasemonkey Scriptや、使用するユーザがPCに慣れている場合にはこれも一つの方法ですが、やはり面倒な感は否めません。
method1.png

方法2: Greasemonkey互換のChrome拡張をインストールする

別の方法としては、Greasemonkeyプラグインと同等の機能を持ったChrome拡張をインストールするという方法もあります。Chrome拡張には何種類か存在しますが、たとえば Tampermonkey を事前にインストールしておくと、既存の*.user.jsにアクセスするだけでインストールが行えるようになります。
method2.png

Greasemonkey Scriptを拡張機能としてChrome Web Storeに公開する

これら2つの方法でGreasemonkey Scriptを使うこと自体はできるのですが、個人で使うならともかく一般ユーザ全員にこの手順をとってもらうのは厳しいものがあります。その点、Chrome Web Storeに公開してしまえば一般ユーザにも容易にインストールしてもらうことができますし、バグが見つかった際には自動更新を適用してもらうこともできます。

Chrome Web Storeでは「アプリ」、「拡張機能」、「テーマ」という三種類を公開することができますが、Greasemonkey Scriptが対応するのは「拡張機能」になります。Chrome Web Storeで拡張機能を公開する記事は他にもあるため、この記事では「Greasemonkey Scriptを公開するために最低限しなければならないこと」について書いていきたいと思います。

既存のGreasemonkey Scriptを拡張機能に変換する場合、必要なファイルは以下の3つになります。

  • manifest.json(必須)
  • icon.png(推奨)
  • 対象のGreasemonkey Script(必須)

manifest.jsonを作成する

まずはmanifest.jsonを作成します。これは拡張機能のメタデータを格納したJSON形式のテキストファイルで、拡張機能の種類によって記述内容が決められています。
Greasemonkey Scriptを拡張機能にする場合は、共通部分の要素に加えてcontent_scriptsを記述するため、以下のような内容になります。

manifest_version

manifest.json自体のフォーマットを示すバージョンです。2013年4月現在では2に固定されています。

name

拡張機能の名前です。Chrome Web StoreやChromeの拡張機能タブに表示されます。
Greasemonkey Scriptの際に使っていた名前(@name)と同じで問題ないでしょう。

version

拡張機能のバージョンを示します。自動更新に使われるため、公開済みの拡張機能を変更した場合にはバージョンをあげないと公開時にエラーとなります。

description

拡張機能の説明文です。nameと同じく、Chrome Web StoreやChromeの拡張機能タブに表示されます。
100~200バイト程度が多いようです。Greasemonkey Scriptの際に使っていた説明(@description)と同じで問題ないでしょう。

icons

拡張機能タブに表示されるアイコンを指定します。指定しない場合にはChrome標準のパズルピース型アイコンが使われるため、省略可能ではありますが、拡張機能の数が増えると見分けづらいため指定しておくことを推奨します。
Greasemonkey ScriptをChrome拡張にした場合ボタンなどが表示されることは無いため、拡張機能タブで表示される48 × 48ピクセルの画像があれば十分と思われます。

content_scripts

Greasemonkey Scriptを動かすためのメイン設定です。
matchesにはGreasemonkey Scriptの@includeに指定していた対象サイトのURLを記述し、jsにGreasemonkey Script本体を指定します。
Greasemonkey Scriptで@requireを用いてjQueryなどを読み込んでいた場合には、jQueryのJSファイルを同一ディレクトリに配置した上でjsの配列に指定すると、前から順に読み込まれて動作します。

icon画像を作成する

manifest.jsonと同一のディレクトリに48 × 48ピクセルのアイコンファイルを作成します。
ファイル名をmanifest.jsonのiconsに指定したファイル名にすることで自動的に読み込まれるようになります。
また、後述するデベロッパーダッシュボードでは大きいサイズのアイコンが必要になるため、アイコン作成の際に96 × 96ピクセルで作成し、半分に縮小したものを使用すると手間が省けます。

既存のGreasemonkey Scriptを配置する

Firefox版Greasemonkeyの独自機能(GM_*系など)を使用している場合には動かないことがありますが、基本的なGreasemonkey Scriptであれば大抵はそのままでも動作するため、そのままmanifest.jsonと同一のディレクトリに配置します。

Chrome Web Storeへの公開

これら3つのファイルを含んだディレクトリをzipファイルに圧縮し、 デベロッパーダッシュボード からアップロードします。zipファイルのファイル名には特に制約がありません。

また、ブラウザ上で詳細説明や、アイコン、プロモーション用画像の指定を行うことができます。これらについては省略することも可能ですが、Chrome Web Store上での見た目に直接影響するため、拡張機能の名前を書いた画像程度でも良いので指定しておくことを推奨します。

デベロッパーダッシュボードから「公開」を行えば拡張機能が全Chromeユーザに公開されますが、検索に引っかかるようになるのにはしばらく時間が必要なようです。
初回公開時のみ5ドルの費用が掛かりますが二度目以降は不要ですし、手元に便利な自作Greasemonkey Scriptを持っている方はChrome Web Storeでも公開してみてはいかがでしょうか?

method3.png

エンジニア採用中!私たちと一緒に働いてみませんか?