ブラウザ：ブックマークにJavaScriptを仕込み、選択した文章を赤ペン風に強調する！

ブラウザのブックマークは、URLだけでなく JavaScriptも登録できるのを知っていますか？これを使うと、クリックするだけで処理が動く「自分専用ボタン」が作れます。

今回は、ページ内の選択範囲を赤ペン風に強調するボタンを作ります。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{let s=window.getSelection&&window.getSelection();if(!s||s.rangeCount===0||s.toString().trim()===""){alert("先に強調したい文章を選択してください");return}let r=s.getRangeAt(0);try{let sp=document.createElement("span");sp.style.background="rgba(255,235,59,.35)";sp.style.textDecoration="underline";sp.style.textDecorationColor="rgba(255,0,0,.9)";sp.style.textDecorationThickness="2px";sp.style.borderRadius=".25em";sp.style.padding="0 .1em";r.surroundContents(sp);s.removeAllRanges();}catch(e){alert("複雑な選択範囲だと失敗します（段落またぎ等）。もう少し狭く選択して再実行してください。")}})();

手順：

① どんなページでもいいので、いったんお気に入りに登録する。

② 登録したお気に入りを右クリックして、「編集」をクリック。

③ 先ほど紹介した JavaScript をコピーする。

④ 名前を「赤ペン強調」にして、URL欄に JavaScript を貼り付ける。

これで完成です。

たとえば、、天気予報サイトで、強調したい文字を選択してからお気に入りをクリックすると…

選択範囲は強調されます！