Markdown-pdf

Markdown PDF Viewer

日本語 / English

日本語

Markdown PDF Viewer は、GitHub 上の Markdown を、ワンクリックでPDF風に表示・印刷できる Chrome / Edge 拡張機能です。

設計メモ、研究資料、FPGA関連ドキュメント、技術仕様書など、Markdownで管理している資料を見やすく確認・印刷するためのツールです。

こんな人におすすめ

GitHubのREADMEや設計書をきれいに印刷したい
Markdownの仕様書をPDFっぽく共有したい
raw.githubusercontent.com の Markdown を見やすく表示したい
研究資料・技術資料・設計書をMarkdownで管理している

サンプル

日本語サンプルプレビュー

機能

GitHub上のMarkdownファイルをPDF風ビューアで表示
raw.githubusercontent.com のMarkdownファイルを直接表示
対応ページ上部に PDF表示 と 印刷 ボタンを追加
見出し、リスト、コードブロック、引用、画像、リンク、表を変換
見出しから目次を自動生成
ブラウザの印刷機能でPDF保存や印刷が可能
拡張機能ポップアップからローカルMarkdownファイルを表示
拡張機能UIは日本語と英語に対応

インストール

Chrome Web Store: Markdown PDF Viewer

開発用インストール

Chrome または Edge を開きます。
chrome://extensions または edge://extensions を開きます。
デベロッパーモードを有効にします。
パッケージ化されていない拡張機能を読み込む を選びます。
このリポジトリ内の extension/ フォルダを選択します。

ファイルを変更した後は、拡張機能ページで拡張機能を再読み込みし、対象のMarkdownページも再読み込みしてください。

使い方

GitHubのMarkdownページを開きます。

https://github.com/nagito-hiroshima/Markdown-pdf/blob/main/samples/sample-document.md

ページ上部に追加される PDF表示 ボタンを押します。

PDF表示: PDF風ビューアで開く
印刷: PDF風ビューアを開き、印刷ダイアログを表示

Raw URLでも同じように使えます。

https://raw.githubusercontent.com/nagito-hiroshima/Markdown-pdf/refs/heads/main/samples/sample-document.md

拡張機能アイコンをクリックすると、現在のタブ、手入力URL、ローカル .md ファイルからも開けます。

構成

パス	役割
`extension/`	Chrome / Edge 拡張機能本体
`extension/manifest.json`	Chrome拡張の設定
`extension/_locales/`	日本語・英語の翻訳
`extension/i18n.js`	拡張機能画面の翻訳適用
`extension/background.js`	content script から依頼されたビューアタブを開く
`extension/content-script.js`	GitHub Markdownページにボタンを追加
`extension/popup.html` / `extension/popup.js` / `extension/popup.css`	拡張機能ポップアップ
`extension/viewer.html` / `extension/viewer.js` / `extension/viewer.css`	PDF風Markdownビューア
`.github/workflows/validate.yml`	検証用GitHub Actions
`.github/workflows/release.yml`	自動リリース用GitHub Actions
`architecture.md`	要件・設計メモ

検証

node --check extension/background.js
node --check extension/content-script.js
node --check extension/i18n.js
node --check extension/markdown.js
node --check extension/popup.js
node --check extension/viewer.js
node -e "JSON.parse(require('fs').readFileSync('extension/manifest.json','utf8'))"

リリース

タグをpushすると、GitHub Actionsが配布パッケージ内の extension/manifest.json の version をタグに合わせてから、配布用zipを作成してReleaseを公開します。

git tag v1.0.0
git push origin v1.0.0

GitHubのActions画面から Release ワークフローを手動実行することもできます。その場合も v1.0.0 のようなタグ名を指定してください。

配布zipは、展開したフォルダの直下に manifest.json が見える形で作成されます。

English

Markdown PDF Viewer is a Chrome / Edge extension that opens Markdown files from GitHub or GitHub Raw URLs in a clean, PDF-style browser preview.

It is intended for design notes, research documents, FPGA documentation, technical specifications, and other Markdown-based documents that need to be reviewed or printed neatly.

Sample

English sample preview

Features

Open GitHub Markdown files in a PDF-style viewer
Open raw.githubusercontent.com Markdown files directly
Add Open PDF View and Print buttons to supported pages
Convert headings, lists, code blocks, blockquotes, images, links, and tables
Generate a table of contents from headings
Print or save as PDF using the browser print dialog
Open local Markdown files from the extension popup
Support English and Japanese extension UI

Install for Development

Open Chrome or Edge.
Go to chrome://extensions or edge://extensions.
Enable developer mode.
Choose Load unpacked.
Select the extension/ folder in this repository.

After changing files, reload the extension from the extensions page and then reload the target Markdown page.

Usage

Open a Markdown file on GitHub.

https://github.com/nagito-hiroshima/Markdown-pdf/blob/main/samples/sample-document-en.md

Use the buttons added near the top of the page.

Open PDF View: open the document in the PDF-style viewer
Print: open the viewer and show the print dialog

Raw URLs work the same way.

https://raw.githubusercontent.com/nagito-hiroshima/Markdown-pdf/refs/heads/main/samples/sample-document-en.md

You can also use the extension popup to open the current tab, enter a Markdown URL manually, or open a local .md file.

Project Files

Path	Purpose
`extension/`	Chrome / Edge extension source
`extension/manifest.json`	Chrome extension manifest
`extension/_locales/`	English and Japanese translations
`extension/i18n.js`	Applies translations in extension pages
`extension/background.js`	Opens viewer tabs from content scripts
`extension/content-script.js`	Adds page buttons to GitHub Markdown pages
`extension/popup.html` / `extension/popup.js` / `extension/popup.css`	Extension popup UI
`extension/viewer.html` / `extension/viewer.js` / `extension/viewer.css`	PDF-style Markdown viewer
`.github/workflows/validate.yml`	Validation GitHub Actions workflow
`.github/workflows/release.yml`	Automated release GitHub Actions workflow
`architecture.md`	Architecture and requirements notes

Development Checks

node --check extension/background.js
node --check extension/content-script.js
node --check extension/i18n.js
node --check extension/markdown.js
node --check extension/popup.js
node --check extension/viewer.js
node -e "JSON.parse(require('fs').readFileSync('extension/manifest.json','utf8'))"

Release

When you push a release tag, GitHub Actions updates the packaged extension/manifest.json version to match the tag, creates a release zip, and publishes a GitHub Release.

git tag v1.0.0
git push origin v1.0.0

You can also run the Release workflow manually from the GitHub Actions page. Use a tag name such as v1.0.0.

The release zip is created so that manifest.json is directly visible at the extracted folder root.

Onboarding and first run

When the extension is installed for the first time, it opens onboarding.html once. The page explains how to open GitHub Markdown, use the on-page PDF View button, open URLs or local files from the extension icon, and save the rendered document as PDF from the browser print dialog. It also includes Japanese/English language buttons and a sample Markdown button.

Sample workflow:

Open the sample: https://github.com/nagito-hiroshima/Markdown-pdf/blob/main/samples/sample-document.md.
Click the PDF View button added to the GitHub Markdown page, or open the extension popup and click Open Sample.
Click Print in the viewer.
Choose Save as PDF in the browser print screen.

Supported URLs

The extension accepts these URL types:

GitHub Markdown blob URLs such as https://github.com/{owner}/{repo}/blob/{branch}/{path}.md.
GitHub Markdown blob URLs ending in .markdown.
Raw GitHub URLs such as https://raw.githubusercontent.com/.../*.md or *.markdown.
HTTP/HTTPS URLs that directly return Markdown text.

GitHub blob URLs are converted to raw GitHub URLs before the viewer fetches the file.

Unsupported URLs

The extension intentionally does not pass these pages to the viewer:

GitHub repository top pages.
GitHub Issues, Pull Requests, Actions, and other non-file pages.
GitHub directory (tree) pages.
Non-Markdown files such as .txt, .html, or source code files.
javascript:, data:, file:, and other non-HTTP/HTTPS URLs.
URLs containing usernames or passwords.

If the current GitHub page is not a Markdown file, the popup shows: “Open a Markdown file (.md) on GitHub before using this extension.”

Troubleshooting fetch errors

The viewer no longer displays only the browser’s raw Failed to fetch message. Markdown fetching is performed in the Manifest V3 service worker and errors are classified as invalid URL, unsupported URL, network error, timeout, HTTP error, not found, access denied, not Markdown, or too large.

If fetching fails, check the following:

Confirm that your internet connection is available.
Confirm that the URL points directly to a Markdown file or Markdown text.
For GitHub, confirm the owner, repository, branch name, and file path.
If you see a 404-style message, the file path or branch may be wrong.
If you see an access-denied message, the repository may be private.
If an HTML page was returned, open the actual .md file rather than a repository, issue, pull request, action, or directory page.
Retry later if the request timed out.
Files larger than about 10 MB are rejected.

Private GitHub repositories

Private GitHub repositories are not currently supported for remote fetching. The extension fetches Markdown with credentials: "omit", so GitHub authentication cookies are not sent. Download the file locally and use Open Local Markdown if you need to render private content.

Permissions

The extension requests activeTab to inspect the current tab URL from the popup and storage to pass local Markdown content to the viewer. Host permissions include GitHub, raw GitHub, and HTTP/HTTPS URLs because the popup supports user-entered Markdown URLs outside GitHub; the service worker validates schemes, rejects credentialed URLs, follows redirects carefully, and blocks HTML responses before rendering.