Milk+ea

Weblog Is My Hobby.

選択したテキストや画像など、新しいタブページでメモできるChrome拡張を作ってみた(ChoiMemo)

f:id:totora0155:20140821221903p:plain

初めてChrome拡張を作ってみました。

ChoiMemo?

ChoiMemoは、新しいタブをメモアプリへ変えるChrome拡張です。
ネットサーフィン中の「ちょっと取っておきたいなぁ」という情報があった時、そのテキストや画像を右クリックメニューからメモできます。
メモした内容は、新しいタブを開くたびに表示されるので目に止めるとこができます。
もちろん、新しいタブから自分のちょっとしたメモを書いて、取って置くこともできます。

サイト上のテキストをメモ

  1. ほしいテキストを選択して、右クリック。[ChoiMemo に新しくメモ]を選択します。

    f:id:totora0155:20140821233500p:plain

  2. 新しいタブを開くとその情報が表示されます。

    f:id:totora0155:20140821234518p:plain

画像も右クリックから新しいタブページに取って置くことができます。(画像URL)

自分のメモを書く

  1. 一番上の+をクリック。

    f:id:totora0155:20140821234541p:plain

  2. 入力エリアが出てくるので、適当に書きます。メモはMarkdownで書くことが可能です。

    f:id:totora0155:20140821234550p:plain

  3. メモと追加すると、HTMLに展開されて表示されます。消したいときは右のxから。鉛筆のアイコンをクリックするとメモを編集できます。

    f:id:totora0155:20140821234554p:plain

+1 ショートカット

  • n入力エリアを開く
  • esc入力エリアを閉じる
  • ctrk+enterメモを追加 or 編集完了

+1 フォント変更

オプションページからフォントを変えることができます。下の画像は、KFひま字フォントへ変えてみた例です。

f:id:totora0155:20140822000028p:plain

メモが多くなってもすぐ表示

すぐに見たいメモは左にあるピンアイコンはクリック。新しいタブを開いた時にそのメモは一番上にある状態で表示されます。解除はもう一回クリック。

その他ショートカット

  • k w上へ50px移動
  • j s下へ50px移動

よかったら使ってみてね

うわ、、画像荒すぎ。。

汚いコード - github

複数メモをマージできる機能(追記)

ctrl + クリックでメモを選択して使います。

f:id:totora0155:20140826041312g:plain