ブラウザ拡張機能の追加 #460
Merged
ブラウザ拡張機能の追加 #460
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
wadabee
commented
Apr 19, 2024
Comment on lines
+9
to
+12
| paths-ignore: ['browser-extension/**'] | ||
| pull_request: | ||
| branches: ['main'] | ||
| paths-ignore: ['browser-extension/**'] |
There was a problem hiding this comment.
拡張機能とそれ以外で、CIを分けました
Comment on lines
+10
to
+14
| このリポジトリではブラウザ拡張機能も提供しており、より便利に Generative AI を活用することができます。詳しくは[こちらのページ](/browser-extension/README.md)をご覧ください。 | ||
|
|
||
|  | ||
|
|
||
|
|
There was a problem hiding this comment.
拡張機能の存在に気づかないと思うので、トップページにも追加しました。
超一等地なので問題ありましたら、ご指摘くださいmm
Comment on lines
+3
to
+4
| Copyright (c) 2023 Sinan Bekar | ||
| Modifications Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. |
There was a problem hiding this comment.
以下のRepoを元に作成したので、元のLICENSEファイルを残しています
https://github.com/sinanbekar/browser-extension-react-typescript-starter
Comment on lines
+16
to
+23
| const [tabId, setTabId] = useState<number>(-1); | ||
| Browser.tabs?.getCurrent().then((tab) => { | ||
| if (tab) { | ||
| if (tab.id !== tabId) { | ||
| setTabId(tab.id ?? -1); | ||
| } | ||
| } | ||
| }); |
There was a problem hiding this comment.
ブラウザのタブごとに状態を管理しています。
Comment on lines
+7
to
+11
| export type ChatState = { | ||
| [tabId: number]: { | ||
| messages: Message[]; | ||
| }; | ||
| }; |
There was a problem hiding this comment.
ブラウザのタブごとに状態を管理しています。
Comment on lines
+1
to
+51
| import { wrapStore } from '@eduardoac-skimlinks/webext-redux'; | ||
| import { combineReducers, configureStore, type Action, type ThunkAction } from '@reduxjs/toolkit'; | ||
| import { localStorage } from 'redux-persist-webextension-storage'; | ||
| import { | ||
| FLUSH, | ||
| PAUSE, | ||
| PERSIST, | ||
| persistReducer, | ||
| persistStore, | ||
| PURGE, | ||
| REGISTER, | ||
| REHYDRATE, | ||
| } from 'reduxjs-toolkit-persist'; | ||
| import type { WebStorage } from 'reduxjs-toolkit-persist/lib/types'; | ||
|
|
||
| import chatReducer from './features/chat/chatSlice'; | ||
|
|
||
| const persistConfig = { | ||
| key: 'root', | ||
| storage: localStorage as WebStorage, | ||
| }; | ||
|
|
||
| const reducers = combineReducers({ | ||
| chat: chatReducer, | ||
| }); | ||
|
|
||
| const persistedReducer: typeof reducers = persistReducer(persistConfig, reducers); | ||
| const store = configureStore({ | ||
| reducer: persistedReducer, | ||
| middleware: (getDefaultMiddleware) => | ||
| getDefaultMiddleware({ | ||
| serializableCheck: { | ||
| ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], | ||
| }, | ||
| }), | ||
| }); | ||
|
|
||
| export const initializeWrappedStore = () => wrapStore(store); | ||
|
|
||
| export const persistor = persistStore(store); | ||
|
|
||
| export type RootState = ReturnType<typeof store.getState>; | ||
| export type AppDispatch = typeof store.dispatch; | ||
| export type AppThunk<ReturnType = void> = ThunkAction< | ||
| ReturnType, | ||
| RootState, | ||
| unknown, | ||
| Action<string> | ||
| >; | ||
|
|
||
| export default store; |
There was a problem hiding this comment.
ブラウザ拡張機能でReduxを使うための処理です。
メインの方で使っているZustandは当該のライブラリが存在しなかったので、拡張機能はReduxを利用しています。
| export default defineConfig({ | ||
| // @see https://github.com/crxjs/chrome-extension-tools/issues/696 | ||
| server: { | ||
| port: 5174, |
There was a problem hiding this comment.
メインと衝突しないようにportを変えています。
Comment on lines
+49
to
+53
| <React.StrictMode> | ||
| <Provider store={proxyStore}> | ||
| <Content /> | ||
| </Provider> | ||
| </React.StrictMode>, |
There was a problem hiding this comment.
この部分がブラウジング中のWebページに埋め込まれます。
Comment on lines
+38
to
+39
| const tw = twind(config, sheet); | ||
| observe(tw, shadowRoot); |
There was a problem hiding this comment.
Tailwindをブラウジング中のWebページに埋め込むことができないので、twindという仕組みを使ってRawなStyleに変換して埋め込むようにしています。
Comment on lines
+44
to
+51
| <iframe | ||
| ref={iframe} | ||
| className={twMerge( | ||
| 'fixed z-[9999999999999] right-0 top-0 h-dvh shadow-xl border-1 bg-aws-squid-ink transition-all', | ||
| isOpenChat ? 'xl:w-1/3 lg:2/5 md:w-2/5 sm:w-2/3' : 'w-0', | ||
| )} | ||
| src={Browser.runtime.getURL('pages/chat/index.html')} | ||
| /> |
There was a problem hiding this comment.
右側に表示されるDrawer的な画面はiframeを利用しています。
iframeを利用することで、CSSやJSを自由に使うことができます。
iframeを利用しない場合は、外部のCSSファイルをimportできないため、amplify ui のauthenticatorのスタイリングがでいないという問題がありました。
tbrand
reviewed
Apr 19, 2024
browser-extension/src/manifest.ts
Outdated
| const manifest = defineManifest(async (env) => ({ | ||
| manifest_version: 3, | ||
| name: `${env.mode === 'development' ? '[Dev] ' : ''}generative-ai-use-cases-jp 拡張機能`, | ||
| description: 'generative-ai-use-case-jp をブラウザ拡張機能として利用できます。', |
docs/EXTENSION_BUILD.md
Outdated
|
|
||
| 事前準備ができたら、以下の手順でビルドを行なってください。 | ||
|
|
||
| 以降の手順は、**必ず `generative-ai-use-case-jp` のルートフォルダで実行してください。`generative-ai-use-case-jp/browser-extension` ではありませんのでご注意ください。** |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue #, if available:
close #448
Description of changes:
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.