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

 / #memo #javascript #chrome

はじめに

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

ブックマークレットとは

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

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

作成方法

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

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

markdown 用のリンクを取得

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

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


javascript: 'use strict'; (
  function () {
    const a = `[${document.title.trim()}](${location.href})`;
    navigator.clipboard.writeText(a)
      .then(
        () => { alert(`Successfully copied ${a}`) },
        () => { alert("Unfortunately failed to copy..") }
      )
  }
)();
javascript: '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となるので、一部弄って

javascript: (
  function () {
    const a = document.documentElement.clientWidth;
    Array.from(document.getElementsByTagName("*")).forEach(function (b) {
      b.style.outline = "1px solid tomato";
      a < b.clientWidth && console.log(b)
    })
  }
)();
javascript:'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)})})();

こうなる。

image

参照