連載一覧
-
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にリダイレクトします。
クロム拡張の設定変更
{
"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機能が動作する様になります。
リダイレクト設定
[{
"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にアクセスするため、この制限を緩和する設定を加えます。
{
"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ビューアに 誰も得しない余計な 機能を追加します。お楽しみに。