連載一覧

PDFを閲覧＋αするクロム拡張の楽な作り方
- クロム拡張でWeb上のPDFファイルを閲覧できる様になる
- ただし、URLは謎形式で手入力する必要あり
PDFを閲覧＋αするクロム拡張の楽な作り方②
- 普通のURL入力やリンククリックのPDF閲覧に対応
- 普通にPDFビューアとして使える様になる
PDFを閲覧＋αするクロム拡張の楽な作り方③
- PDF閲覧に独自処理を追加

前回のまとめ

Web上でPDF閲覧にスクリプト処理を追加するのは、pdf.jsライブラリのおかげで想像よりはるかに簡単に済みます。前回、 ほぼノーコードの以下の手順で、PDFファイル閲覧ができるクロム拡張 ができました。

クロム拡張として動作する最低限＋host_permissionsの設定ファイルを用意
pdf.jsのダウンロード・解凍・配置
pdf.jsライブラリ内のコードを3行だけコメントアウト

ただ、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への移行期で、今から作るなら3で作るのがおすすめです。今あるPDFビューアのほとんどがバージョン2で、webRequestBlockingという機能でリダイレクトしています。この機能は、裏で色々できすぎて危険なため、バージョン3では原則禁止されています。

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

クロム拡張の設定変更

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を埋め込み、pdf.jsのバージョンが違う場合なども適宜書き換えてください。

ポイントは

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

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

ここまでで、一旦クロム拡張をリロードしてください。

すると、URL欄への直接 pdfファイルURL入力で、PDFファイルが閲覧できる ようになります。ただし、WebページのPDFファイルへのリンククリックはブロックされます。

アクセスブロックの解除

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

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

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ビューアとして使えるクロム拡張の完成 です。

続く…

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