連載一覧
-
PDFを閲覧＋αするクロム拡張の楽な作り方
- クロム拡張でWeb上のPDFファイルを閲覧できる様になる
- ただし、URLは謎形式で手入力する必要あり
-
PDFを閲覧＋αするクロム拡張の楽な作り方②
- 普通のURL入力やリンククリックのPDF閲覧に対応
- 普通にPDFビューアとして使える様になる
-
PDFを閲覧＋αするクロム拡張の楽な作り方③
- PDF閲覧に独自処理を追加
背景
Web上のPDFファイルの閲覧に機能追加するなら、以下の構成が一般的の様です。
- PDF.jsライブラリを使う
- UI関連イベントの処理を実装する
- 独自処理を追加する
この構成だと、UI関連イベント処理が面倒なので、以下の構成で楽にPDF上に独自処理を追加できる方法をまとめます。
- PDF.jsライブラリ付属のviewerにUI関連処理を丸投げする
- 独自処理を追加する
自作ツール
への機能追加の関係上、クロム拡張での実現方法を説明しますが、それ以外の環境にも簡単に流用できるでしょう。
最速でPDFファイルが見えるクロム拡張にする
クロム拡張の設定
まず、クロム拡張を作っていく空のフォルダを適当に用意してください。そこに、以下の中身のmanifest.jsonファイルを追加します。
{
"name": "PDF test",
"version": "1.0.0",
"manifest_version": 3,
"description": "PDF viewer",
"host_permissions": [
"<all_urls>"
]
}
host_permissionsは、PDF.jsのビューアにWeb上のPDFを読み込ませるために必要です。これが無いと「Fail to fetch」のエラーが出て閲覧できません。
PDF.jsのダウンロードと配置
PDF.jsから、Prebuilt版をダウンロードします。ダウンロードしたzipの解凍フォルダを、クロム拡張フォルダに配置してください。
- クロム拡張フォルダ
- pdfjs-2.14.305-dist（※バージョン番号が違う場合、適宜読み替えてください）
- webフォルダなど
- pdfjs-2.14.305-dist（※バージョン番号が違う場合、適宜読み替えてください）
という構成になっているはずです。
PDF.jsの微修正
このままでもビューアは動くのですが、閲覧できるPDFに強い制約が掛けられており、Web上のPDFを読むとブロックされてしまいます。
解除するには、以下の修正をします。
修正対象のファイルを探す
- クロム拡張フォルダ
- pdfjs-2.14.305-dist
- web
- viewer.js
- web
- pdfjs-2.14.305-dist
修正する
以下の処理をコメントアウトする。
本来この処理は、下記の事態を防止するための措置ですので、このリスクがある場合、別途対処が必要です。
- 他ホストのPDF描画処理を不正に押し付けられる
- XSS脆弱性などと組み合わせて、任意のPDFをあたかもそのホストの正規の文章の様に見せかける
クロム拡張を読み込む
クロム拡張画面に行く
デベロッパーモードにして読み込む
※この設定変更により、Googleの審査を受けていない任意のクロム拡張を読み込める様になります。自作ならともかく、悪意のあるクロム拡張も読み込めてしまいますので、心配な方は試した後に解除してください。
最後に出てきたダイアログで、クロム拡張フォルダを指定すると、以下の様に自作クロム拡張が登録されるはずです。
ID部分は、人によって違います。後で使うので、メモ帳にでもコピーしておいてください。
PDFを閲覧する
ここまで来たら、あとは表示するだけです。URLに
- chrome-extension://[クロム拡張ID]/pdfjs-2.14.305-dist/web/viewer.html?file=[PDFのURL]
と入力して、クロム拡張内のページにパラメタとしてURLを渡せばPDFを表示できます。上記のクロム拡張IDだと、
- chrome-extension://cgpanakihchdinnbpaddhfhajpgafeab/pdfjs-2.14.305-dist/web/viewer.html?file=https://www.ipa.go.jp/files/000017316.pdf
とかになります。PDF.js内のビューアに処理を丸投げしているので、ズームやページジャンプなども最初から使えます。
続く…
次回、PDFファイルのURLをクロム拡張内URLにリダイレクトすることで、普通にPDFビューアとして使える様に拡張します。
「WebRequestが無いならdeclarativeNetRequestを食べればいいじゃない」