AIの力でお手軽Chrome拡張機能作り

Slide 1

Slide 1 text

AIの力でお手軽Chrome拡張機能作り Kyoto Tech Talk #7 2025/2/6 京都産業大学上村太成

Slide 2

Slide 2 text

自己紹介 • taiseiue • X: @taiseiue • taiseiue.jp • C#/PHP/JavaScript • バックエンド/プログラミング言語 • おひとり様サークル => WSOFT • wsoft.ws

Slide 3

Slide 3 text

導入 • ファイルを強制ダウンロードさせてくるサイトあるよねこういうのとかこういうの

Slide 4

Slide 4 text

導入 • ブラウザ上で見れるファイルは極力ダウンロードしたくない • 主にPDFファイルとか • ダウンロードしても見返さないことが多い • ダウンロードフォルダがいっぱい • 見た後で削除するのはめんどくさい • Chrome拡張機能でなんとかなりそう • 作ったことないよ • なんとかしてよChat GPT〜 • あわよくばみんなに使ってもらいたい

Slide 5

Slide 5 text

作る(ずっこけ)

Slide 6

Slide 6 text

作る(ずっこけ) Manifest V3だとwebRequest APIが使えないらしい！ (ストアに公開できない)

Slide 7

Slide 7 text

作る(ずっこけ) Manifest V3だとwebRequest APIが使えないらしい！ (ストアに公開できない)

Slide 8

Slide 8 text

作る

Slide 9

Slide 9 text

作る

Slide 10

Slide 10 text

作る: 仕組み • HTTPレスポンスヘッダの書き換え • Content-Disposition: inline; • このヘッダを書き換え/挿入する • DecrativeNetRequest APIを使う • 宣言的(=Decrative)なリクエストの書き換えを行うAPI

Slide 11

Slide 11 text

作る declativeNetRequestはルールセットを事前に定義しておくここの内容を動的に書き換えて書き換えルールを適用する

Slide 12

Slide 12 text

作る declativeNetRequestはルールセットを事前に定義しておくここの内容を動的に書き換えて書き換えルールを適用するここでルールを設定

Slide 13

Slide 13 text

作る • あとは設定画面生やしたり • ポップアップで切り替えれるように

Slide 14

Slide 14 text

できた github.com/taiseiue/mukaikun

Slide 15

Slide 15 text

Chrome Webストアに公開してみる

Slide 16

Slide 16 text

AIの力でお手軽Chrome拡張機能作り Kyoto Tech Talk #7 2025/2/6 京都産業大学上村太成