Notion Web Clipper

Webページの情報をNotionに保存するためのChrome拡張機能です。

English version here

機能

• ウェブページのタイトル、URL、コンテンツを抽出してNotionに保存
• メモ、キーワード、お気に入りの追加機能
• ショートカットキーによる素早い保存（Alt+S）
• ポップアップインターフェースによる詳細設定（Alt+L）

必要条件

• Notion APIキー（Notion Developersから取得）
• Notionデータベース（以下のプロパティが必要）:
  • Name（タイトル型）
  • URL（URL型）
  • Status（ステータス型）
  • Favorite（チェックボックス型）
  • Memo（テキスト型）
  • Keywords（マルチセレクト型）

インストール方法

開発者モードでのインストール

1. このリポジトリをクローンまたはダウンロードします
2. 依存関係をインストールします

   npm install
   

3. 拡張機能をビルドします

   npm run build
   

4. Chromeで chrome://extensions を開きます
5. 「デベロッパーモード」を有効にします
6. 「パッケージ化されていない拡張機能を読み込む」をクリックし、dist フォルダを選択します

使用方法

初期設定

1. 拡張機能のアイコンをクリックしてポップアップを開きます
2. Notion APIキーとデータベースIDを入力します
   • APIキーは Notion Developers から取得できます
   • データベースIDはNotionデータベースのURLから取得できます（例: https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=... の a8aec43384f447ed84390e8e42c2e089 部分）

ページの保存

ポップアップから保存

1. 保存したいウェブページで拡張機能のアイコンをクリックします
2. 必要に応じてメモ、キーワード、お気に入りを設定します
3. 「このページをNotionに保存」ボタンをクリックします

ショートカットキーで保存

• Alt+S キーを押すと、現在のページが直接Notionに保存されます（メモやキーワードなしで）
• Alt+L キーを押すと、ポップアップが開きます

開発

開発環境

• TypeScript
• Webpack
• Chrome Extension API

プロジェクト構造

notion-web-clipper/
├── dist/                 # ビルド後のファイル
├── public/               # 静的ファイル
│   ├── icons/            # アイコン画像
│   ├── manifest.json     # 拡張機能のマニフェスト
│   └── popup.html        # ポップアップのHTML
├── src/                  # ソースコード
│   ├── api.ts            # Notion API連携
│   ├── background.ts     # バックグラウンドスクリプト
│   ├── content.ts        # コンテンツスクリプト
│   ├── popup.ts          # ポップアップのロジック
│   └── types.ts          # 型定義
├── package.json          # プロジェクト設定
├── tsconfig.json         # TypeScript設定
└── webpack.config.js     # Webpack設定

開発コマンド

• ビルド: npm run build
• 監視モード: npm run watch

ライセンス

MIT

注意事項

• この拡張機能はNotionの公式製品ではありません
• Notion APIの利用制限に注意してください