memoile

Icon

Opera Extension: Hatena Bookmark Comments 更新

Opera 11.00にてopera.extension.tabs.getFocusedでページ内のiframeと通信してしまう現象に遭遇したので、更新しました。

htbcomment.oex ver 0.2

例えば、とあるページの中にAmazonの広告がiframeで埋め込まれていた場合、タブのfocusイベントでは正常にWebページと通信できていましたが、popupからのpostmessage後のmessageイベント中だとなぜかiframeと通信してしまいます。getFocused()で返ってきたオブジェクトの中身がiframeのものになっている状態です。

popupからbackgroundを介してinjectedと直接通信する作りになっていたので、表示しているページのDOM要素等を正確に取得することができません。

opera.extension.tabs.addEventListener("focus", function() {
  var tab = opera.extension.tabs.getFocused();
  if(tab && tab.url) {
    opera.postError(tab.url); // => hogehoge.jp/
  }
}, false);

opera.extension.onmessage = function(e) {
  if(e.data.act == "get_url") { // from popup
    var tab = Oex.tabs.getFocused();
    if(tab && tab.url) {
      opera.postError(tab.url); // => rcm-jp.amazon.co.jp/e/cm?...
    }
  }
}

focus時は正常に取得できているようなので、focus時にキャッシュしておいて、messageイベント中はgetFocusedを利用せずにキャッシュしたタブオブジェクトからpostMessageすれば正常にDOM要素等も取れるかと思ったら、通信先はキッチリiframeでした。

var curtab = null;
opera.extension.tabs.addEventListener("focus", function() {
  var tab = opera.extension.tabs.getFocused();
  curtab = tab ? tab : null;
  opera.postError(curtab.url); // => hogehoge.jp/
}, false);

opera.extension.onmessage = function(e) {
  if(e.data.act == "get_url") { // from popup
    if(curtab && curtab.url) {
      opera.postError(curtab.url); // => hogehoge.jp/
      curtab.postMessage(""); // => injected script in rcm-jp.amazon.co.jp/e/cm?... 
    }
  }
}

幸い、Hatena Bookmark Commentsはurlとtitleだけ取れればいい上に、tabオブジェクトからtitleが参照できることを知ったので、この不具合はすぐに修正できました。

直接通信しなければいいので回避方法はいくらでもありますが、postMessageで直接やりとりするような場合は注意したいです。

Post to TwitterTweets for this web page Hatena Bookmark for this entryHatena Bookmark - Opera Extension: Hatena Bookmark Comments 更新 Clip this entry on Livedoor ClipLivedoor Clip - Opera Extension: Hatena Bookmark Comments 更新 Add to Google Bookmark Share on Tumblr Share on FriendFeed Digg This

Opera Extension 試作品: Hatena Bookmark Comments

htbcomment.oex

ファイルを保存後、Operaのウインドウにドラッグ&ドロップするとインストールすることができます。

ツールバーのボタンに現在見ているページのはてなブックマークでブックマークされている数を表示し、ボタンをクリックするとポップアップでコメントを表示します。設定でポップアップウインドウのサイズとユーザーアイコンの表示/非表示の切り替えが可能です。はてなブックマーク Chrome拡張のシンプル版というか劣化版です。

20110111_htboex

Getting started with Opera extensionsOpera Extensions API guidesを読みながら、Extension開発でよく使われるであろう機能を一通り実装してみようと思って、このExtensionを作成しました。

  • popup / background / injected それぞれの間でのデータの送受信
  • クロスドメインアクセス
  • Widgetによるデータの保存
  • 設定ページの適用

などなど。おかげでどういったものが作れそうなのかがある程度分かりました。ローカルへのアクセスは無理なようなので、UserScript以上Unite/Widget未満ってとこですかね。

自動アップデート付きでExtensionをインストールさせるには公式ページで公開してもらわなければいけないのがちと不満ですが、それ以外はとくに難しい箇所もなくサクサク作れるのがいいと思いました。

Post to TwitterTweets for this web page Hatena Bookmark for this entryHatena Bookmark - Opera Extension 試作品: Hatena Bookmark Comments Clip this entry on Livedoor ClipLivedoor Clip - Opera Extension 試作品: Hatena Bookmark Comments Add to Google Bookmark Share on Tumblr Share on FriendFeed Digg This

Opera 11に導入したExtension色々

Opera 11からOpera Extensionという、いわゆる拡張に対応するようになったので、導入したExtensionを紹介します。

Translator

選択したテキストをGoogle Translateで翻訳、というか、Google Translateの翻訳フォームをポップアップに表示する、が正しいかも。

Simple ToDo Manager

To-Do管理。列挙して消化したら消すだけ。ツールバーにはタスク数を表示するという、本当にシンプル。外部サイトを使わないローカル保存。

To-Read sites

いわゆる「あとで読む」。追加したサイトはクリックすると開きつつリストから削除される。削除されないようにロックすることも可能。

追加するのにいちいちツールバーのボタンをクリックして、ポップアップのAddボタンをクリックしなければいけないので、ショートカットキー一発で登録ができると嬉しいかも。

Popup statusbar

Google Chrome風のステータスバーを表示。

LinkRedirector

Google画像検索等のクッションページを排除して、直接アクセスできるようにする。

Image Autosizer

開いた画像をウインドウ幅に合わせて調整してくれる。

Image Preview Popup

リンク先の画像をポップアップで表示する。

Fast search

テキストを選択してSキーを押すとバックグラウンドで検索できる。

Clipper

Ctrl+Cでコピーしたテキストを蓄積していく。ブラウザを閉じるかExtensionを無効化するとリセットされる。

BinFix

圧縮ファイル等を開いてもファイル保存ダイアログが表示されずにバイナリがそのまま表示されてしまうような場合、正常にファイルとしてダウンロードできるようにする。

AutoPatchWork

AutoPagerizeクローン。現在のページに次のページの要素を継ぎ足していく。

open-in-background-with-long-press

リンクをクリック長押しするとバックグラウンドでページを開く。ホイールクリックよりは操作コストが少ないのが魅力的。

Snap Links

マウスドラッグで枠が表示されるようになり、枠にリンクを複数含むようにしてマウスボタンを放すと、含んだ全てのリンクを開いてくれる。

User Script版では可能だった、Ctrlキーで動作、現在のタブに開く、重複リンクを開く、といった機能が省かれている。

作者は同じなので、今後対応されるとは思う。

Slim ScrollBar

細いスクロールバーを表示する。このスクロールバーはスクロール直後に数秒だけ表示されてフェードアウトしていくので、スクロールバー非表示環境だけどスクロール位置は確認したい、という時に便利。

導入後、「設定(Ctrl+F12)>詳細設定タブ>閲覧>スクロールバーを表示する」のチェックを外してデフォルトのスクロールバーを非表示にしよう。

Easy Youtube Video Downloader For Opera

Youtubeの動画ページに動画をダウンロードするインターフェースを追加する。

Youtube Autoplay Killer

Youtubeの動画ページを開いた際に自動で再生が始まるのを防ぐ。それだけ。

YouTube AdsFree

Youtubeの動画再生時に表示される広告を表示しないようにする。

UserScriptから変換したExtension

word highlight

Google検索結果及び結果から飛んだサイトで検索キーワードをハイライトする。

jaro.js

Google検索にてスパムリンクを分かりやすく表示する。

Text URL Linker

リンクになっていないURLをリンクにする。2chのh抜きURL等。

Link alert

リンクにカーソルを載せると、リンクの種類に応じてアイコンが表示されるようになる。別タブ・各種メディアアイコン等。

雑感

ツールバーへボタンを追加するExtensionについて

GoogleChrome同様、Extensionを入れれば入れるほどツールバーを圧迫するので、製作する場合はツールバーにボタンを追加するのが本当に必要かどうか考えるべきだと思います。

例えば、上で紹介したYoutube Autoplay Killerは機能のON/OFFを切り替える為だけにボタンを追加しています。Opera Extensionでは専用の設定ページを用意することも可能なので、頻繁に切り替えないような設定ならそちらで行うべきです。そもそも、Youtube Autoplay Killerは自動再生のON/OFFのみの機能なので、OFFにしたい場合は拡張を無効化すれば事足ります。

それ○○○でよくね?

現在公開されているExtensionの中にはExtensionにするどころか、Operaのメニューを弄るだけ、Bookmarkletで十分、UserScriptで全て済んでしまうExtensionも多々存在します。

しかし、Operaの知識がほとんど無い人でもExtensionを導入するだけでこれらの恩恵を受けられるというのは非常に重要だと思うので、Operaを使い込んでる玄人から見てくだらないと思うようなものでも、自分が便利だと判断したら、どんどんExtensionにしてしまえばいいんじゃないかと思います。

UserScriptをExtensionに変換するのを試みてるのもそういった考えがあってのことです。

拡張管理ページについて

今現在Extensionを作成中・実験用含めて30前後導入していますが、OperaのExtension管理ページがホイールを回してもスクロール量が非常に小さく、PageUp・PgDown・Home・Endキーが効かないので目的のExtensionを探すのが一苦労で仕方無いです。ここらへん、なんとかなりませんかね?

合わせて読みたいかもしれない

Post to TwitterTweets for this web page Hatena Bookmark for this entryHatena Bookmark - Opera 11に導入したExtension色々 Clip this entry on Livedoor ClipLivedoor Clip - Opera 11に導入したExtension色々 Add to Google Bookmark Share on Tumblr Share on FriendFeed Digg This

OperaのUserScriptをExtensionに変換できるかもしれないExtension

us2oex.oex

2011/1/7 ちょっと更新。作者名やバージョンも拾うようにして、ポップアップを表示しないようにしました。

非公式Extensionなので、右クリックから保存後Operaのウインドウにドラッグ&ドロップしてください。

インストール後、ツールバーにパズルのピースのようなボタン(設定してないのでデフォ)が表示されるので、Web上のUserScriptファイルか、ローカルのUserScriptファイルをOperaで開いた状態で押して下さい。

妙なポップアップの後にZipファイルのダウンロードダイアログが表示されます。拡張子をoexにすれば、名前は適当で構いません。

保存したoexファイルをOperaのウインドウにドラッグ&ドロップしてください。

注意

  • 精度はあまり良くないです。動いたらラッキー程度に思ってください
  • 上書き更新とかできません。同じスクリプトをインストールする場合は、先にアンインストールしてください。

やってること

  1. UserScriptのソースを開いているページから取得
  2. グローバルがwindowではなくなってるので、window.を付加してあげる
  3. Greasemonkeyなら、DOMContentLoaded後に動作するようにしてあげる
  4. config.xml、index.htmlをでっちあげる
  5. JavaScript 内で無圧縮 ZIP を作って Data URI を生成するライブラリを作りました – IT戦記
  6. 完成

一応手元のUserScriptは大体動いていますが、以下のスクリプトは今のところ対応していません。

  1. 複数ファイルで動作するもの
  2. iframeを操作するもの

window.を付加する代わりに…

this.document = window.documentと、ひたすら列挙するほうが楽ですが、何が起こるか分からないので、とりあえず力技で変換してます。

いちいちzipが面倒

一応、application/x-opera-extensionをつけてあげれば一発インストールは可能ですが、何か怖いのでとりあえず様子見。

その他

とりあえずで作ったので、インターフェース等が最悪です。おいおい直すかもしれません。あと、変換できなかったスクリプトを教えて頂けると、余裕を見て対応したいと思います。UserScriptとInjected Scriptの仕様の違いが全然分かっていないので、参考にしたいです。

Post to TwitterTweets for this web page Hatena Bookmark for this entryHatena Bookmark - OperaのUserScriptをExtensionに変換できるかもしれないExtension Clip this entry on Livedoor ClipLivedoor Clip - OperaのUserScriptをExtensionに変換できるかもしれないExtension Add to Google Bookmark Share on Tumblr Share on FriendFeed Digg This