ブックマークレットとは？

皆さん、ブラウザのブックマーク機能はご存じだと思います。

よくアクセスするサイトをお気に入りするアレです。

ブックマークレットとは、要するにこのブックマークのようにJavascriptのプログラムを登録して、ブラウザ上で実行できる、という機能です。

まずはやってみる

何ができるの？ってよく分からないと思うので、まずは作ってみようと思います。

①ブックマークバーで右クリックし、「ページを追加」を選択

②必要な情報を入力して保存ボタンを押す

お試し用のJavascriptのソースはこちらです。そのままコピペで大丈夫です。

javascript:(function(){
    alert("ハロー");
})();

③実行してみる

ブックマークバーに新しいブックマークレットが追加されていると思うのでクリックしてみてください

こんな感じでアラートが表示されたら完了です。

少しだけ効率化できそうなブックマークレットを紹介

ブックマークレットのソースを2つ紹介していきます。

①選択した文字列をGoogle翻訳化

javascript:(function(){
    const selectedText = window.getSelection().toString();
    if (selectedText) {
        window.open("https://translate.google.com/?sl=auto&tl=ja&text=" + encodeURIComponent(selectedText), '_blank');
    } else {
        alert("翻訳するテキストを選択してください。");
    }
})();

①まずはこのソースをさっきの要領でブックマークレットに登録してください。

②以下の要領で、文字列を選択してブックマークレットを実行すると、google翻訳にかけることができます。

②WebページのタイトルとURLをクリップボードにコピー

javascript:(function(){
    const title = document.title;
    const url = window.location.href;
    const text = title + "\n" + url;
    navigator.clipboard.writeText(text).then(function() {
        alert("クリップボードにコピーしました: " + text);
    });
})();

こちらは、開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレットです。

実行するとこのような↓感じでクリップボードにコピーすることができます。