Hatena::ブログ(Diary)

風柳メモ このページをアンテナに追加 RSSフィード Twitter

2010-05-12

Twitterのタイムラインに名前を表示するユーザーサイドスクリプトのGoogle Chrome拡張機能版作成

f:id:furyu-tei:20100512193044p:image

こんな感じに、Twitterのタイムラインに名前(プロフィールに登録したもの)を表示するスクリプトのChrome拡張機能版を作ってみました。

Chrome Web Store - TwSwapName

からインストールできると思います。

「Google Chrome の設定」(スパナマーク)→「拡張機能(E)」で、TwSwapNameの[オプション]ボタンを押すと、

  1. 文頭表示を変えてフッタにユーザー名を挿入
  2. フッタにのみ名前を挿入

のどちらかを選ぶ画面がでてきます(オプションはこれだけです)。

なお、Google Chrome 4.1.249.1064 でしか動作確認してません。

GreasemonkeySeaHorseOpera以前の記事の通り

インストール:TwSwapName.user.js

からどうぞ。

経緯など

id:mi2maru さんより、

インストール後にファイルの編集をどの様にすればいいかわかりません

http://d.hatena.ne.jp/furyu-tei/20100202/1265112129#c1273480034

とコメントいただいたのですが、自分もわからなかったので(苦笑)。


ちなみに Chrome は、なにげに *.user.js のリンクをクリックしたり、*.user.js ファイルをドラッグ&ドロップしたりすると、ユーザサイドスクリプトとみなして、けなげにインストールしようとするのですよね。

なので最初は

「ローカルにダウンロードしたものを編集して、ドラッグアンドドロップして下さい。」

と返すつもりだったのですが、やってみると動かなかった、という(笑)。

やむを得ず(?)、Chrome拡張機能作成の練習も兼ねて、調べはじめた、というわけです。

覚書など

  • 元ページのwindowオブジェクトは、content_scriptsからは参照できない。今回の場合は、Twitterのページで既に読み込まれているjQueryの関数等も見えないため、別途jQueryを読み込む必要が有った*1
  • page間での通信はまぁ、Message Passing - Google Chrome Extensions - Google Codeを見なさい、ということかな。
  • パラメータの読み書きに使用するlocalStorageも、元ページからは参照できない(localStorageオブジェクトそのものはなぜか見えるが、パラメータはundefined)。なので、options_pageで変更したパラメータを読もうとすると、content_scriptsとbackground_pageとの間で通信をする必要があるみたいなのだけれど、これが非同期通信しかできなそうなので、content_scriptsでパラメータを読み出してすぐに処理を続けたいようなときにちょっと困りそう。上手いやり方あるのかな?
  • 拡張機能をGoogle chrome extensionsに登録しようとすると、ZIPのアップロードで失敗することがあった( "An error occurred: please try again later.")。何回も失敗したから作りが悪いのかと思ったけれど、その後同じZIPファイルで成功したので、エラー内容の通り、Googleの機嫌が悪かった(?)だけ、らしい。

それにしても、スクリプトひとつ書けば済むGreasemonkeyなんかと違って、いろいろ準備が必要な分、面倒くさいかも*2

*1:一応background_page等からはchrome.extension.getBackgroundPage()を使えば元ページのwindowは取れる。とはいえ、元ページ上のスクリプト関数を利用したり、置換したりするような拡張は書きづらいかも。

*2:そもそもGreasemonkeyだって、面倒だからhttp://userscripts.org/とかにも登録したことないしなぁ

mi2marumi2maru 2010/05/13 20:22 ありがとうございます…!早速いんすとーるしました…! ブラウザ別に色々対応させるのって大変なんですね… 因みに普段はchromeと火狐とoperaつかってます(*´ω`*) greasmonkeyすごいなー\(^o^)/operaの噛ませ方はわからないのでそっちはブックマーク手動でやってますー! 本当にありがとうございました!

furyu-teifuryu-tei 2010/05/13 22:45 動いてよかったです。

Operaの場合は、ユーザー JavaScript を置くためのフォルダが決まっているので、TwSwapName.user.js のリンクを右クリック→「リンク先のコンテンツを保存(S)」で、そこに保存すれば良いです(フォルダに置くだけで動作するようになります)。

Windowsの場合、当該フォルダはデフォルトでは
C:\Program Files\Opera\userscripts
になるはず。

実際には
「ツール(T)」→「設定(F)」→"詳細設定"タブ→左側の"コンテンツ"選択→□JavaScriptを有効にするのチェックを確認→その右横の「JavaScriptオプション...」で、"ユーザー JavaScript フォルダ"のところに書かれているのが当該フォルダになります。
(メニューが深すぎて私もすぐ調べ方を忘れちゃいますが……)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証