js ブックマークレットのメモ書き

2022年11月7日 /

はじめに

この投稿は自分用のメモ書きなので、参考を利用することで説明をできるだけ省き、保存しておきたいコードなどをメモ書きすることに徹する。

ブックマークレットとは

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動するために使われることが多い。

Wikipedia『ブックマークレット』より

作成方法

作り方を忘れたときは大体 Bookmarkletを作ろう(準備編） - Qiita を見ている。(魚拓)

本題：普段使っているもの

markdown 用のリンクを取得

ブログを書くときにいつも使う。

1
// copy text to clipboard: e.g. [Google](https://www.google.com/)
2

3
'use strict'; (
4
  function () {
5
    const a = `[${document.title.trim()}](${location.href})`;
6
    navigator.clipboard.writeText(a)
7
      .then(
8
        () => { alert(`Successfully copied ${a}`) },
9
        () => { alert("Unfortunately failed to copy..") }
10
      )
11
  }
12
)();

1
'use strict'; (function(){const a=`[${document.title.trim()}](${location.href})`;navigator.clipboard.writeText(a).then(()=>{alert(`Successfully copied ${a}`)},()=>{alert("Unfortunately failed to copy..")})})();

はみ出した Element を見つけるやつ

こちらのコードをそのまま利用すると Uncaught ReferenceError: $$ is not defined となるので、一部弄って

1
(
2
  function () {
3
    const a = document.documentElement.clientWidth;
4
    Array.from(document.getElementsByTagName("*")).forEach(function (b) {
5
      b.style.outline = "1px solid tomato";
6
      a < b.clientWidth && console.log(b)
7
    })
8
  }
9
)();

1
'use strict';(function(){const b=document.documentElement.clientWidth;Array.from(document.getElementsByTagName("*")).forEach(function(a){a.style.outline="1px solid tomato";b<a.clientWidth&&console.log(a)})})();

こうなる。