WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

リンク URL を書き換える Chrome / Opera 拡張「Link Tweak」を公開しました

Web ページのリンク URL を書き換える Chrome / Opera エクステンション「Link Tweak」を作ったので(なにげにエクステンションを作るのはこれが初めてです)、本日はそれをご紹介します。正規表現をベースにしたルールでリンク URL を書き換えるもので、以下のような用途を想定しています。

  • .pdf のリンクを Google Docs Viewer で閲覧する。
  • ?rss=1 のような余計なパラメータを削除する。
  • ?hl=en のような言語コードを書き換える。
  • 特定のサイトへのリンクをすべて https にする。

その他、フレキシブルに書き換えルールを設定できるので、いろいろと使えると思います。

実は Chrome Web StoreOpera Extensions では 3 週間くらい前に公開したのですが、震災やらなんやらでアナウンスできていませんでした。ついでなので少し機能強化して、 Version 1.1 にアップデートしてありますw

インストール

Opera 版、 Chrome 版の双方とも公式の配布サイトに登録してありますので、簡単にインストールできます。以下で個別に手順をご紹介します。なお、ソースコードは以下の場所に置いてあります。

http://code.google.com/p/linktweak/

Opera 版のインストール

Opera 版は以下のページで配布されています。

https://addons.opera.com/addons/extensions/details...

Opera ブラウザでこのページを表示し、「Install」をクリックするだけでエクステンションがインストールされます。その後、メニューから[ツール]-[エクステンション]-[拡張機能の管理]を選択することで拡張機能の管理ページが開きます。

Link Tweak の欄の歯車アイコンをクリックし、メニューから「設定」を選択すれば、設定画面が開きます。後述の方法で書き換えルールを指定してください。

Chrome 版のインストール

Chrome 版は Chrome Web Store で配布されています。

https://chrome.google.com/webstore/detail/dmdhdobh...

こちらも Chrome ブラウザでページを表示し、「Install」のクリックでエクステンションがインストールされます。その後、レンチメニューから[ツール]-[拡張機能]を選択することで拡張機能のページが開きます。

Link Tweak の欄の「オプション」をクリックすれば、設定画面が開きます。後述の方法で書き換えルールを指定してください。

プリセットルールを使う

Link Tweak には以下の 3 つのプリセットルールがあり、チェックを入れるだけで使えます。

  • 文書ファイル(.pdf, .doc, .ppt など)を Google Docs Viewer で開く。
  • 画像ファイル(.psd, .ai, .tiff など)を Google Docs Viewer で開く。
  • Google Calendar の「地図」で表示する Google Maps の言語(hl=xx パラメータ)を指定する。私は Google Calendar の言語を英語にして使っているのですが、そのままだと地図も英語表示になってしまうので、これで日本語に変換しています (^^;

これらを利用するには、まず前述の方法でエクステンションの設定画面を開きます。

そして、「Preset rules」の欄にあるチェックボックスのうち必要なものをチェックし(三番目のチェックボックスを入れたときは、テキストボックスにも ja, en などの言語コードを入力)、「Save」ボタンをクリックしてください。

例えば、一番目のチェックボックスを入れて以下のリンクをクリックすると、 Google Docs Viewer で ECMA 262 の仕様書が閲覧できます。

http://www.ecma-international.org/publications/fil...

もしうまくいかないときは、設定が正しく保存されているかを確認してください。また、ページのリロード時にフックスクリプトを挿入するので、設定の保存後のこのページを一度リロードしてください。

なお、 URL の書き換えはクリックしたときに行われますので、右クリックメニューの「開く」などを使えば、書き換え前のリンクに飛ぶことも可能です。

オリジナルの書き換えルールを追加する

プリセットされたルールだけでなく、独自のルールを設定することも可能です。設定画面の Rewrite rules の欄で設定します。

Rewrite pattern, Substitution, Conditions の 3 つがワンセットでひとつのルールになります。複数のルールを設定する場合は、「Add rule」のリンクをクリックすることで欄を増やすことができます。各項目の意味は以下のとおりです。

項目名内容
Rewrite patternリンク URL 中の書き換える部分を指定する正規表現
SubstitutionRewrite pattern にマッチした部分を置き換える文字列
Conditionsここで指定した条件がすべて真だった場合に書き換えを行う

Conditions で指定する条件は、ドロップダウンで以下の 4 つから選べます。リンク URL とはクリックされた A タグの href 属性、 ページ URL は location.href の値です。「Add condition」をクリックすることで、複数の条件を指定することも可能です。

項目名内容
Link url is matched withリンク URL が指定した正規表現にマッチした場合に真
Link url is not matched withリンク URL が指定した正規表現にマッチしなかった場合に真
Page url is matched withページ URL が指定した正規表現にマッチした場合に真
Page url is not matched withページ URL が指定した正規表現にマッチしなかった場合に真

また、 Substitution では $0 〜 $9 の特殊文字が使用できます。 $1 〜 $9 は String.replace と同じく、正規表現 (Rewrite pattern) の対応する丸括弧内のマッチの内容に置換されます。 $0 はちょっと特殊で、マッチ全体の文字列を URL エスケープした文字列に置換されます。ちょっと不自然な仕様ですが、ご勘弁を(^^ゞ

例として、私が設定しているルールをひとつご紹介します。私は Google の各種 API のドキュメントを見るのに Google で検索して行きます。しかし、そのままだと日本語のページが表示されてしまい、情報が古かったりしていまいちです。そこで、以下のように設定して直で英語ページに飛べるようにしています。

項目名設定値
Rewrite pattern/apis/
Substitution/intl/en/apis/
Conditions (1)Link url is matched with : ^https?://code\.google\.com/apis/
Conditions (2)Page url is matched with : ^https?://(?:www|encrypted)\.google\.(?:com|co\.jp)/search

これにより、例えば http://code.google.com/apis/calendar/http://code.google.com/intl/en/apis/calendar/ に書き換えられ、英語のページに飛ぶようになります。この書き換えはページ URL が Google 検索の結果ページで、かつリンク URL が http (もしくは https) ://code.google.com/apis/ で始まる場合にしか行われません。

このほか、プリセットルールを有効にするとルールのパラメータが表示されますので、参考にしてください。

以上、本日は Chrome / Opera エクステンション「Link Tweak」をご紹介しました。基本的に自分のために作ったものなのですが、もし便利と思っていただけるようでしたら、ぜひご活用ください。また、バグ報告やご要望などありましたら、コメントしていただけると嬉しいです。

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles