ブラウザで使えるミニツールを作ろう

目次

  1. ブックマークレット
  2. Chrome拡張（Extension）

ブックマークレット

ブックマークレットとは

基本

javascript:(function(){
  /* ここにプログラムを書く */
})()

サンプル（基本）

アラートにテキストを表示
javascript:(function(){alert('Hello! World.')})()
アラートにページタイトルを表示
javascript:(function(){alert(document.title)})()
別ウインドウにページタイトルを表示
javascript:(function(){window.open().document.write('<p>'+document.title+'</p>')})()
タイトルとURLをコピー（クリックボードの直接操作は厄介）
javascript:(function(){window.prompt('タイトルとURLをコピー', document.title + '\n' + location.href)})()
Cookieを表示
javascript:(function(){alert(document.cookie)})()
Googleでページタイトルを検索
javascript:(function(){window.open('https://www.google.co.jp/search?q='+document.title)})()
Googleでページタイトルを検索（UTF8以外のページにも対応）
javascript:(function(){window.open('https://www.google.co.jp/search?q='+encodeURIComponent(document.title))})()

サンプル（応用）

引数で宣言
javascript:(function(d,l){alert(d.title+'\n'+l.href)})(document,location)
Googleで選択文字列を検索
javascript:(function(d,e){window.open('https://www.google.co.jp/search?q='+e(d.selection?d.selection.createRange().text:d.getSelection()))})(document,encodeURIComponent)
外部JSファイルを実行
javascript:(function(d){var s=d.createElement('script');s.src='//example.com/hello.js';d.body.appendChild(s)})(document)

注意

ブックマークレットを実行するページがSSLの場合、外部JSファイルもSSLである必要がある

→ブックマークレット置き場用に、SSL対応の開発用サーバあるといいかも
　もしくは外部JSファイルを使わずにブックマークレットを作る

ブックマークレット内でAjax通信を行う場合、ドメインが異なると実行できない

→ブックマークレットをリポジトリに含めて、各環境にデプロイするといいかも
　もしくはAjax通信しない範囲でブックマークレットを作る

参考ページ

ブックマークレットを作るときのTips
http://qiita.com/xtetsuji/items/e8b61bb39c41b7a9345e

いまさらまとめるブックマークレットの作り方 ～ 2016年版 ～
http://blog.mudatobunka.org/entry/2016/02/29/030633

各ブラウザのブックマークレット限界文字数
http://koumeis.hatenablog.jp/entry/20090525/1243260713

ブックマークレットで jQuery を使う魔法の 210 文字
http://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c

より高度なことをしたければ…

FirefoxでGreasemonkeyという拡張が作成され、ユーザスクリプトによってページを拡張できるようになった

Chromeでは同等の拡張としてTampermonkeyが作成されたが、セキュリティの懸念からあまり使われなくなった（ように思う）

同じような機能は、Chromeの拡張として作成すれば実現可能

Chrome拡張（Extension）

Chrome拡張とは

作成の流れ

  1. manifestファイルを作ります
  2. アイコンを作ります
  3. JavaScriptを書きます（必要に応じてHTML、CSS、画像なども作成）
  4. Chromeに読み込ませて実行します
  5. ストアで公開します（任意）

1. manifestファイルを作ります

manifest.json を作成
以降、ファイルの文字コードはすべてUTF-8N

2. アイコンを作ります

128px × 128px でアイコンを作成
PNG32 で 128px と 16px の大きさのアイコンを書き出す（必要に応じて、他のサイズでも書き出す）

3. JavaScriptを書きます

popup.html を作成

4. Chromeに読み込ませて実行します

  1. Chromeのメニューから「その他ツール → 拡張機能」を選択
  2. 「デベロッパーモード」にチェックを入れる
  3. 「パッケージ化されていない拡張機能を読み込む」を押して、作成した拡張機能のフォルダを選択する
  4. ツールバーにボタンが表示され、クリックでポップアップが表示されれば成功

5. ストアで公開します

ストアで公開するには、初回のみデベロッパー登録手数料が必要（5ドル）
例: https://chrome.google.com/webstore/detail/close-right-tabs/ahdnifnjcpeklloobmgkkidkaedkodii

アイコンについて補足

128 * 128 ... ストアや拡張機能の詳細ページなどで使用されます
48 * 48 ... 拡張機能ページで使用されます
19 * 19 ... ツールバーに使用されます
16 * 16 ... ファビコンとして使用されます

※正方形のアイコンは、ストアの詳細ページでは 96 * 96 にして周囲に余白を設けます

参考ページ

Google Chrome Extensionの作り方 第１回 ～Hello World編～
https://risaiku.net/archives/1653/

jQuery を使って 30 分で Chrome 拡張を作ってみた（ページの表示を変更するプラグインの解説）
http://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html