ブラウザ：ブックマークにJavaScriptを仕込みオリジナルボタンを作成。～ページに✅チェックマークを置ける『チェックモード』

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

今回は、Webページでクリックした場所にチェックボックスを配置するボタンを作ります。

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

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

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

JavaScript：

javascript:(()=>{let on=window.__bm_ck_on;let marks=window.__bm_ck_marks||[];let handler=window.__bm_ck_h;let toast=m=>{let d=document.createElement("div");d.textContent=m;Object.assign(d.style,{position:"fixed",bottom:"30px",right:"30px",padding:"14px 16px",background:"rgba(0,0,0,.85)",color:"#fff",fontSize:"14px",borderRadius:"12px",boxShadow:"0 8px 20px rgba(0,0,0,.3)",zIndex:999999,opacity:0,transition:"opacity .4s"});document.body.appendChild(d);requestAnimationFrame(()=>d.style.opacity=1);setTimeout(()=>{d.style.opacity=0;setTimeout(()=>d.remove(),450)},1200)};if(on){document.removeEventListener("click",handler,true);window.__bm_ck_on=false;toast("✅ チェックモードOFF");return}handler=e=>{if(e.target&&String(e.target.id||"").startsWith("__bm_ckm_")){e.target.remove();return}let m=document.createElement("div");m.id="__bm_ckm_"+Date.now();m.textContent="✅";Object.assign(m.style,{position:"fixed",left:(e.clientX+6)+"px",top:(e.clientY-10)+"px",zIndex:999999,fontSize:"18px",pointerEvents:"auto",filter:"drop-shadow(0 2px 6px rgba(0,0,0,.35))"});document.body.appendChild(m);marks.push(m);window.__bm_ck_marks=marks;e.preventDefault();e.stopPropagation()};window.__bm_ck_h=handler;document.addEventListener("click",handler,true);window.__bm_ck_on=true;toast("✅ チェックモードON（クリックで✅、✅クリックで削除）")})();