『GetTabInfo』開いている全てのタブの情報を取得 【Chrome拡張】

gettabinfo

SPONSORED LINK

こんにちは、色んな効率化が大好きなたぬ(@KAivlys)です!

WebサイトのタイトルやURLを1つ1つ、コピーしてはペースト。そんな作業を繰り返していませんか?

そんな面倒なことしなくても、今回紹介する『GetTabInfo』というChromeの拡張機能を使えば、開いているタブ全てのタイトルやURLといった情報を瞬時にコピーすることが出来るんですよ。

直接、見たほうが早いね。下のGIF動画では、10個のタブのタイトルとURLを全てコピーしています。

gettabinfo

GIF動画:画質悪いですが、イメージだけでもつかめてもらえると嬉しいです

GetTabInfoは、情報収集をしている人(特にブロガーや社会人)にオススメの拡張機能です。

というか、今のご時世ネットで調べ物をしない人なんていないと思うので、やっぱり全ての人にオススメしたい神拡張機能です!!

GetTabInfoをインストールしよう

Chromeウェブストアでインストールします。

gettabinfo1

GetTabInfo
gettabinfo2

『拡張機能を追加』を選択

gettabinfo3

正しく追加されると、上図のように『G』と書かれたアイコンが表示されるようになります。

これでインストールはおしまいです。

GetTabInfoの使い方

アイコンをクリックするとGetTabInfoが起動します。

gettabinfo4

GetTabInfoの設定画面

テンプレートの設定方法

gettabinfo5

GetTabInfoで取得できるタブの情報は、以下の4種類です。

%%TITLE%% タイトルを取得する
%%URL%% URLを取得する
%%sURL%% 短いURLを取得する
%%QR%% QRコードを作成する

例えば、URLリストを作りたい場合は、次のように入力します。

URLリストを作成
■%%TITLE%%
%%URL%%

STEP1:URLリストに加えたいページを複数開く

gettabinfo7

STEP2:アイコンをクリックしてテンプレートタグを含めたテキストを記入する

gettabinfo8

STEP3:細かい設定

余談なんですけど、改行を入れる入れないも表示される文字列に影響してきます。

gettabinfo9

改行なしVer

上の写真を見て分かるように、改行をいれないと出力される文字列が詰まっていて、とっても読みづらいですね。

gettabinfo10

改行ありVer

一方、改行をいれた方は、出力がスッキリしていい感じです(^o^)

テンプレートを保存する方法

一度作ったテンプレートは保存して何度も使いまわすことが出来ます。

毎回毎回入力するのは、時間のムダなので、よく使いそうなテンプレートはどんどん保存していきましょう。

STEP1:Save template as ...をクリック

gettabinfo11

STEP2:名前を入力する

gettabinfo12

STEP3:完成〜

gettabinfo13

オススメのテンプレート設定【ブロガー向け】

最後に、ブロガーに超絶オススメしたいGetTabInfoのテンプレート設定が2つあるので紹介させてください。

その1:テキストリンクをマークアップする

リンク付きのテキストをマークアップ
<a href="%%URL%%" target="_blank">%%TITLE%%</a>

テキストリンクが秒で作成出来ます。

外部サイトのリンクをよく貼るブロガーさんにオススメです。

地味に便利なので是非、笑

その2:連載記事一覧をマークアップする

gettabinfo14

※画像です

少しだけ応用です。GetTabInfoを使えば、こんな感じの連載記事一覧も一瞬で作ることができます。

フォントに『FontAwesome』を使っているので、『header.php』に以下1行を追加してください。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

連載記事一覧をマークアップする
<div class="label-box">
<span class="label-box-title">連載記事一覧</span>
<ul>
<li><a href="%%URL%%">連載記事1:%%TITLE%%</a><span class="imakoko">いまここ</span></li>
<li><a href="%%URL%%">連載記事2:%%TITLE%%</a></li>
<li><a href="%%URL%%">連載記事3:%%TITLE%%</a><span class="comingsoon">Coming Soon</span></li>
</ul>
</div>

CSSも用意したので、良かったら使って下さい〜。コピペで行けるハズです。

不具合等ありましたら、TwitterでDMお問い合わせページから連絡ください。

/* ラベルBOX */
.label-box {
    position: relative;
    margin: 70px 10px 35px;
    padding: 0.5em 1em;
    border: solid 3px #07689f;
}
.label-box-title {
    position: absolute;
    display: inline-block;
    top: -30px;
    left: -3px;
    padding: 3px 9px;
    height: 30px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #07689f;
    color: #ffffff;
    font-weight: bold;
    border-radius: 3px 3px 0 0;
}
.label-box p {
    margin: 0; 
    padding: 0;
}

/* 【いまここ】ラベル */
.imakoko {
    position: relative;
    margin: 0 10px 0 3px;
    padding: 3px 5px;
    color: #fff;
    background: #ff2b64;
    font-weight: bold;
    font-size: 0.7em;
}
.imakoko:before{
    margin: 0 3px 0 0;
    content: "\f005";
    font-family: FontAwesome;
    color: #fff;
}
/* 【Coming Soon】ラベル */
.comingsoon {
    position: relative;
    margin: 0 3px 0 8px;
    padding: 3px 5px;
    color: #009dff;
    background: #badcf2;
    font-weight: bold;
    font-size: 0.7em;
}
.comingsoon:before{
    margin: 0 3px 0 0;
    content: "\f00c";
    font-family: FontAwesome;
    color: #009dff;
}

さいごに

今回は、開いている全てのタブの情報を取得するChromeの拡張機能『GetTabInfo』について紹介しました。

数あるGoogleの拡張機能の中で1位2位を争うくらいの神ツールで、ブログ以外にも仕事で毎日バンバン利用しています。

情報収集するときにGetTabInfoは欠かせません!

それでは〜

『Pasty』クリップボードの複数URLをまとめて開く 【Chrome拡張】

2018.02.19

P.S.余談なのですが、『Pasty』という別の拡張を使えば、さらに情報収集が加速します。

SPONSORED LINK

gettabinfo

ABOUTこの記事を書いてる人

たぬ(谷口健太)

25歳社会人。本職は福岡の通販会社でWebマーケッターやっとります。 プログラミング✕マーケティング=最強説を唱えており、非効率的な世の中に革命を起こそうと本ブログを設立。 ストレングスファインダー:戦略性・最上志向・目標志向・未来志向・個別化

NEW POSTこのブログの最新記事