Chrome 拡張機能はすごくて、chrome.webRequestのイベントを駆使すると特定の条件のURLをブロックしたり、リダイレクトすることができる

以下はexample.comを含む画像を白紙にするコード　画像かどうかはtypesの「images」で見てる

var pattern = "https://example.com*";

function redirect(details) {
  console.log('blocked', details.url);
  return {cancel: true};
}

chrome.webRequest.onBeforeRequest.addListener(
  redirect,
  {urls:[pattern], types:["image"]},
  ["blocking"]
);

が、↑のようにchrome.webRequest.onBeforeRequest.addListener()は実はURLしか条件に入れることが出来ない だからヘッダーを見て〜のときはブロック、といったことができない

解決策

Headerを見れるchrome.webRequest.onHeadersReceived.addListener()を使う

以下はサイズが１MB以下のJPEG画像をブロックする例

'use strict';
function blockImages(details) {
  var responseHeaders = details.responseHeaders;
  var flag = 0;
  for (var i = 0; i < responseHeaders.length; i++) {
    if (responseHeaders[i].name.toLowerCase() == 'content-length') {
      if(responseHeaders[i].value < 100000) {
        flag++;
      }
    }
  }
  for (var i = 0; i < responseHeaders.length; i++) {
    if (responseHeaders[i].name.toLowerCase() == 'content-type') {
      if(responseHeaders[i].value == 'image/jpeg') {
        flag++;
      }
    }
  }
  if(flag == 2) {
    console.log('blocked', details.url);
    return {cancel: true};
  } else {
    return { responseHeaders: responseHeaders };
  }
}

chrome.webRequest.onHeadersReceived.addListener(
  blockImages,
  {urls: ['https://example.com*']},
  ['responseHeaders', 'blocking']
);

なんでわざわざfor文で回しているかって話だが、responseHeadersはヘッダー名前がそのままKeyになってくれないので何番目かわからない。よって回すしかない。。。

ちなみに監視対象URLをすべてにする場合は

urls: ['<all_urls>'],

とすればいい

動かざることバグの如し

近づきたいよ君の理想に

Chrome拡張機能で特定のHeaderのときだけブロックする方法

解決策