スクショのためのchrome拡張
スクショをとるときに、「ここ強調したいな」とか、「これ邪魔だな」と感じることが多く、解決できるものを作りました。
作ったのは一年前だけど、なんだかんだ便利でずっと使ってるので紹介。
機能
今のところ、機能は2つ。
- 指定した範囲にアンダーラインを引く
- テキストを編集する
個人的には2の機能が気に入っている。
まぁたぶん「なんのこっちゃ」となってると思うので、それぞれ説明していく。
指定した範囲にアンダーラインを引く
この記事を例に見ていく。
1枚目はただ開いただけの表示。
そして2枚目は拡張機能を使った時の表示。
(「ヨーダ」の部分をマウスで選択してからAlt-y
を押した)
この時に関係してるソースはこんなかんじ。(ファイルはこちら)
if (event.altKey) { switch (event.key) { case 'y': highlight('yellow'); : function highlight(bC, tC) { let selection = window.getSelection(); let range = selection.getRangeAt(0); let newNode = document.createElement('span'); if (tC === undefined) { newNode.setAttribute('style', 'background-color:' + bC + ';'); } else { newNode.setAttribute('style', 'background-color:' + bC + ';color: ' + tC + ';'); } newNode.innerHTML = selection.toString(); range.deleteContents(); range.insertNode(newNode); }
jsほとんど書いたことないので、変なことしててもそっとしておいてください。。。
大まかな動きは以下のようなかんじ。
Alt-y
が押されたときにhighlight('yellow')
が実行される- 選択されてる範囲のテキストを取得し、
span
タグで囲う - 追加した
span
タグにstyle
属性を追加、引数のyellow
がbackground-color
に設定される - 選択した範囲を上書き
yellow
の部分はred
などのカラーネームでも、#f00
などの16進数でも指定できる。
ほかの色も実装すれば、アンダーラインの幅が広がる。
highlight
関数の第二引数は背景色。
highlight('#000', '#000')
で実行すれば文字と背景を黒くして情報を隠してスクショできる。
これならモザイクの
Ctrl-p
から、塗りつぶした状態でプリントできそう(実際にプリントしたことはないがプレビューで反映されてるのでさすがに大丈夫だろうという気持ち)
当然、ページを更新すれば元通りになる。
懸念点
広範囲を指定してhighlight
を実行した際、cssがめっちゃ崩れてしまう。
span
で上書きするとき、既存のタグが消されてしまう。
これは仕方ないだろうとあきらめてますが、少し不便。
テキストを編集する
結構便利で気に入ってる。contentEditable
属性を利用した機能。
とりあえず触ってみてもらうのが速いだろう。下の四角の範囲内はcontentEditable="true"
になってる。
この範囲は自由に編集可能。
マウスでクリックし、適当にキーを押してみてほしい。
Bold ItalicStrike-throughなどもそのまま編集できる
この拡張機能、もともとはアンダーラインを引くだけだったが、
この属性を知ったときに居ても立っても居られずに実装した。便利。
編集可能な範囲のソースは以下のような感じ。(markdown表記)
> <span contentEditable="true"> この範囲は自由に編集可能。 マウスでクリックし、適当にキーを押してみてほしい。 **Bold** *Italic* ~~Strike-through~~などもそのまま編集できる </span>
contentEditable
属性がtrueになっていれば編集が可能になる。
ということで、Alt-w
が押されたときにbodyタグのcontentEditable
属性を切り替えるようにした。
var pattern = "[-] " : if (event.altKey) { switch (event.key) { : case 'w': let b = document.getElementsByTagName('body'); if (b[0].isContentEditable) { document.title = document.title.substr(4); b[0].setAttribute('contentEditable', false); } else { document.title = pattern + document.title; b[0].setAttribute('contentEditable', true); } break;
そのままでは「今、編集可能か」がわかりにくかったので、titleタグも変えるようにした。
contentEditable
がtrue
な時はタイトルの先頭に[-]
が追加される
devtoolsで書き換えようとすると、どこにあるのか探したりが面倒になりがちだが、これを使えばスムーズに書き換えることが可能。
用途
スクショをとる前に使うのが便利。
簡単に強調したり隠したり、編集したりできるのでわざわざ画像を編集しないで済む。
インストール
ソースはここ。
Storeに公開するような代物でもないので・・・
- git cloneなりDownload zipして展開なりしてダウンロード
- chrome://extensions/ から右上にあるデベロッパーモードをオンにする
- デベロッパーモードででてくる「パッケージ化されてない拡張機能を読み込む」ボタンをクリック
- textHighLightのディレクトリを指定して読み込み
これで拡張機能に追加されるはずだ。
あとは適当なページでマウスで範囲指定した後、Alt-y
やAlt-b
等を押せばハイライトされる。
Alt-w
を押して好きに編集もできる。
ソースを読めばショートカットのswitch文が目に付くと思うので、好きなボタンで好きな色にハイライトするようにするもの良いだろう。
この記事はIPFactory Advent Calendar 2021の12/12分です。
IPFactoryというサークルについてはこちらをご覧ください.
昨日はDrumatoによる「Kubectl Plugin Builder」でした。
明日はry0kvnによる「IDAPythonによる解析の自動化をやってみる(動的解析編)」です。