読んでいるWeb小説を作品別JSONに保存するChrome拡張

Last updated at 2026-08-12Posted at 2026-08-12

Web小説を作品ごとに保存できるChrome拡張「小説棚」を制作しました。

紹介はnote記事で紹介しているため、今回は使用している主な技術を簡単に紹介します。

手動で読み進めると、小説が貯まっていくため、出力すると閲覧用サイトが出力できます。

出力した閲覧用サイトは音声読み上げ対応です。

Chrome拡張の基本構成

Chrome拡張は、Manifest V3を使用しています。

主な構成は次のとおりです。

Content Scriptで現在表示しているWebページから小説タイトルや本文を取得し、Service Workerを経由して保存処理を行います。

保存した小説の一覧や出力操作は、Chromeのサイドパネルから行います。

本文の取得にはContent Scriptを使用しています。

小説家になろうやカクヨムなど、対応しているサイトでは本文が表示される要素を優先して取得します。

その他のサイトでは、articleやmainなど、本文らしい要素を判定して取得します。

ページのURL、作品タイトル、ページタイトル、本文を1ページ分のデータとして扱います。

通常の保存先には、Chrome Storage APIのchrome.storage.localを使用しています。

作品タイトルをキーにして作品データを管理し、同じ作品のページを取得すると、既存のデータへ追加または更新します。

サーバーや外部データベースは使用していないため、保存データはブラウザ内で管理されます。

ユーザーが保存先フォルダを選択した場合は、File System Access APIを使用して、作品別のJSONファイルを書き込みます。

ファイルは次のような形式で保存されます。

作品名.json

フォルダの選択情報はIndexedDBに保存しています。

Chrome拡張のインストール先へ直接ファイルを書き込むのではなく、ユーザーが許可したフォルダへ保存する仕組みです。

保存した小説は、JavaScriptで閲覧用HTMLへ変換します。

本文データはHTML内に埋め込まれるため、生成されたHTML単体で閲覧できます。

サーバーへのアップロードや専用アプリのインストールは必要ありません。

生成したHTMLには、次の機能を用意しています。

読書位置や設定の保存には、閲覧用HTML側のlocalStorageを使用しています。

読み上げには、ブラウザ標準のWeb Speech APIを使用しています。

追加の音声サービスやAPIキーは必要ありません。

利用できる音声は、使用しているOSやブラウザによって異なります。

外部サーバーや外部APIに依存せず、ブラウザ内で本文の取得・保存・閲覧サイト生成まで完結する構成にしています。

ソースコードはGitHubで公開しています。

より詳しい保存処理や画面構成、導入方法については、詳細記事をご覧ください。