Chrome ブラウザの機能をカスタマイズする（ブックマークレットを作る）
以前に、GEG Nasu のイベントだったと記憶しているのですが、以下のページで紹介されている「ブックマークレット」という機能を紹介していただきました。
Chrome ブラウザのブックマークに登録しておき、
GoogleDriveのファイルを配布先のユーザーにオリジナルファイルを共有するのではなく、コピーを渡したい際には、該当ファイルのURLの最後にあるedit以降の部分をcopyに置き換えることで複製させることが可能です。
という機能が、ブックマークバーをクリックするだけで実現できます。
このようなブックマークく登録した機能のことを、「ブックマークレット」と呼称するようです。
今回の記事では、この「ブックマークレット」をどのようにして作るのかを紹介します。
ブックマークレットとは？
Wikipedia によれば、
ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり[1]、ユーザーに追加情報の入力を促したりする。
と説明されています。要するに JavaScript の小さなプログラム、ということみたいです。GAS（Google Apps Script）のベースとなっている JavaScript でプログラムを作成しているということみたいです。
実際に作ってみる
ブックマークレットの作り方は、以下のページで紹介されていました。
冒頭のブックマークレットも、現在表示されているページのアドレスが document.location.href から得られるので、それをプログラムで処理しているようです。
以降、気になっていたものを作ってみました。
（１） Facebook の足跡を削除
Facebook を経由してきた場合に、URL に fbclid= といったパラメータが追加されているのに気付いていますか？
このパラメータは、Facebook が付加しているもので、「誰が」「どこから」アクセスしたものなのかなどを記録するためのもののようです。
このパラメータが他人に知られたとしても、そこから自身の個人情報が流出するようなことはないのでしょうが、付加したままの URL を他の人と共有するのは面白くないような気がします。 ※面白くないだけでなく、余計なパラメータが付いていることで、うまく動作しなかったりする場合もあるようです。
そんなパラメータを削除するブックマークレットを作ってみました。
JavaScript のプログラムとしては、以下のような感じ。
javascript:(
function(){
var href = document.location.href;
var idx = href.indexOf('fbclid=');
if (idx != -1) {
document.location.href = href.substring(0, idx - 1);
}
}
)();これを、Closure Compiler Service でコンパイルすると、以下のように １行のプログラムになります。
(function(){var a=document.location.href,b=a.indexOf("fbclid=");-1!=b&&(document.location.href=a.substring(0,b-1))})();「コンパイル」といっても、機械語に翻訳（変換）するのではなく、
必要のない空白や改行を削除
変数名を一文字に変更
といった処理を行って、一行の JavaScript のプログラムにしているようです。
これを下図のように javascript: に続けてブックマークとして登録してやれば、登録したブックマーク（ブックマークレット）をクリックするだけで、Facebook からの足跡を削除できます。
（２） 一つ上の階層に移動
Web ブラウザでホームページを閲覧しているときに、リンクは設定されていないのだけど、上の階層のページに移動したいときってありませんか？
そんなユーザービリティの低いホームページを閲覧していなければいいのでしょうが、HTML ベースのサイトだったり、WordPress サイトだったりで階層化されているような場合に、上位の階層に移動するときに使ったりします。
プログラムは以下のような感じですが、アドレスバーの後ろから / を検索して、見つけた / までを削除することで、一つ上の階層に移動します。
javascript:(
function(){
var href = document.location.href;
document.location.href = href.substring(0, href.lastIndexOf('\/', href.length - 2));
}
)();これも同様に、Closure Compiler Service でコンパイルすると、以下のように １行のプログラムになります。
(function(){var a=document.location.href;document.location.href=a.substring(0,a.lastIndexOf("/",a.length-2))})();最後に
今回作ってみた「ブックマークレット」は、現在表示されているページ（アドレスバー）の URL を目的に応じて編集するものです。アドレスバーの URL を変更するだけでなく、表示されているページの内容を変更したりもできるようです。
この辺りも、アイディア次第でいろんなことができそうです。
他にどんなことができるのかは、いろんなブックマークレットが紹介・公開されているので、検索してみてください。😍