はじめに

このリポジトリは、バーチャルオフィス oVice ユーザーとしてあるといいなと感じた機能を
手軽に使えるようにChrome拡張機能化するために作成したリポジトリです。

Chrome拡張機能インストールページ

実装している機能

• oViceタブを別タブから操作

  • マイク切替（mic）
  • 音声ミュート切替(volume)
  • 画面共有切替(ScreenShare)
  • oViceタブを前面に表示
  • 離席
  • 会議室、oViceを退室

• oViceタブの状態を表示

  • マイク ON, OFF
  • ミュート ON, OFF
  • 画面共有 ON, OFF
  • 所在確認　ログアウト, パブリックスペース, 会議室

• 拡張機能アイコンに状態を表示

  • マイク ON, OFF

使用方法

• 拡張機能をインストール
  https://chrome.google.com/webstore/detail/ovice-controller-extensio/bebojhcmkpcojcalbadohngjiacdcdde?hl=ja&authuser=0

• 拡張機能の表示・非表示を切り替え
  

アクションページから実行

• 拡張機能のアクションボタンを押下
• 任意のボタンで動作を実行
  

ポップアップウィンドウから実行

ショートカットキーから実行

デザイン

Figmaデザインカンプ

https://www.figma.com/file/NxcSkKSOat93POTMj6GS0V/OVCE?node-id=0%3A1

ローカル環境構築

1. リポジトリを clone する

git clone https://github.com/cti1650/ovice_controller_extension.git

2. ライブラリをインストールする

yarn

3. Chrome Extension を作成する

yarn export

以下のコマンドを実行するとPopupページの見た目を
localhostで検証することができます！

yarn dev

4. Chrome Extension を登録する

a. Chrome 拡張機能ページにアクセス

chrome://extensions/

b. 拡張機能をパッケージ化

c. extensions ディレクトリをアップロード

開発について

• Linkは可能ですが、URLの指定を.htmlまで記述する必要があります.
• アプリ名などを指定する場合にはdist/manifest.jsonを書き換えます.

1. 公開用ファイルの生成

yarn export

以下のコマンドを実行するとPopupページの見た目を
localhostで検証することができます！

yarn dev

2. 各オプション機能の実行

a. 拡張機能の ZIP 化

yarn ext-zip

b. 拡張機能用アイコンの自動生成

https://github.com/cti1650/chrome_extension_maker_tools

manifest.json と同一階層に icons/icon.png ファイル(サイズ 128px 以上)を格納してから以下のコマンドを実行してください。
実行すると各サイズ(16px,19px,48px,128px)のアイコン生成と manifest.json へのパス設定を自動的に行います！

yarn ext-icon-transparent --eq

3. 拡張機能のバージョン管理

a. メジャーアップデート（機能に大きな変更があった場合）

yarn ext-major

b. マイナーアップデート（後方互換性を保つ変更があった場合）

yarn ext-minor

c. パッチアップデート（バグ修正が行われた場合）

yarn ext-patch

※ yarn export時にはパッチアップデートが自動実行されます！