chrome.webRequest.onBeforeSendHeaders

これを使うことでリクエスト前に処理が走る。

準備

これを使うにはイベントページを無効にする必要がある。
manifest.jsonに“persistent”: falseの記載があるとイベントページとなるため、この記述を取っ払う。

しかしこれを取っ払うと常に裏でbackground.jsが動き続けることになってメモリを占領してしてしまうことに注意

イベントページの使用は推奨されている。

構文

chrome.webRequest.onBeforeRequest.addListener(callback, filter, opt_extraInfoSpec);

リクエスト時のURLを取得
Chrome 拡張機能でリクエストヘッダをカスタマイズする方法
公式
https://developers.chrome.com/extensions/webRequest#event-onBeforeRequest

calback

コールバック引数detailでリクエストが走るURLを覗くことができる。
URLを覗くにはこのようにする。

details.url

filter

度のURLのリクエストで走らせるかのフィルタ
またtypeも指定できる

これをオブジェクト形式にして引数として渡す。

以下はすべてのURLでtypeがxmlhttprequestのものを監視する設定。

{
  urls: ["<all_urls>"],
  types: ["xmlhttprequest"]
}

javascriptでテキストファイルをダウンロードさせる

メモリ上にDLさせてからファイルとして保存する
参考：https://www.atmarkit.co.jp/ait/articles/1603/30/news026.html

今回はfetchでいじっていきたいから、fetchでのBlobの使い方を調べる
参考：https://developer.mozilla.org/ja/docs/Web/API/Body/blob

ネット上のファイルを読み込んで操作したい
https://www.catch.jp/wiki/index.php?javascript_file

let l
fetch('https://dl.dropboxusercontent.com/s/jwqmw6s0846qe6c/code.js')
  .then(response => {
    console.log(response)
    response.text().then(text=>l=text)

  })

これでlにテキストが入る

fetch('https://dl.dropboxusercontent.com/s/jwqmw6s0846qe6c/code.js')
  .then(response => {
    console.log(response)
    response.blob()
    console.log(response.blob())
  })
  .then(blob => {
    console.log(blob)
    var objectURL =blob;
    console.log(objectURL)
    // リンク（<a>要素）を生成し、JavaScriptからクリックする
    var link = document.createElement("a");
    document.body.appendChild(link);
    link.href = objectURL;
    link.download = 'filename.js';
    link.click();
    document.body.removeChild(link);
  });

これがエラーになる

fetch('https://dl.dropboxusercontent.com/s/jwqmw6s0846qe6c/code.js')
  .then(response => {
    console.log(response)
    let b=response.blob()
    console.log(b)
    return b
  })
  .then(blob => {
    console.log(blob)
    var objectURL =URL.createObjectURL(blob);
    console.log(objectURL)
    // リンク（<a>要素）を生成し、JavaScriptからクリックする
    var link = document.createElement("a");
    document.body.appendChild(link);
    link.href = objectURL;
    link.download = 'filename';
    link.click();
    document.body.removeChild(link);
  });

動いた

テキストをDLさせる
参考：https://helloworld-blog.tech/javascript/javascript%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E6%A9%9F%E8%83%BD%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B

テキストファイルをDLさせるにはBlobクラスをインスタンス化させる

色々やったけど

結局以下の形に収束した

Blobを生成

 var blob = new Blob([text], {
    "type": "text/plain"
  });

今回はテキストなのでtypeをそのようにする。

クリックさせる

  let link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = filename + '.m3u8'
  link.click()

後はURL.createObjectURLでURLを生成してそれをクリックさせる。
ここまでの一連の流れで変数textに入ったっ文字列をfilenameに格納した名前でDLできる。

【chrome拡張機能】リクエストをカスタマイズ