連載一覧

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

背景

Web上のPDFファイルの閲覧に機能追加するなら、以下の構成が一般的の様です。

この構成だと、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フォルダなど

という構成になっているはずです。

PDF.jsの微修正

このままでもビューアは動くのですが、閲覧できるPDFに強い制約が掛けられており、Web上のPDFを読むとブロックされてしまいます。

解除するには、以下の修正をします。

修正対象のファイルを探す

クロム拡張フォルダ
- pdfjs-2.14.305-dist
  - web
    - viewer.js

修正する

以下の処理をコメントアウトする。

本来この処理は、下記の事態を防止するための措置ですので、このリスクがある場合、別途対処が必要です。

他ホストの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を食べればいいじゃない」~~

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