Webページに「付箋」を貼れる Chrome 拡張「MemoFloat」を作りました

ブラウジング中に「ちょっとメモしたい」という場面、けっこう多いですよね。

・調べ物をメモしながら進めたい

・長い記事を読みながら気づいた点を書きたい

・あとで処理したいタスクを書き留めたい

・別アプリを開かずに軽くメモしたい

さらに最近では、オンライン会議の画面共有で、

・「この画面は社外秘です」

・「作業中なのでコピーしないでください」

といった 注意書きを常に表示しておきたいこともあります。

こうした用途にちょうどいい使いやすいシンプルな拡張機能がなかったため、Webページの上に直接“浮かぶメモ”を置ける MemoFloat を作りました。

MemoFloat とは？

MemoFloat は、どんな Web ページにも直接“フローティングメモ”を貼れる Chrome 拡張です。

・ページ上に小さなメモウィンドウを表示

・ドラッグで自由に移動

・右下のハンドルでリサイズ

・A+/A- で文字サイズ調整

・× で非表示（状態は保存）

・Clear で内容を即削除

・コピペはプレーンテキスト化

・状態はすべてページ単位で自動保存

専門的な話になりますが、Shadow DOM を採用しているため、Flickr のような CSS が強いサイトでも安定して表示されます。

特徴まとめ

📝 Webページの上に直接メモを表示

↔️ ドラッグで自由に移動

↕️ 右下ハンドルでリサイズ

🔤 A+/A- で文字サイズ調整

❌ メモを閉じても状態を保持

🧹 Clear で内容を消去

💾 ページ単位で自動保存

⌨️ Alt+Shift+M でトグル（変更可）

🎨 シンプルなグレースケールデザイン

☀️Shadow DOM でサイト側のCSSの影響を受けない

使い方

▼ メモを表示・非表示

・拡張アイコンをクリック
・またはショートカット：Alt + Shift + M

▼ 編集

メモは contenteditable のため自由に入力できます。
コピペはプレーンテキストに変換されるので、余計な書式が残りません。

ページごとにメモを記憶

MemoFloat は、メモ内容やサイズ・位置・表示状態をすべてページ単位で記憶します。

「このページに来たらこの注意書きを出しておきたい」

「この調べ物ページにだけメモを残したい」

といった用途にぴったりです。

おわりに

MemoFloat は、ブラウジング中の「ちょっと書き留めたい」を軽く、素早く実現するための小さなツールです。

画面共有時の注意書きにも、調べ物のメモにも、気軽に使っていただけます。ぜひお試しください！

公開リンク

Chrome Web Store
https://chromewebstore.google.com/detail/memofloat/pldhpkkjackfhfajdlmgoifcbgpfijcp
（追記：Chrome拡張機能のインストール方法についてはこちら（Chrome ウェブストア ヘルプ ）をごらんください）
（注意：インストールした直後の場合はまずは表示しているページをリロード（またはchrome再起動））

GitHub（ソースコード公開）
https://github.com/yto/memofloat