PDFを閲覧＋αするクロム拡張の楽な作り方②

# 連載一覧
- **[PDFを閲覧＋αするクロム拡張の楽な作り方](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e)**
  - クロム拡張でWeb上のPDFファイルを閲覧できる様になる
  - ただし、URLは謎形式で手入力する必要あり
- **[PDFを閲覧＋αするクロム拡張の楽な作り方②](https://qiita.com/largetownsky/items/fe854ea78960816538e5)**
  - 普通のURL入力やリンククリックのPDF閲覧に対応
  - 普通にPDFビューアとして使える様になる
- **[PDFを閲覧＋αするクロム拡張の楽な作り方③](https://qiita.com/largetownsky/items/e61624ba8be7e1d50fed)**
  - PDF閲覧に独自処理を追加

# 前回のまとめ
Web上でPDF閲覧にスクリプト処理を追加するのは、[pdf.jsライブラリ](https://mozilla.github.io/pdf.js/)のおかげで想像よりはるかに簡単に済みます。前回、 **ほぼノーコードの以下の手順で、PDFファイル閲覧ができるクロム拡張** ができました。
- クロム拡張として動作する最低限＋host_permissionsの[設定ファイル](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e#%E3%82%AF%E3%83%AD%E3%83%A0%E6%8B%A1%E5%BC%B5%E3%81%AE%E8%A8%AD%E5%AE%9A)を用意
- [pdf.jsのダウンロード・解凍・配置](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e#pdfjs%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A8%E9%85%8D%E7%BD%AE)
- pdf.jsライブラリ内のコードを[3行だけコメントアウト](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e#pdfjs%E3%81%AE%E5%BE%AE%E4%BF%AE%E6%AD%A3)

ただ、PDFビューアとして使うには不便な点が残っています。それは、 **chrome-extension://[クロム拡張ID]/pdfjs-2.14.305-dist/web/viewer.html?file=[PDFのURL]** と呪文の様なURLを **人手で** 入力する必要があることです。これでは、Webページのリンクをクリックしても機能しません

# 今回の概要
今回、 **Webページのリンククリックでも、作ったクロム拡張でPDFファイルが閲覧できる** ように改善します。つまり、前回と今回で、普通に使えるPDFビューアになります。

今回の内容はこんな感じで、またノーコードとなっております。~~タグのJavaScriptとかTypeScriptなんて飾りです。偉い人にはそれが分からんのです。~~ 次回ちゃんと出てきます。
- URLのリダイレクト設定
- アクセスブロックの解除

## URLのリダイレクト設定
クロム拡張は、現在[バージョン2から3への移行期](https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/)で、今から作るなら3で作るのがおすすめです。今あるPDFビューアのほとんどがバージョン2で、[webRequestBlocking](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#modifying-network-requests)という機能でリダイレクトしています。この機能は、裏で色々できすぎて危険なため、バージョン3では原則禁止されています。

バージョン3で代わりに使うのがdeclarativeNetRequestです。これは、URLパターンを指定して、ブロックしたりリダイレクトしたりする機能です。この機能で、PDFファイルのURLをクロム拡張内の呪文の様なURLにリダイレクトします。

### クロム拡張の設定変更
```diff_json: manifest.json
{
  "name": "PDF test",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "PDF viewer",
  "host_permissions": [
    "<all_urls>"
- ]
+ ],
+ "declarative_net_request": {
+   "rule_resources": [{
+     "id": "pdf_redirect",
+     "enabled": true,
+     "path": "pdf_redirect.json"
+   }]
+ },
+ "permissions": [
+   "declarativeNetRequest"
+ ]
}
```
これで、同じフォルダ内のpdf_redivect.jsonに書く通りにdeclarativeNetRequest機能が動作する様になります。

### リダイレクト設定
```pdf_redirect.json
[{
  "id": 1,
  "priority": 1,
  "action": {
    "type": "redirect",
    "redirect": {
      "regexSubstitution": "chrome-extension://[クロム拡張ID]/pdfjs-2.14.305-dist/web/viewer.html?file=\\0"
    }
  },
  "condition": {
    "isUrlFilterCaseSensitive": false,
    "regexFilter": "^http.*\\.pdf$",
    "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script"
        , "image", "font", "object", "xmlhttprequest", "ping", "csp_report"
        , "media", "websocket", "webtransport", "webbundle", "other"],
    "excludedInitiatorDomains": [
      "[クロム拡張ID]"
    ]
  }
}]
```
2か所の **[クロム拡張ID]** は、[作成中のクロム拡張ID](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e#%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E3%81%97%E3%81%A6%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80)を埋め込み、pdf.jsのバージョンが違う場合なども適宜書き換えてください。

ポイントは
- regexFilterに、拡張子がpdfのURLのみを対象とする正規表現を指定
- regexSubstitutionに、リダイレクト前のURLを正規表現置換で埋め込む
- excludedInitiatorDomainsで、無限ループを防止する

最後の設定を怠ると、pdf.js内部からのweb上pdfファイルへのアクセスも、再度viewer.htmlにリダイレクトされて、いつまでたってもpdfファイルにアクセスできないことになります。

ここまでで、一旦クロム拡張をリロードしてください。
![extReload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1747214/19cc054a-df44-4679-648d-d7f2f4715610.png)

すると、URL欄への直接 **pdfファイルURL入力で、PDFファイルが閲覧できる** ようになります。 ただし、WebページのPDFファイルへのリンククリックはブロックされます。
![webBlock.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1747214/7232fc07-c891-9c9d-3783-c5753f42147a.png)

## アクセスブロックの解除
前章のブロックは、web上の危険なスクリプトなどから、クロム拡張に無制限にアクセスされないための防護機構です。 **人手の** 明示的な操作が無い場合、自動的に処理できる範囲は厳しく制限されています。

今回はWebページからのリンクでviewer.htmlにアクセスするため、この制限を緩和する設定を加えます。

```diff_json: manifest.json
{
  "name": "PDF test",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "PDF viewer",
  "host_permissions": [
    "<all_urls>"
  ],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "pdf_redirect",
      "enabled": true,
      "path": "pdf_redirect.json"
    }]
  },
  "permissions": [
    "declarativeNetRequest"
- ]
+ ],
+ "web_accessible_resources": [{
+   "resources": ["pdfjs-2.14.305-dist/web/viewer.html"],
+   "matches": ["http://*/*", "https://*/*"]
+ }]
}
```
見た通り、http/httpsプロトコルのWebページからだけ、viewer.htmlへのアクセスを許可する設定を追加しました。
この設定後、クロム拡張をリロードすれば、普通に **PDFビューアとして使えるクロム拡張の完成** です。
![extReload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1747214/19cc054a-df44-4679-648d-d7f2f4715610.png)

# 続く…
次回、せっかく普通に動くPDFビューアに ~~誰も得しない余計な~~ 機能を追加します。お楽しみに。