スクショのためのchrome拡張

スクショをとるときに、「ここ強調したいな」とか、「これ邪魔だな」と感じることが多く、解決できるものを作りました。
作ったのは一年前だけど、なんだかんだ便利でずっと使ってるので紹介。

github.com

機能

今のところ、機能は2つ。

指定した範囲にアンダーラインを引く
テキストを編集する

個人的には2の機能が気に入っている。
まぁたぶん「なんのこっちゃ」となってると思うので、それぞれ説明していく。

指定した範囲にアンダーラインを引く

この記事を例に見ていく。

f:id:y0d3n:20201205225242p:plain — アンダーライン(黄色)

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進数でも指定できる。
ほかの色も実装すれば、アンダーラインの幅が広がる。

f:id:y0d3n:20201205225922p:plain — アンダーライン(カラフル)

highlight関数の第二引数は背景色。
highlight('#000', '#000')で実行すれば文字と背景を黒くして情報を隠してスクショできる。
これならモザイクの

f:id:y0d3n:20201205231905p:plain — アンダーライン(黒)

Ctrl-pから、塗りつぶした状態でプリントできそう(実際にプリントしたことはないがプレビューで反映されてるのでさすがに大丈夫だろうという気持ち)
当然、ページを更新すれば元通りになる。

懸念点

広範囲を指定してhighlightを実行した際、cssがめっちゃ崩れてしまう。

f:id:y0d3n:20211210101711p:plain — Ctrl-a + Alt-y

spanで上書きするとき、既存のタグが消されてしまう。これは仕方ないだろうとあきらめてますが、少し不便。

テキストを編集する

結構便利で気に入ってる。contentEditable属性を利用した機能。
とりあえず触ってみてもらうのが速いだろう。下の四角の範囲内はcontentEditable="true"になってる。

この範囲は自由に編集可能。
マウスでクリックし、適当にキーを押してみてほしい。
Bold Italic ~~Strike-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;