【Chrome Extension】Twitterの画像を開く際にオリジナルサイズ版(:orig)にリダイレクトする

Twitterにアップロードした画像を表示するとリサイズされて表示されますが、画像のURL末尾に「:orig」を追記すると、オリジナルサイズの画像を取得できます。

【縮小サイズ画像】https://pbs.twimg.com/media/XXXX.jpg
【オリジナル画像】https://pbs.twimg.com/media/XXXX.jpg:orig

詳細は下記リンク先で説明されています。
Twitter の画像 URL に :orig をつけると元画像が取得できる

しかし、画像を開く度にURL末尾に:origを入力するのは煩いため、自動で入力するようにします。
ChromeやFirefoxではブラウザ拡張(Chrome Extension, WebExtensions)のAPIで提供されており、ブラウザの各種動作をカスタマイズ可能です。

ここでは、Twitter画像のURLをリダイレクトするアドオンを自作します。

概要
chrome.webRequestでイベント処理
onBeforeRequest時にリダイレクト処理を実装
ブラウザのアドオンとして実行する

概要

機能の概要は次の通りです。

・Twitter画像を開いた際にオリジナルサイズ画像へ自動でリダイレクト
・タイムラインで表示される画像はリダイレクトしない
・Chrome, Firefoxのブラウザ拡張機能として実装

リダイレクトはブラウザがHTTPリクエストを送信する前に割り込みを行い、リクエストURLを書き換える必要があります。

chrome.webRequestでイベント処理

chrome.webRequest では各種リクエストのイベントリスナーが提供されており、必要ななタイミングで割り込み処理を追加可能です。
chrome.webRequest - Google Chrome

HTTPリクエスト生成時に発生するonBeforeRequestイベントでリダイレクト処理を行います。

chrome.webRequest.onBeforeRequest.addListener(
     callbackFunc,      // コールバック関数
     request_filter,    // リクエストのフィルタ
     option             // オプション
)

callbackFunc:
　イベント発生時のコールバック関数を指定します。
　関数の引数にHTTPリクエストの詳細を格納した情報が渡されます。
request_filter:
　リクエストのフィルタにはコールバックする際のフィルタを指定します。
指定のURLやリクエスト対象のリソースを指定可能です。(詳細:Request Filter)
option:
　オプションを指定します。リダイレクト処理では"blocking"を指定して、コールバック
　関数を処理待ちする必要があります。

onBeforeRequest時にリダイレクト処理を実装

それでは、上記イベントリスナーにTwitter画像のリダイレクト処理を登録します。
RedirectImgUrl.jsに下記コードを記載します。

var targetUrl = "https://pbs.twimg.com/media/*.jpg";
 
function redirectImgUrl(reqDetails) {
    return {
       // リクエストURLの末尾に:origを付加
       redirectUrl: reqDetails.url + ":orig"
    };
}

chrome.webRequest.onBeforeRequest.addListener(
    redirectImgUrl,
    {urls:[targetUrl], types:["main_frame"]},
    ["blocking"]
);

addListenerの第二引数ではURLフィルタに"https://pbs.twimg.com/media/*.jpg"を、
リソースタイプに"main_frame”を指定し、"https://pbs.twimg.com/media/XXXX.jpg"を叩いた際に"https://pbs.twimg.com/media/XXXX.jpg:orig"にリダイレクトさせています。
なお、タイムラインで表示される画像はリダイレクト対象外です。

※URLフィルタの末尾を”/media/*.jpg”としていますが、”/media/*”とするとリダイレクトがループするので注意。

コールバック関数ではリクエストURL(twimg)の末尾に:origを付加して、オリジナルサイズ画像にリダイレクトURLを書き換えています。

ブラウザのアドオンとして実行する

このコードをアドオンとして実行するには拡張機能の情報を記載したmanifest.jsonを作成する必要があります。
次頁ではmanifest.jsonの作成とアドオンの適用について解説します。

kuranabe.hatenablog.com

(余談)先ほどの例ではfunctionを明記していますが、ES2015のアロー関数で無名関数化すると処理を簡略化できます。

var targetUrl = "https://pbs.twimg.com/media/*.jpg";

chrome.webRequest.onBeforeRequest.addListener(
    reqDetails => ({redirectUrl: reqDetails.url + ":orig"}),
    {urls:[targetUrl], types:["main_frame"]},
    ["blocking"]
);