ChromeのブックマークにJavaScriptを仕込む
Posted on August 25, 2019 at 11:00 (JST)
Chromeのブックマークにはdata URLを指定できる。
そこにJavaScriptを仕込むことにより、URLを動的に生成できる。
動作環境
OS: macOS Mojave ver. 10.14.6
Google Chrome: Version 76.0.3809.100 (Official Build) (64-bit)
使用例
Fitbitの体重遷移グラフ画面はクエリストリングにて始点・終点となる日付を指定できる。
例） https://www.fitbit.com/weight?end-date=2019-08-25&period=days&start-date=2019-06-01
今回start-date/end-dateを自動設定するためのdata URLを作成した。
※ 最初はローカルマシン上のリダイレクト用のHTMLのファイルパスをブックマークしたが、この方法では登録時に大文字がすべて小文字に変換されてしまうため正しく動作しなかった。
data URLの説明
以下のようなdata URLを登録すれば、ブックマーク機能を実行するたびに仕込んだJavaScriptが動作する。
data:text/html;utf-8,<!DOCTYPE html><head><title>Fitbit - weight</title></head><body><script>setTimeout(function(){ const StartDate='2019-06-01';const pad = num => num < 10 ? `0${num}` : `${num}`;const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1;const date = now.getDate();const end = `${year}-${pad(month)}-${pad(date)}`;const url = `https://www.fitbit.com/weight?period=days&start-date=${StartDate}&end-date=${end}`;window.location.replace(url) },1);</script></body>
肝となる部分を展開するとこんな感じ。
start-dateは固定、end-dateを現在日付としたURLを生成し、location.replaceでページ遷移させている。
<!DOCTYPE html>
<head>
<title>Fitbit - weight</title>
</head>
<body>
<script>
setTimeout(
function(){
const StartDate='2019-06-01';
const pad = num => num < 10 ? `0${num}` : `${num}`;
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const end = `${year}-${pad(month)}-${pad(date)}`;
const url = `https://www.fitbit.com/weight?period=days&start-date=${StartDate}&end-date=${end}`;
window.location.replace(url)
}, 1);
</script>
</body>
以上。