リンクを別タブで開くChrome拡張機能「Link Blanker」公開しました

Link Blanker

こちらの記事は作った経緯や裏側の話となっています。
単純にどんな機能があってどんな使い方ができるかは以下のリンクに載っています。

Link Blanker

つい先日、Google Chrome用の拡張機能を作って公開しました。

Link Blanker / Chromeウェブストア

どんな機能かといいますと、名前のまんま、

「リンクをひたすら別タブで開く」

というものです。

えっ?うっとおしい?

そうですね(^_^;)

嫌いな人は嫌いだと思いますw

ただ、全てを別タブで開くわけではなく、元々のリンクの振る舞いは一応見てます。

  • リンク先がハッシュ(#aaaのような「#付きのリンク」)
  • onclick属性が含まれている
  • リンク先に javascript:voidが含まれている

上記いずれかの場合はページのそのままの動作になります。

それと、 管理画面系ではいちいち別タブで開きたくない時もありますので、別タブで開くのを一時停止したり、このドメインにいる時は別タブでは開かない、っといった簡単な制御もできるようにしました。

作った経緯について

なんでこんなものを作ったかといいますと・・・

1. ブラウザの「戻る」が嫌い

ページ1つ戻るのも大仕事です。キャッシュとはいえ、微妙に表示まで待たされるんです。

しかも、ちゃんと待てば前のページのスクロール位置まできちっと考慮して戻ってはくれるんですが、表示された瞬間自分でスクロールしだすと、元々のスクロール位置は無視されます。

とにかく待たされるのが嫌だった、ということです。

2. 片手、ワンクリックで何とかしたかった

元々リンクを別タブで開く方法としては、commandキーを押しながらリンクをクリックする、というのがあります。

(Windowsはctrlキー)

しかし、片手が塞がっていたり、どうにももう片方の手を出すのが億劫な時とかがあります。(←あるんです!ない、って言わないで下さい。)

そんな時は今までは右クリックして、新しいタブでリンクを開く、とかを選んでやっていたんですが、これまたちょっと手間。。。

なので、そもそものクリック時の動作を変えてしまえ!と思ったわけです。

3. Google検索

作ろうと思った決め手はこれです。Googleの、検索。

実は普通のニュースサイトや、ブログなどは同じようにリンクの動作を変えられる拡張機能がいくつかあって、それで大丈夫だったんです。

けれど、Google検索のところだけは、クリックした時にスクリプトが走っていて、さらにページ遷移するようなものが入っているため、どうしても同一タブで開いてしまいました。

これで、しょうがない、実はどこかにこれも満たす拡張機能があるのかもしれないけど、どうにも見つからないし探してる時間があったら作ってしまおう、となりました。

別タブで開くカラクリ

カラクリ、ってほどでも無いですけど、リンクを別タブで開く為にはいくつか方法があります。大まかには2点。

  • 「クリックされた!」っていうイベントを検知してその瞬間に別のwindowを開いてそこに飛ばす。
  • HTML自体をブラウザが別windowで開く動作をするように変えてしまう。

一つ目はjQuery1.9以上での書き方だと

$(document).on('click', 'a', function(e) { 
    e.preventDefault(); 
    window.open(this.href, "_blank"); 
    return false; 
}); 

みたいな感じですぐできるやん、と思ったんですが、Google検索のところだけやはりダメでした。

別windowは開くんですが、元のページでも遷移してしまいます。

イベントが走ってからでは、遅い。

ということが分かりました。

かといって、イベント(onclick)を取っ払ってしまうと他のサイトでもきっと都合が悪いだろう、と思い諦めました。

(ページ内遷移や、ページ内でダイアログを出したりするような振る舞いはそのままのほうが操作性が良い)

結局やり方としては凄く古典的な方法になりました。

<a href="hogehoge" target="_blank">hogehoge</a>

a要素自体にtarget="_blank"といった形で属性を付けてしまうだけ。

これでうまくいきました。

そもそもなんで別タブで開きたいの?別タブで開くメリットは?

Webを渡り歩くときって、道路を渡り歩いてる感覚に似てませんか?

基本的に一本道ではないですよね?

途中で右に曲がったり、カーブしたり、2つ前の交差点に戻って行ったり。

例えば、Webの使用目的に「調べ物」が非常に多い自分にとっては、

検索結果ページ = バスターミナル

みたいな位置づけになります。

ここを拠点に、動作フローを考えてみると、

一つ目の検索結果をクリック

1.訪れたページ内を徘徊

2.さらにめぼしいリンク先があるならさらにクリックして進む

3.けどまだ欲しい情報がない

4.検索結果ページまで戻る

5.一つ目のリンク以外で、目的の情報がありそうなリンクを物色してクリック

この動作を情報が見つかるまで繰り返し。

となります。

ここのポイント、検索結果ページまで戻るという部分。もしも戻るまでに何個も何個もリンクをクリックしてたら、「あれ?いくつ戻ればいいんだっけ?まだ前やったっけ?」となるわけです。

結果ページを汚さず置いておけば、このタブに戻ってくればすぐに別の道へ進むことができますね。

リファレンス系のサイトやチュートリアル系のブログでも同じです。

目次、インデックスとなるページを置いておけば、すぐにそこを拠点に別のページヘ行けます。

この拠点なるページをそのままにしておけることが別タブで開くメリットです。

もちろん別タブでガンガン開いていくと閉じるのめんどくさい、といったデメリットもあります。

なので、今は簡単に閉じれる方法を考案中です。

現状はタブを右クリックして「その他のタブを閉じる」、「右側のタブを閉じる」を選んでスパっと閉じてます。

今後について

簡単に大量のタブを閉じれる方法があると楽なので、その機能を加える予定です。

 あと、特定のディレクトリ以下も動作を一時停止できるようにする、といったところです。

(https://www.aozora-create.com/tag/以下は同一タブで開くといったことです)

以上です。

関連リンク

Recent Posts

Archive