ソーシャルてんこ盛りの Chrome 拡張機能!バージョン0.9!

ソーシャルてんこ盛り Chrome 拡張機能 0.9
バージョンは0.9!てんこ盛り!

バージョンは0.9!

ソーシャルてんこ盛りの Chrome 拡張機能をはじめて作った(バージョン0.1)のが去年の12月の事で、あれからほぼ1年経過していました。当時ただの勢いだけで作ったので今見直すと色々とひどい!!
とりあえず現状で確認出来ている問題点は以下。

ソーシャルてんこ盛り Chrome 拡張機能 0.1

  • ポップアップ内の下部に変な余白が出来る。(これはChrome側の拡張機能の仕様が変わったんだと推測。)
  • Evernote のサイトメモリーでクリップすると拡張機能のポップアップで表示されているページの内容をクリップしている。(本当は開いているタブの内容をクリップしないとダメ!)
  • Tumblr のシェアボタンで文章の引用(Quote)が機能していない。

今回のバージョン0.9は以下。

ソーシャルてんこ盛り Chrome 拡張機能 0.9

  • 変な余白は CSS で html の height を指定する事で解消。
  • Evernote のクリップは強引な方法(タブのURLをiframeで開いてbodyのソースを直接送信)でとりあえず解消。
  • Tumblr の引用ポストはまだダメw(もう少し拡張機能を学習しないとダメ)

バージョン0.1から0.9での変更点は以下。

  • ポップアップの縦幅を大きくした。(ツイートを見やすく!)
  • タブのファビコン&タイトル表示を無くした。
  • はてブボタンを新しい物に変更した。(深い意味はなく、なんとなく…w)
  • ツイートの取得をブックマークレットと同じく getJSON.js を使う様に変更した。(そぷさんありがとうございまーす!!m(__)mペコリ)
  • js と CSS は外部ファイルにした。
  • あとは細々したソースコードの改修など、…などなど。

ダウンロード&インストール!

ソーシャルてんこ盛りのカラーは3色!

お色は選べる3色でーす!前回と同じですw

ブルー グレー ピンク

上記リンクの「.crx」ファイルをデスクトップ等に一度ダウンロードしてから拡張機能の画面(chrome://chrome/extensions/)を開いてドラッグ&ドロップしてみてください。

不具合などありましたら @actywav までお願いしまーす。m(__)mペコリ
ちなみに動作確認は Mac の Chrome でしかおこなっていません。

ほぼひとりごと

以下どうでも良さそうな内容をダラダラと、備忘録的な目的も含みます。

えーっと、そもそもブックマークレットとか拡張機能を作るようになった理由なのですが、Chrome が重い〜と感じたらすぐチェック!の記事で Chrome が重かったのでどうすれば軽く使えるんだろ?と思い検証しました。すると、今なら常識だと思うのですが、拡張機能を沢山入れていると Chrome 全体が重くなってしまうんですよね?

それでブックマークレットだと拡張機能と比較してかなりメモリ消費量も少なく快適に使える事が分かったので、ブックマークレットに興味を持ったわたしは自分で使いたいブックマークレットを作るべく ソーシャル系サービスを複数もりこんだブックマークレットを作りましたー! ではじめてのブックマークレットを公開しました。

その後に何がキッカケだったのか忘れてしまいましたが、Chrome の拡張機能が比較的簡単に作れる事を知り、ただの興味本位&勢いで作って公開してしまったのでした。なので本来の目的(Chromeを軽く使う)で言えばブックマークレットだけあれば満足なのでした!

だけど、最近は拡張機能をまた使う様になってきていて、と言うのもブラウザでショートカットキーとか割当てればブックマークレットも一発で使えるんでしょうけど、わたしはもっぱらマウス派で1クリックで使える拡張機能はやっぱり便利だなーと思っています。

こんな経緯があり最近になって拡張機能を触ってみたのですが、バージョン0.1がひどい事に気付き、今さらになって改修している次第です…。公開してからもうすぐ1年だよ!ひどいねー!

今後の予定は、とりあえず Tumblr のシェアボタンで引用ポスト出来るようにする事と表示速度の改善が出来たらなーと思っています。拡張機能、ブックマークレットを問わずてんこ盛りに実装してみたい機能は沢山あるのですが、なかなか手がまわらないなーと思っています。

あ!ちなみに今回の拡張機能の manifest のバージョンは1です!2ではありません。最初2で作ろうと試みたのですが、SSL対応していないウェブサービスの外部ファイルの読み込みがどーにもこーにもならないなーと。何か回避方法とかあるのかな?このままだと manifest version 1 の期間で開発終了になりそうw 何か良い方法あったら教えてくださーい!とりあえずはてブボタンと Topsy がアウトだったはずw

以下書き忘れていた事を追記!

Evernote のサイトメモリーに関して!

Evernote サイトメモリー

サイトメモリーって最近はあまり見かけなくなったかも?
サイトの内容をブラウザから Evernote に保存出来るスクリプトで一般向けにボタン生成のページも用意されていました。ソーシャルてんこ盛り全般でこのスクリプトを使わせていただいています。

機会あるごとに各サービスのスクリプトは変更ないか等、公式サイトを確認するようにしているのですが、今回サイトメモリーのページを探しても無くなっていたんです。気になったので Twitter で聞いてみました。

な、なんと!この「サイトメモリー」は現在新規受付は終了していて再開の予定は無いとの事です。実質廃止みたいですよね?

新機能:サイトメモリーボタンでWebサイトを1発保存! | Evernote日本語版ブログ

Evernote の noteit.js に関して!

サイトメモリーのスクリプト、noteit.js のオプションについて以下ダラダラとw
再開の予定無いんだったら新規で設置したりするケースは無いかもしれませんが、一応書いておきます…w

サイトメモリーってオプションが用意されていて指定可能なんです。

<a href="#" onclick="Evernote.doClip({
	title: '新機能:サイトメモリーボタンでWebサイトを1発保存!',
	url: 'http://blog.evernote.com/jp/2010/09/10/1031',
	code: 'en-blog',
	suggestTags: '',
	header: document.getElementById('post-1031-title'),
	content: document.getElementById('post-1031-content')
});return false;"><img style="padding-bottom:2px" src="http://static.evernote.com/article-clipper.png"></a>

これ公式ブログに設置されているサイトメモリーのHTMLソースなんですけど、aタグにonklickでオプション指定してスクリプト実行しているんですよね〜。

それで今回拡張機能を改修するにあたってどんなオプションがあるのか知りたかったので noteit.js を見てみました。

1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
/** ************** Utility Methods *************** */
Evernote.CLIP_OPTIONS = {
  // URL that will be associated with the clip (will be assigned to the
  // sourceURL attribute of the note)
  url : null,
  // Title for the clip
  title : null,
  // signature (HTML or DOM Element) that will be appended to the note,
  // separated by horizontal rule
  signature : null,
  // header (HTML or DOM Element) that will be prepended to the content
  header : null,
  // footer (HTML or DOM Element) that will be appended to the content
  footer : null,
  // content (HTML or DOM Element) that will be the content of the clip
  content : null,
  // id of the DOM Element whose contents will become the content of the clip
  contentId : null,
  // URL from which to retrieve content to be clipped
  contentUrl : null,
  // optional function used to filter which DOM elements get included when
  // serializing DOM. This function will be passed a single argument - the DOM
  // element, and if the function return a truthful result - the passed DOM
  // element will be serialized, otherwise it will be skipped.
  filter : null,
  // comma-separated list of tag names
  suggestTags : null,
  // notebook name
  suggestNotebook : null,
  // friendly name for the content provider (defaults to source URL)
  providerName : null,
  // partner code
  code : null,
  // latitude and longitude coordinates (optional, and if specified, should be
  // floats)
  latitude : null,
  longitude : null,
  // DOM styling strategy (accepts 'none', 'text', 'full' or actual implementing
  // Function)
  styling : Evernote.ClipTextStylingStrategy
};

オプションって色々あったんだなーとしみじみw
全て検証してないし挙動も不明なので説明は省きます。

<a href="#" onclick="Evernote.doClip({
	url: ,
	title: ,
	signature: ,
	header: ,
	footer: ,
	content: ,
	contentId: ,
	contentUrl: ,
	filter: ,
	suggestTags: ,
	suggestNotebook: ,
	providerName: ,
	code: ,
	latitude: ,
	longitude: ,
	styling:
});return false;"><img style="padding-bottom:2px" src="http://static.evernote.com/article-clipper.png"></a>

さっきの公式ブログのソースコードに当てはめて全部指定するとこんな感じかなー。ヘッダーとかフッターとかっているの?どこに反映されるんだろ〜?緯度経度とかもね、ビックリしましたw

拡張機能でのサイトメモリーのクリップの挙動

ソーシャルてんこ盛りの拡張機能バージョン0.1の状態だと、サイトメモリーでクリップするとポップアップ側の内容がクリップされてしまっていて肝心のページの内容はクリップされていないんです。当時これに気づいてなかったみたいですわたし… アホですねw

サイトメモリーの挙動は Facebook や Google+ のシェアと違いサーバー側から再度データを取りに行ってくれないんですね!オプションで URL を指定していてもサイトメモリーが設置されているページの内容をクリップしてしまうみたいなんです。

それでバージョン0.9では iframe でクリップしたい URL を開いて、オプションの content と contentId を指定してみたら上手くクリップされたみたいです。(検証不足だなぁ、と書いていて思いましたw)
content には iframe で開いた URL の body のソースをまるっと、contentId には iframe の ID を指定しています。
ちゃんちゃん。

ポップアップの開く速度に関して!

前回前々回の記事で Chrome の拡張機能でポップアップで簡単な物を表示する内容を書きました。

1
2
3
4
5
/* popup.js */
chrome.tabs.getSelected(null,function(tab){
	document.body.innerHTML = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="'+tab.url+'" data-text="'+tab.title+'" data-via="" data-lang="ja">ツイート</a>';
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
});

こんなソースコードをサンプル的に書いていたのですが、これだと遅いんです。
内容物によるかもしれませんが、ソーシャルボタンを複数取得して表示、とかしてると体感出来る程に遅かったです。

1
2
3
4
5
6
7
/* popup.js */
chrome.windows.getCurrent(function(currentWindow){
	chrome.tabs.getSelected(currentWindow.id,function(tab){
		document.body.innerHTML = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="'+tab.url+'" data-text="'+tab.title+'" data-via="" data-lang="ja">ツイート</a>';
		!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
	});
});

chrome.tabs.getSelected() で window の ID を指定して渡してあげる方が早いんです。
当然と言えば当然なんですけど、気づいてませんでしたw
複数ウィンドウがある場合もありますもんね。