Twitter用埋め込みコードを取得する Google Chrome 拡張

▼ Google Chrome で以下をクリックして下さい(ダウンロードして、Chrome にドラッグ&ドロップでも OK )
https://winofsql.jp/download/twitter_get_embed.crx



IE と Firefox で作ったものとほぼ同等の機能を Chrome の 拡張で実装しました。
IE と Firefox はかなり作り込んだ経験を持ってますが、Chrome の拡張は手強か
ったです。特に、直接 WEB ページ上のオブシェクトを操作できないので、Flex の
ようなイベントの連鎖で作業を書いていかないといけないので大変でした。

でも、おかげでいろいろノウハウも手に入ったので解説するのが楽しみです。

ダウンロードして、拡張子を .zip に変更して解凍してサンプルとして見た
ほうが早いとは思いますが、さすがにソースコードだけでは理解不能な部分
が多いです。Google のドキュメントを見ながらですらやっとの思いで完成
させましたし( 実際バグっぽい部分の対症療法も残っていますし )

この処理に特に必要は無かったのですが、サンプルとして使いたかったので、
WEBページと拡張の対話のバリエーションも組み込んであります。マニフェス
トファイルの内容が重要になるので、ドキュメントの参照は必要です。

機能実装の必要から、別ドメイン間のデータ交換テクニックである、メッセ
ージのポストと、ローカルストレージの利用はおすすめです。

1) 右クリックのポップアップメニュー( リンクのみのメニュー )
2) メニューから一旦 WEB 上に組み込んだ関数を呼び出す(強制呼び出し)
3) WEB ページの情報を取得して、再び拡張を呼び返す(送信)
4) 受信してからモーダルダイアログ(実際はモーダルにはならない)を開く
5) XMLHttpRequest で Twitter API を呼び出してデータを取得
6) クリップボードにコピー
7) 別ドメインのページをデータ交換してから呼び出す

関連する記事

Twitter用埋め込みコードを取得する IE拡張
Twitter用埋め込みコードを取得する Firefox アドオン