Webページのアーカイブを閲覧するブックマークレットの作成(&閉鎖ページにも対応させたかった)

(結論だけ見たい方は4. 作成の節をご覧ください)

0. はじめに

リンク先に飛んだ際、そのページが閉鎖していたり、「お探しのページは見つかりませんでした」と言われることがある。
そうした際にインターネットアーカイブは便利である。
今回は、現在閲覧しているページのアーカイブを見るためのブックマークレットを作成しようと思う。

※ここでは、インターネットアーカイブとしてWayBack Machineを利用する。

1. 環境

Windows10 Home
バージョン: 21H2
Vivaldi
バージョン: 4.3.2439.65 (Stable channel) (64-bit)
Chrome
バージョン: 96.0.4664.45（Official Build）（64 ビット）

2. 要件定義

必要な機能(動作順序)は次の通りとする。

閲覧中のページのURLを取得する
そのURLをインターネットアーカイブ(WayBack Machine)で検索し、アーカイブ一覧のURLを取得する
最後にそのアーカイブ一覧を別タブで開く

3. 作り方

現在閲覧しているページのURLはlocation.hrefで取得できる。
WayBack Machineでは、あるURLのアーカイブ一覧はhttps://web.archive.org/web/*/[ここに見たいページのURL]で閲覧できる。
そのため、https://web.archive.org/web/*/と見たいページのURLを文字列として連結すれば、アーカイブ一覧のURLが手に入る。
JavaScriptでは、文字列の連結は単に+演算子を用いるだけで行える。
新しいタブで開くには、Window.open()を利用する。
これは、引数としてURLを与えると、別タブで開いてくれる関数である[1]。

4. 作成

作り方をもとにコードを作成した。

open("https://web.archive.org/web/*/" + location.href)

このコードをブックマークレットに直すとこうなる。

javascript:(function(){open("https://web.archive.org/web/*/" + location.href)})()

これで目的のブックマークレットが作成できた。

5. 問題

しかしこれでは問題がある。
閉鎖したページでは、location.hrefでURLを取得できないのである。
※取得しようとすると、Chrome系ブラウザではchrome-error://chromewebdata/が返されてしまう。

6. 問題の解決法

どうすれば閉鎖したページのURLを取得できるのか。似た質問がstackoverflow[2]にあった。
これによると、document.querySelector('#reload-button').urlやloadTimeData.data_.summary.failedUrlを使うことで取得できるらしい。

7. ブックマークレットを改善...できなかった

というわけで、location.hrefの返り値がchrome-error://chromewebdata/だった時は、loadTimeData.data_.summary.failedUrlを使ってURLを取得するように修正した。

let url = "https://web.archive.org/web/*/";
if (location.href == 'chrome-error://chromewebdata/') {
    url += loadTimeData.data_.summary.failedUrl;
} else {
    url += location.href;
}
open(url);

三項演算子を使ってコードを短くする。ブラウザのコンソールでは動作確認できた。

open("https://web.archive.org/web/*/" + 
    (
        (location.href == 'chrome-error://chromewebdata/') ? 
            loadTimeData.data_.summary.failedUrl : location.href
    )
);

これをブックマークレットにする。

javascript:(function(){open("https://web.archive.org/web/*/"+((location.href=='chrome-error://chromewebdata/')?loadTimeData.data_.summary.failedUrl:location.href));})()

しかし動かない。コンソールでは動いたが...
おそらくchrome://から始まるURLだからか？
以下のリンクによると、"新しいタブ"ではブックマークレットは動かせないらしい。これが原因か？
新規タブの空白ページでも動作するブックマークレットを作る - Neo's World
98871 - chromium - An open-source project to help move the web forward. - Monorail

-1.参考文献

[1] Window.open() - Web API | MDN
[2] javascript - Getting the current domain name in Chrome when the page fails to load - Stack Overflow

日記

日本語の勉強のためのブログ