An open API service indexing awesome lists of open source software.

https://github.com/devwithkaiju/sitememo

ウェブページごとにメモを保存する Chrome 拡張機能
https://github.com/devwithkaiju/sitememo

chrome-extension javascript

Last synced: 2 months ago
JSON representation

ウェブページごとにメモを保存する Chrome 拡張機能

Awesome Lists containing this project

README

          

# サイト別メモ(拡張機能)

## これはなに

特定のウェブページごとにメモを保存し、後で簡単に確認できるようにするための Chrome 拡張機能です。

## 機能

- **右クリックメニューからメモを追加**:現在のページにメモを保存
- **保存したメモを表示・削除**:拡張機能アイコンをクリックしてメモ一覧を表示・削除
- **ページを開いた際にメモを表示**:既にメモがあるページでは自動的に表示

## インストール方法

1. このリポジトリをクローンまたはダウンロード
2. Chrome の `拡張機能` (`chrome://extensions/`) を開く
3. `デベロッパーモード` を有効にする
4. `パッケージ化されていない拡張機能を読み込む` をクリックし、本フォルダを選択

## ファイル構成

### `manifest.json`

拡張機能の設定ファイル。以下の権限を定義しています:

- `storage`: メモの保存
- `contextMenus`: 右クリックメニューの追加
- `tabs`: タブの情報取得

### `background.js`

拡張機能のバックグラウンドスクリプト。

- 拡張機能のインストール時にコンテキストメニューを作成
- メモの追加・表示の処理を管理
- ページの読み込み完了時にメモを通知

### `content.js`

ページ上で実行されるスクリプト。

- メモの入力・保存
- メモの表示

### `popup.html`

拡張機能アイコンをクリックした際に表示されるポップアップ画面。

- 保存したメモを一覧表示

### `popup.js`

ポップアップ画面の動作を管理。

- `chrome.storage.sync` からメモを取得し、リスト表示
- メモをクリックすると該当ページを開く
- メモを削除できるようにする

### `popup.css`

ポップアップ画面のスタイルを管理。

- メモが長い場合に適切に改行される
- レイアウトの調整

### `logo.png`

拡張機能のアイコン画像。変更時は `manifest.json` の `icons` のファイル名を書き換えてください。

## 使い方

1. **メモを追加**:
- ページ上で右クリック → `このページのメモを追加`
- メモを入力し、保存
- 既にメモが保存されているページで新たにメモが保存されると、上書きされる
2. **保存したメモの確認**:
- 拡張機能アイコンをクリック
- メモ一覧が表示され、クリックするとページを開く
- 削除ボタンをクリックすると、該当メモを削除
3. **ページを開いた際にメモを確認**:
- メモが保存されているページを開くと、自動的にアラート表示