Chromeには、ページを一定時間ごとに自動で再読み込みする設定がありません。それでも、拡張機能を入れずにページを自動更新する方法は3つあります。デベロッパーツールのコンソールでJavaScriptを実行する方法、そのコードをワンクリックで使えるブックマークレットにする方法、自分で編集できるページにmeta refreshタグを追加する方法です。最初の2つはタブを閉じると止まり、3つ目は自分で編集できるページでしか使えません。毎日同じページを更新するなら、自動更新拡張機能のほうが手軽です。
この記事では、それぞれの方法のコピペ用コード、5秒・1分・5分ごとなどの更新間隔の早見表、そしてネットでよく見かけるコンソール用コードが1回しか更新されない理由を紹介します。
ありません。F5キーやCtrl+R(MacはCmd+R)で手動の再読み込みはできます。メモリセーバーも、休止中のタブに戻ったときにそのタブを再読み込みします。しかし、数秒ごと・数分ごとにタブを再読み込みするメニューや設定はありません。一定間隔で更新するには、短いスクリプトか拡張機能が必要です。手動の再読み込みとショートカットについてはタブ・Webサイトを再読み込みする方法をご覧ください。
次のコードをコンソールに貼り付けるよう紹介している記事をよく見かけます。
setInterval(() => location.reload(), 300000);
正しそうに見えますが、実際にはページが1回再読み込みされた時点で止まります。コンソールに貼り付けたスクリプトは、ページの中で動いています。ページが再読み込みされると、Chromeは古いページと、その中で動いていたタイマーなどをすべて破棄します。新しく読み込まれたページは、タイマーのことを何も知りません。
解決策は、再読み込みされないタブにタイマーを置き、そこから別のタブを再読み込みすることです。以下の方法1と方法2は、どちらもこの仕組みを使っています。
allow pasting)を入力してEnterキーを押します。これは、コンソールをあまり使っていないプロファイルで表示される、有害なコードを貼り付けさせる詐欺から利用者を守るための仕組みです。300000をミリ秒単位の値に置き換えます(下の早見表を参照)。const refreshTab = window.open(location.href);
const timer = setInterval(() => {
if (refreshTab.closed) { clearInterval(timer); return; }
refreshTab.location.reload();
}, 300000); // 300000ミリ秒 = 5分
何も開かない場合は、新しいタブがポップアップとしてブロックされている可能性があります。アドレスバー右端のポップアップ ブロック アイコンをクリックし、このサイトのポップアップを常に許可してから、もう一度コードを実行してください。
この方法の制限:
ブックマークレットとは、Webサイトを開く代わりに小さなスクリプトを実行するブックマークです。毎回コンソールを開く必要がなくなります。このブックマークレットは、クリックすると更新間隔を秒数で尋ねてきます。
javascript:(function(){var s=prompt('何秒ごとに再読み込みしますか','300');if(!s||isNaN(s)||s<1)return;var w=window.open(location.href);var t=setInterval(function(){if(w.closed){clearInterval(t);return;}w.location.reload();},s*1000);})();
アドレスバーではなくブックマークに登録するのは、アドレスバーに貼り付けたテキストからChromeがjavascript:を削除してしまうためです。ブックマークレットは、新しいタブページ、chrome://で始まるページ、Chromeウェブストアなど、Chrome自身のページでは動作しません。それ以外の制限は、仕組みが同じなので方法1と同じです。
自分のダッシュボード、社内ページ、ローカルのHTMLファイルなど、編集できるページなら更新処理をページに組み込めます。コードがページの一部なので、再読み込みのたびに一緒に読み込まれ、自動で更新が続きます。
HTMLのmeta refresh:ページの<head>内に追加します。数値は秒単位で、300なら5分ごとに再読み込みされます(MDNの解説)。
<meta http-equiv="refresh" content="300">
JavaScript:</body>の直前に追加します。数値はミリ秒単位です。
<script>
setTimeout(() => location.reload(), 300000); // 5分
</script>
この方法は、自分で管理しているページでしか使えません。公開サイトで使う場合は、自動で再読み込みされるページが、まだ読んでいる人やスクリーンリーダーの利用者の妨げになることを覚えておいてください。WCAGでは、こうした時間制限のある変化を利用者が停止・調整・延長できるようにすることを求めています。
JavaScriptはミリ秒、meta refreshとブックマークレットは秒で指定します。秒数に1,000を掛けるとミリ秒になります。
| 更新間隔 | コンソール・JavaScript(ミリ秒) | meta refresh・ブックマークレット(秒) |
|---|---|---|
| 5秒ごと | 5000 | 5 |
| 10秒ごと | 10000 | 10 |
| 30秒ごと | 30000 | 30 |
| 1分ごと | 60000 | 60 |
| 2分ごと | 120000 | 120 |
| 5分ごと | 300000 | 300 |
| 10分ごと | 600000 | 600 |
| 15分ごと | 900000 | 900 |
| 30分ごと | 1800000 | 1800 |
| 1時間ごと | 3600000 | 3600 |
| コンソール | ブックマークレット | 自分のページにmeta・JS | Auto Refresh Page拡張機能 | |
|---|---|---|---|---|
| どのWebサイトでも使える | はい | はい(Chrome自身のページを除く) | 編集できるページのみ | はい(Chrome自身のページを除く) |
| タブを閉じたりChromeを再起動したりしても続く | いいえ | いいえ(ワンクリックで再開) | はい | はい(ブラウザ起動時に自動更新を開始) |
| 2つ目のタブが必要 | はい | はい | いいえ | いいえ |
| ページごとに別の間隔を設定 | ページごとに設定 | ページごとにクリック | ページごとに編集 | はい(更新リスト) |
| クリックや入力中は停止・一時停止 | いいえ | いいえ | いいえ | はい |
| コードが必要 | はい | 最初の1回だけ | はい | いいえ |
1回きりの更新ならコンソールかブックマークレットで十分です。自分のページならmeta refreshを使いましょう。定期的に更新するページがあるなら、拡張機能を使えば毎回の設定が不要になります。
Auto Refresh Pageは、Chrome・Edge・Firefoxで使える無料の拡張機能です。ここまで紹介した内容をコードなしで実行でき、設定も保存されます。5分などのプリセットを選ぶか、時間・分・秒でカスタム時間を追加して、保存をクリックするだけです。
*を付けると、サイト全体が対象になります。複数のURLを管理する方法もご覧ください。詳しい使い方はChrome・Firefox・EdgeでWebページを自動更新する方法をご覧ください。
タイマーをページの外に置くことさえ分かれば、拡張機能なしでの自動更新は難しくありません。ちょっとした用途にはコンソールやブックマークレットを使いましょう。毎日同じコードを貼り付けるようになったら、Auto Refresh PageをChromeに追加して、一度だけ設定すれば済みます。
できますが、Chromeには自動更新の設定がないため、設定画面からは行えません。デベロッパーツールのコンソールに短いスクリプトを貼り付ける方法、そのスクリプトをブックマークレットにする方法、自分のページにmeta refreshタグを追加する方法があります。コンソールとブックマークレットの方法は、タブを閉じると止まります。
コンソールに貼り付けたスクリプトはページの中で動いており、ページが再読み込みされるとタイマーごと破棄されるためです。更新を続けるには、この記事の方法1のように、1つのタブでタイマーを動かし、別のタブを再読み込みします。
拡張機能を使わない場合は、この記事のコンソール用コードで300000ミリ秒を指定するか、ブックマークレットに300秒と入力します。Auto Refresh Page拡張機能なら、時間間隔タブで5分のプリセットを選んで保存をクリックします。
スクリプトを使う方法では遅くなります。タブが5分以上非表示になると、Chromeはタイマーを約1分に1回しかチェックしないため、短い間隔は遅れて実行されます。数分間隔ならほとんど影響はありません。Auto Refresh Pageはタイマーを拡張機能側で動かすので、ほかのタブで作業している間も更新が続きます。
使えます。同じコードがEdge(Ctrl+Shift+Jでコンソールを開く)とFirefox(Ctrl+Shift+K、MacはCmd+Option+K)でも動作します。Firefoxでも、Chromeと同じように、最初に貼り付けを許可する語句の入力を求められることがあります。
内容を理解しているコードなら安全です。この記事のコードは、ページのコピーを開いて再読み込みするだけです。知らない人から送られてきたコード、特にパスワード・Cookie・トークンに関係するコードは絶対に貼り付けないでください。