Chromeのバージョン114以降で実装された、SidePanel機能を利用して、拡張機能を作りました。
オープンソースで公開していますので、皆さんぜひ使ってみてください。
また感想などありましたら教えてください。
今回作ったもの
作ったものは、サイドパネルでGPTと会話してみたり、Chromeのウェブサイトから文字を選択し、拡張機能に文字を渡して、ページの要約などができる機能などを実装しています。
機能
- Chrome/Edgeのサイドパネルから会話できる機能
- サイト内の文字を選択して、要約したりその選択内容を質問で渡したりできる機能
- ダークモード切り替え機能
- LangchainのTools機能を使ってアニメランキングとGoogle検索に対応
- https://qiita.com/umaxiaotian/items/782603e4e3efae228157 (アニメランキングはこちらを使って作っています。）
ギャラリー!
今回のインストール手順をスキップして使う方法
下記のChrome拡張機能ストアからダウンロードできます。
ただし、APIはIP制限をかけているので、私に、Twitter @umarun_j宛にDMを送って貰えれば使えるようにします。
https://chrome.google.com/webstore/detail/xassistant/onchpcbhinlpmohfkjjiemmofnigppfd
コードセットアップ手順
- 前提
- Python3がインストールされていること
- NodeJSがインストールされていること。
どちらも最新で動作します。
まずは、下記からコードをクローンします。ZIPでダウンロードしても問題ありません。
https://github.com/umaxiaotian/Xassistant
※今回はCloneではなくZIPファイルで行っています。
Cloneされた方は②の手順以降を行ってください。
①下記でダウンロードします。
②ZIPファイルを展開してください。
下記のようになればOK
APIの手順
③APIファイルを開きます。
④.envを編集
.env.exampleを参考にOPENAIのAPIキーなどを設定してください。.envにリネームして保存します。
※ちなみにGoogle接続用のこの２つはなくても、大丈夫です。この２つはToolsのGoogle検索で利用するものになります。利用する方入れてください。
- GCSE_ID
- GAPI_KEY
⑤アドレスバー部分に「cmd」と入力してEnterを押すと、コマンドプロンプトが立ち上がるはずです。
⑥必要パッケージをインストールします。
pip install -r requirements.txt
インストールできればOK
⑥APIの起動
下記を入力してUvicornを実行します。
python main.py
拡張機能の手順
①Extensionのフォルダを開きます。
②アドレスバーにcmdを入力し、エンターを押してコマンドプロンプトを起動してください。
③パッケージのインストール
下記を実行してパッケージをインストールします。
pnpm install
④パッケージを起動する。
下記のコマンドを実行して、パッケージを起動します。
npm run dev
④Chromeでデバッグする
Extensionフォルダの下にbuildフォルダができたと思います。
これをChromeで読み込みます。
ここのアドレスをコピーしておきます。
⑤Chromeを開きアドレスバーに下記を入力してください。
chrome://extensions/
⑥開きましたら、「パッケージ化されていない拡張機能を読み込む」をクリックします。
⑦下記をのフォルダの中に入り、フォルダを選択を押してください。
このように入ったら完了です。
