Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soartec-lab/sample-chrome-extension
sample app of chrome extension
https://github.com/soartec-lab/sample-chrome-extension
Last synced: about 1 month ago
JSON representation
sample app of chrome extension
- Host: GitHub
- URL: https://github.com/soartec-lab/sample-chrome-extension
- Owner: soartec-lab
- License: mit
- Created: 2021-04-10T02:50:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-04-10T16:13:37.000Z (over 3 years ago)
- Last Synced: 2024-10-22T02:17:32.215Z (2 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sample-chrome-extension
sample app of chrome extension
## Setup
1. リポジトリのclone
```
$ git clone [email protected]:soartec-lab/sample-chrome-extension.git
```
2. chromeの起動
3. [chorme拡張機能])(chrome://extensions/)設定画面に移動
4. デベロッパーモードの有効化
5. このリポジトリをcloneしたディレクトリを「パッケージ化されていない拡張機能を読み込む」からインポート
## Usage
### chormeのブラウザヘッダーメニューから拡張機能のアクション実行
1. chormeのブラウザヘッダーメニューから拡張機能のアイコンクリック
2. 新規タブが開き「今日の天気」が検索されます
### Google検索画面のアイコンのクリックアクションをバインド
1. `https://www.google.com/`を開く
2. Google検索ページの画像をクリック
3. 新規タブが開き「今日の為替」が検索されます
### 右クリック -> 「今日の天気」をクリックで今日の天気を検索
1. 右クリック -> 「今日の天気」をクリック
2. 「今日の天気」が検索されます
## Commentary of process
### chormeのブラウザヘッダーメニューから拡張機能のアクション実行
1. `background.js`でchormeのブラウザヘッダーメニューからの拡張機能のアクション実行をバインド
2. アクションの実行を受け取ったら`search_weather.js`を実行
3. `search_weather.js`でブラウザ操作を行う。
### Google検索画面のアイコンのクリックアクションをバインド
1. `https://www.google.com/`にのみ適応されるjavascriptファイル`content_script.js` を `content_script`として定義。
2. `content_script.js`ではGoogle検索画面のアイコンのクリックアクションをバインドしている。
3. Googleアイコンがクリックされた場合にデータを`background.js`にpushする。
データを受け取った`background.js`はそのデータをさらに`search_by_input_word.js`へ渡している。
4. `search_by_input_word.js`では`background.js`から受け取ったデータを元にブラウザ操作を行う。
### 右クリック -> 「今日の天気」をクリックで今日の天気を検索
1. 右クリックで表示されるメニューに「今日の天気を追加」
2. 1のアクションをバインドして呼び出された場合に`search_weather.js`を実行
3. `search_weather.js`でブラウザ操作を行う。