🚀 プレミアムプランが48%オフ = 全機能が月額たった$2.08(年間プラン)。 今すぐアップグレード

拡張機能なしでChromeのページを自動更新する方法|JavaScript・ブックマークレット・meta refresh

拡張機能なしで自動更新:Chromeでページを一定時間ごとに更新する3つの方法

Chromeには、ページを一定時間ごとに自動で再読み込みする設定がありません。それでも、拡張機能を入れずにページを自動更新する方法は3つあります。デベロッパーツールのコンソールでJavaScriptを実行する方法、そのコードをワンクリックで使えるブックマークレットにする方法、自分で編集できるページにmeta refreshタグを追加する方法です。最初の2つはタブを閉じると止まり、3つ目は自分で編集できるページでしか使えません。毎日同じページを更新するなら、自動更新拡張機能のほうが手軽です。

この記事では、それぞれの方法のコピペ用コード、5秒・1分・5分ごとなどの更新間隔の早見表、そしてネットでよく見かけるコンソール用コードが1回しか更新されない理由を紹介します。

Chromeに自動更新の機能はある?

ありません。F5キーやCtrl+R(MacはCmd+R)で手動の再読み込みはできます。メモリセーバーも、休止中のタブに戻ったときにそのタブを再読み込みします。しかし、数秒ごと・数分ごとにタブを再読み込みするメニューや設定はありません。一定間隔で更新するには、短いスクリプトか拡張機能が必要です。手動の再読み込みとショートカットについてはタブ・Webサイトを再読み込みする方法をご覧ください。

よく紹介されるコンソール用コードが1回しか更新されない理由

次のコードをコンソールに貼り付けるよう紹介している記事をよく見かけます。

setInterval(() => location.reload(), 300000);

正しそうに見えますが、実際にはページが1回再読み込みされた時点で止まります。コンソールに貼り付けたスクリプトは、ページの中で動いています。ページが再読み込みされると、Chromeは古いページと、その中で動いていたタイマーなどをすべて破棄します。新しく読み込まれたページは、タイマーのことを何も知りません。

解決策は、再読み込みされないタブにタイマーを置き、そこから別のタブを再読み込みすることです。以下の方法1と方法2は、どちらもこの仕組みを使っています。

方法1:デベロッパーツールのコンソールで自動更新する

  1. 自動更新したいページを開きます。
  2. Ctrl+Shift+J(Windows・Linux・ChromeOS)またはCmd+Option+J(Mac)でコンソールを開きます。
  3. 貼り付けに関する警告が表示された場合は、警告に表示されている語句(英語表示ではallow pasting)を入力してEnterキーを押します。これは、コンソールをあまり使っていないプロファイルで表示される、有害なコードを貼り付けさせる詐欺から利用者を守るための仕組みです。
  4. 下のコードを貼り付けてEnterキーを押します。間隔を変えるには、300000をミリ秒単位の値に置き換えます(下の早見表を参照)。
  5. 新しいタブにページのコピーが開き、設定した間隔で再読み込みされます。タイマーは元のタブで動いているので、元のタブは閉じないでください。
  6. 止めるときは、どちらかのタブを閉じます。
const refreshTab = window.open(location.href);
const timer = setInterval(() => {
  if (refreshTab.closed) { clearInterval(timer); return; }
  refreshTab.location.reload();
}, 300000); // 300000ミリ秒 = 5分

何も開かない場合は、新しいタブがポップアップとしてブロックされている可能性があります。アドレスバー右端のポップアップ ブロック アイコンをクリックし、このサイトのポップアップを常に許可してから、もう一度コードを実行してください。

この方法の制限:

  • バックグラウンドのタブではタイマーが遅くなる:タブが5分以上非表示になると、Chromeはタイマーを約1分に1回しかチェックしなくなります。10秒間隔のつもりでも、実際にはおよそ1分に1回になります。数分間隔ならほとんど影響はありません。避けたい場合は、コピーのタブを別ウィンドウにドラッグし、元のタブが見える状態にしておきましょう。
  • 同じサイト内でのみ動作する:コピーのページがログインページなど別のドメインに移動すると、ブラウザのセキュリティにより元のタブから再読み込みできなくなります。
  • 閉じると終了する:どちらかのタブを閉じたりChromeを再起動したりすると終了します。次回はもう一度コードを貼り付ける必要があります。

方法2:ワンクリックで使える自動更新ブックマークレットを作る

ブックマークレットとは、Webサイトを開く代わりに小さなスクリプトを実行するブックマークです。毎回コンソールを開く必要がなくなります。このブックマークレットは、クリックすると更新間隔を秒数で尋ねてきます。

  1. Ctrl+Shift+B(MacはCmd+Shift+B)でブックマークバーを表示します。
  2. ブックマークバーを右クリックし、ページを追加を選びます。
  3. 名前に「自動更新」と入力し、URL欄に下のコードを貼り付けます。1行のコードです。
  4. 保存をクリックします。
  5. 任意のWebサイトを開き、ブックマークバーの自動更新をクリックします。秒数を入力してOKをクリックすると、ページのコピーが開き、その間隔で再読み込みされます。
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と同じです。

方法3:自分のページに自動更新を組み込む(meta refresh・JavaScript)

自分のダッシュボード、社内ページ、ローカルの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秒ごと50005
10秒ごと1000010
30秒ごと3000030
1分ごと6000060
2分ごと120000120
5分ごと300000300
10分ごと600000600
15分ごと900000900
30分ごと18000001800
1時間ごと36000003600

どの方法を選べばいい?

コンソールブックマークレット自分のページにmeta・JSAuto Refresh Page拡張機能
どのWebサイトでも使えるはいはい(Chrome自身のページを除く)編集できるページのみはい(Chrome自身のページを除く)
タブを閉じたりChromeを再起動したりしても続くいいえいいえ(ワンクリックで再開)はいはい(ブラウザ起動時に自動更新を開始)
2つ目のタブが必要はいはいいいえいいえ
ページごとに別の間隔を設定ページごとに設定ページごとにクリックページごとに編集はい(更新リスト)
クリックや入力中は停止・一時停止いいえいいえいいえはい
コードが必要はい最初の1回だけはいいいえ

1回きりの更新ならコンソールかブックマークレットで十分です。自分のページならmeta refreshを使いましょう。定期的に更新するページがあるなら、拡張機能を使えば毎回の設定が不要になります。

拡張機能のほうが楽なケース

Auto Refresh Pageは、Chrome・Edge・Firefoxで使える無料の拡張機能です。ここまで紹介した内容をコードなしで実行でき、設定も保存されます。5分などのプリセットを選ぶか、時間・分・秒でカスタム時間を追加して、保存をクリックするだけです。

img
日本語 
実行中 
時間間隔
更新リスト
キーワード検出
5秒
10秒
15秒
✓ 5分
10分
15分

カスタム時間を追加 

+ カスタム時間

ランダム間隔 

+ ランダム時間
  • 2つ目のタブは不要:タイマーはページの中ではなく拡張機能で動くので、再読み込みで消えることはありません。
  • ページごとに別々のタイマー:保存したURLは、それぞれの間隔で更新リストに入ります。URLの末尾に*を付けると、サイト全体が対象になります。複数のURLを管理する方法もご覧ください。
  • 作業中は待ってくれる:ユーザー操作時の更新動作で、クリックや入力をしたときにカウントダウンを停止・一時停止・リセットできます。詳しくは停止・一時停止・リセットの違いをご覧ください。
  • 便利な機能:ページ上のカウントダウンタイマー、指定した回数で自動停止する機能、キャッシュを使わずに読み込むハードリフレッシュがあります。
  • キーワード通知(プレミアム):キーワード検出タブで、ページに特定の語句が表示されたとき、または消えたときに通知を受け取れます。ページ監視ガイドをご覧ください。

詳しい使い方はChrome・Firefox・EdgeでWebページを自動更新する方法をご覧ください。

自動更新を使う前の注意点

  • 理解できるコードだけを貼り付ける:このページのコードは、ページのコピーを開いて再読み込みするだけです。知らない人から送られてきたコンソール用コード、特にパスワード・Cookie・トークンに関係するコードは、絶対に貼り付けないでください。
  • 必要以上に短い間隔にしない:間隔が短すぎるとWebサイトに負荷がかかり、CAPTCHAが表示されたり、一時的にブロックされたりすることがあります。
  • 保存していない入力内容は消える:入力中のページを自動更新する場合は、クリックしたら自動更新を止める設定にしましょう。
  • 「フォーム再送信の確認」が表示される場合:フォームを送信した後に表示されたページです。この表示を防ぐ方法をご覧ください。
  • ログイン状態を保つのが目的なら:Chromeでセッションを維持する方法を参考に、サイトのタイムアウトより短い間隔を設定してください。

タイマーをページの外に置くことさえ分かれば、拡張機能なしでの自動更新は難しくありません。ちょっとした用途にはコンソールやブックマークレットを使いましょう。毎日同じコードを貼り付けるようになったら、Auto Refresh PageをChromeに追加して、一度だけ設定すれば済みます。

よくある質問:

  1. 1. 拡張機能なしでChromeを自動更新できますか?

    できますが、Chromeには自動更新の設定がないため、設定画面からは行えません。デベロッパーツールのコンソールに短いスクリプトを貼り付ける方法、そのスクリプトをブックマークレットにする方法、自分のページにmeta refreshタグを追加する方法があります。コンソールとブックマークレットの方法は、タブを閉じると止まります。

  2. 2. setIntervalとlocation.reload()のコードで、1回しか更新されないのはなぜですか?

    コンソールに貼り付けたスクリプトはページの中で動いており、ページが再読み込みされるとタイマーごと破棄されるためです。更新を続けるには、この記事の方法1のように、1つのタブでタイマーを動かし、別のタブを再読み込みします。

  3. 3. Chromeでページを5分ごとに更新するにはどうすればいいですか?

    拡張機能を使わない場合は、この記事のコンソール用コードで300000ミリ秒を指定するか、ブックマークレットに300秒と入力します。Auto Refresh Page拡張機能なら、時間間隔タブで5分のプリセットを選んで保存をクリックします。

  4. 4. バックグラウンドのタブでも自動更新は続きますか?

    スクリプトを使う方法では遅くなります。タブが5分以上非表示になると、Chromeはタイマーを約1分に1回しかチェックしないため、短い間隔は遅れて実行されます。数分間隔ならほとんど影響はありません。Auto Refresh Pageはタイマーを拡張機能側で動かすので、ほかのタブで作業している間も更新が続きます。

  5. 5. EdgeやFirefoxでも同じ方法が使えますか?

    使えます。同じコードがEdge(Ctrl+Shift+Jでコンソールを開く)とFirefox(Ctrl+Shift+K、MacはCmd+Option+K)でも動作します。Firefoxでも、Chromeと同じように、最初に貼り付けを許可する語句の入力を求められることがあります。

  6. 6. 自動更新のコードをコンソールに貼り付けても安全ですか?

    内容を理解しているコードなら安全です。この記事のコードは、ページのコピーを開いて再読み込みするだけです。知らない人から送られてきたコード、特にパスワード・Cookie・トークンに関係するコードは絶対に貼り付けないでください。