From cd7e5c11b4a42b76ae3239c94fdaa6696e3aaf8a Mon Sep 17 00:00:00 2001 From: mondaychen Date: Mon, 12 Feb 2024 16:02:39 -0500 Subject: [PATCH] fix: revert README & add credits to boilerplate --- README.md | 486 ++++-------------------------------------------------- 1 file changed, 29 insertions(+), 457 deletions(-) diff --git a/README.md b/README.md index 6d8ae30..9b8963f 100755 --- a/README.md +++ b/README.md @@ -1,473 +1,45 @@ +# WebWand: Vision based Full Browser Automation πŸͺ„ -
-logo -

Chrome Extension Boilerplate with
React + Vite + TypeScript

+[Demo](https://twitter.com/mengdi_en/status/1721965940680565166) -![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black) -![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white) -![](https://badges.aleen42.com/src/vitejs.svg) -![GitHub action badge](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/actions/workflows/build-zip.yml/badge.svg) -hits +WebWand uses [GPT-4 with vision](https://platform.openai.com/docs/guides/vision) to control your browser and perform repetitive actions on your behalf. Currently it allows you to define ad-hoc instructions. In the future it will also support saved and scheduled workflows. +WebWand's current status is **research preview**. Many workflows fail or confuse the agent. If you'd like to hack on WebWand to make it better or test it on your own workflows, follow the instructions below to run it locally. -> This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite) +You will need your own [OpenAI API Key](https://platform.openai.com/account/api-keys) to use WebWand. -
+WebWand only sends data to OpenAI's API. It does not send any data to third parties. -## Table of Contents +## Installing and Running -- [Intro](#intro) -- [Features](#features) -- [Installation](#installation) - - [Procedures](#procedures) - - [Chrome](#chrome) - - [Firefox](#firefox) -- [Add Style Library](#add-style-library) - - [Twind](#twind) - - [Chakra UI](#chakra-ui) -- [Pages](#pages) -- [Screenshots](#screenshots) - - [NewTab](#newtab) - - [Popup](#popup) - - [Devtools](#devtools) -- [Examples](#examples) -- [Documents](#documents) +Currently this extension is only available through this GitHub repo. To build and install the extension locally on your machine, follow the instructions below. -## Intro +### Installing the extension -This boilerplate is made for creating chrome extensions using React and Typescript. -> The focus was on improving the build speed and development experience with Vite. +1. Ensure you have [Node.js](https://nodejs.org/). The developement was done on Node v20 but it should work with some lower versions. +2. Clone this repository +3. Run `yarn` to install the dependencies. If you haven't used yarn before, you'll need to install it first with `npm install -g yarn` +4. Run `yarn start` to build the package +5. Load your extension on Chrome by doing the following: + 1. Navigate to `chrome://extensions/` + 2. Toggle `Developer mode` + 3. Click on `Load unpacked extension` + 4. Select the `dist` folder that `yarn start` generated -## Features +### Running in your browser -- [React 18](https://reactjs.org/) -- [TypeScript](https://www.typescriptlang.org/) -- [Jest](https://jestjs.io/) -- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) -- [Vite](https://vitejs.dev/) -- [SASS](https://sass-lang.com/) -- [Prettier](https://prettier.io/) -- [ESLint](https://eslint.org/) -- [Husky](https://typicode.github.io/husky/getting-started.html#automatic-recommended) -- [Commitlint](https://commitlint.js.org/#/guides-local-setup?id=install-commitlint) -- [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) -- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/) -- HRR(Hot Rebuild & Refresh/Reload) +1. Once installed, the browser plugin will be available in two forms: + 1. As a Popup. Activate by pressing `cmd+shift+y` on mac or `ctrl+shift+y` on windows/linux, or by clicking the extension logo in your browser. + 2. As a devtools panel. Activate by first opening the browser's developer tools, then navigating to the `WebWand` panel. +2. The next thing you need to do is create or access an existing [OpenAI API Key](https://platform.openai.com/account/api-keys) and paste it in the provided box. This key will be stored securely in your browser, and will not be uploaded to a third party. +3. Finally, navigate to a webpage you want WebWand and type in the task you want it to perform. For example, if you want to search for a movie on Google, you can type `Search for the movie Oblivion`. Then press `Enter` or click `Run` to execute the task. -## Installation +## How it Works -## Procedures: +TBA -1. Clone this repository. -2. Change `name` and `description` in package.json => **Auto synchronize with manifest** -3. Install pnpm globally: `npm install -g pnpm` (check your node version >= 16.6, recommended >= 18) -4. Run `pnpm install` +## Credits -## And next, depending on the needs: +WebWand was inspired by and built on top of [TaxyAI's browser extension](https://github.com/TaxyAI/browser-extension), and reuses its UI and part of its action execution cycle code. -### For Chrome: - -1. Run: - - Dev: `pnpm dev` or `npm run dev` - - Prod: `pnpm build` or `npm run build` -2. Open in browser - `chrome://extensions` -3. Check - `Developer mode` -4. Find and Click - `Load unpacked extension` -5. Select - `dist` folder - -### For Firefox: - -1. Run: - - Dev: `pnpm dev:firefox` or `npm run dev:firefox` - - Prod: `pnpm build:firefox` or `npm run build:firefox` -2. Open in browser - `about:debugging#/runtime/this-firefox` -3. Find and Click - `Load Temporary Add-on...` -4. Select - `manifest.json` from `dist` folder - -### Remember in firefox you add plugin in temporary mode, that's mean it's disappear after close browser, you must do it again, on next launch. - -## Add Style Library - -### Twind -> The smallest, fastest, most feature complete Tailwind-in-JS solution in existence - -**1. Install the library:** - -```bash -$ pnpm install -D @twind/core @twind/preset-autoprefix @twind/preset-tailwind -``` - -**2. Create twind.config.ts in the root folder** - -
-twind.config.ts - -```ts -import { defineConfig } from '@twind/core'; -import presetTailwind from '@twind/preset-tailwind'; -import presetAutoprefix from '@twind/preset-autoprefix'; - -export default defineConfig({ - presets: [presetAutoprefix(), presetTailwind()], -}); -``` -
- -**3. Create src/shared/style/twind.ts for importing** - -
-src/shared/style/twind.ts - -```ts -import { twind, cssom, observe } from '@twind/core'; -import 'construct-style-sheets-polyfill'; -import config from '@root/twind.config'; - -export function attachTwindStyle( - observedElement: Element, - documentOrShadowRoot: T, -) { - const sheet = cssom(new CSSStyleSheet()); - const tw = twind(config, sheet); - observe(tw, observedElement); - documentOrShadowRoot.adoptedStyleSheets = [sheet.target]; -} -``` -
- -**4. You can use Tailwind in your project:** - -
-src/pages/popup/Popup.tsx - -```tsx -import { attachTwindStyle } from '@src/shared/style/twind'; - -... - attachTwindStyle(appContainer, document); - const root = createRoot(appContainer); - root.render(); -``` -
- -**5. If you want to use Twind in the content script, you need to add the following code:** - -
-src/pages/content/ui/index.tsx - -"""tsx -import { attachTwindStyle } from '@src/shared/style/twind'; - -... -attachTwindStyle(rootIntoShadow, shadowRoot); -createRoot(rootIntoShadow).render(); -""" -
- -[See more examples](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/244/) - -### Chakra UI - -**1. Install the library:** - -```bash -$ pnpm install @chakra-ui/react @emotion/cache @emotion/react -``` - -**2. You should add the code to `vite.config.ts` for [Ignore unnecessary warnings](https://github.com/TanStack/query/pull/5161#issuecomment-1506683450)** - -
-vite.config.ts - -```ts -export default defineConfig({ - build: { - rollupOptions: { - // Add below code ~~~~~ - onwarn(warning, warn) { - if ( - warning.code === "MODULE_LEVEL_DIRECTIVE" && - warning.message.includes(`"use client"`) - ) { - return; - } - warn(warning); - }, - // Add above code ~~~~ - }, - }, -}); -``` - -
- -**3. You can use Chakra UI in your project:** - -
-src/pages/popup/Popup.tsx - -```tsx -import { Button } from "@chakra-ui/react"; - -export default function Popup() { - return ; -} -``` - -
- ---- - -> if you don't want to use Chakra UI in the content script, you can skip 4,5 step. - -**4. If you want to use Chakra UI in the content script, you need to add the following code:** - -
-src/pages/content/ui/CustomChakraProvider.tsx - -```tsx -import { ReactNode, useCallback, useEffect, useState } from "react"; -import { - ColorMode, - ColorModeContext, - ColorModeScript, - CSSReset, - extendTheme, - GlobalStyle, - ThemeProvider -} from "@chakra-ui/react"; - -const theme = extendTheme(); - -const getCurrentTheme = () => { - const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; - return isDark ? "dark" : "light"; -}; - -type CustomChakraProviderProps = { - shadowRootId: string; - children: ReactNode; -}; -export default function CustomChakraProvider({ children, shadowRootId }: CustomChakraProviderProps) { - const [colorMode, setColorMode] = useState(getCurrentTheme()); - - useEffect(() => { - const darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); - const onChangeColorSchema = (event: MediaQueryListEvent) => { - const isDark = event.matches; - setColorMode(isDark ? "dark" : "light"); - }; - - darkThemeMediaQuery.addEventListener("change", onChangeColorSchema); - - return () => { - darkThemeMediaQuery.removeEventListener("change", onChangeColorSchema); - }; - }, []); - - const toggleColorMode = useCallback(() => { - setColorMode(prev => (prev === "dark" ? "light" : "dark")); - }, []); - - return ( - - - - - - {children} - - - ); -} -``` - -
-
-src/pages/content/ui/EmotionCacheProvider.tsx - -```tsx -import createCache from '@emotion/cache'; -import { CacheProvider, type EmotionCache } from '@emotion/react'; -import { ReactNode, useEffect, useState } from 'react'; - -export default function EmotionCacheProvider({ children, rootId }: { rootId: string; children: ReactNode }) { - const [emotionCache, setEmotionCache] = useState(null); - - useEffect(() => { - function setEmotionStyles(shadowRoot: ShadowRoot) { - setEmotionCache( - createCache({ - key: rootId, - container: shadowRoot, - }), - ); - } - - const root = document.getElementById(rootId); - if (root && root.shadowRoot) { - setEmotionStyles(root.shadowRoot); - } - }, []); - - return emotionCache ? {children} : null; -} -``` - -
- -**5. Fix the `src/pages/content/index.tsx` file:** - -
-src/pages/content/index.tsx - -```tsx -import CustomChakraProvider from '@pages/content/ui/CustomChakraProvider'; -import EmotionCacheProvider from '@pages/content/ui/EmotionCacheProvider'; - -// ... - -createRoot(rootIntoShadow).render( - // Add Providers - - - - - , -); - -``` - -
- - -## Pages - -### New Tab - -[Override Chrome pages](https://developer.chrome.com/docs/extensions/mv3/override/)
`chrome_url_overrides.newtab` in manifest.json - -### Popup - -[Browser actions](https://developer.chrome.com/docs/extensions/reference/browserAction/)
`action.default_pupup` in manifest.json - -### Devtools - -[Devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/#creating)
`devtools_page` in manifest.json - -### Background - -[Background](https://developer.chrome.com/docs/extensions/mv3/background_pages/)
`background.service_worker` in manifest.json - -### ContentScript - -[Content Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)
`content_scripts[0]` in manifest.json - -### Options - -[Options](https://developer.chrome.com/docs/extensions/mv3/options/)
`options_page` in manifest.json - -### SidePanel (Chrome 144+) - -[SidePanel](https://developer.chrome.com/docs/extensions/reference/sidePanel/)
`side_panel.default_path` in manifest.json - - -## Screenshots - -### New Tab - -newtab - -### Popup - -| Black | White | -|--------|--------| -| black | white | - -### Devtools - -devtools - -## Examples - -- https://github.com/Jonghakseo/drag-gpt-extension -- https://github.com/Jonghakseo/pr-commit-noti -- https://github.com/ariburaco/chatgpt-file-uploader-extended - -## Documents - -- [Vite Plugin](https://vitejs.dev/guide/api-plugin.html) -- [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/) -- [Rollup](https://rollupjs.org/guide/en/) -- [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin) - -## Star History - -[![Star History Chart](https://api.star-history.com/svg?repos=Jonghakseo/chrome-extension-boilerplate-react-vite&type=Date)](https://star-history.com/#Jonghakseo/chrome-extension-boilerplate-react-vite&Date) - -## Contributors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
JunyWuuuu91
JunyWuuuu91
πŸ’»		dim0147
dim0147
πŸ›		jon lepage
jon lepage
πŸ›		LironH
LironH
πŸ€”		Spencer Chang
Spencer Chang
πŸ›		deld123
deld123
πŸ›		Michal Hantl
Michal Hantl
πŸ€” πŸ›
Jordan Burgess
Jordan Burgess
πŸ€”		NAMEUN CHO
NAMEUN CHO
πŸ›		Andrew Mudrov
Andrew Mudrov
πŸ’¬		Shubham Lad
Shubham Lad
πŸ›		hanrong
hanrong
πŸ›		Florian KΓΆnig
Florian KΓΆnig
πŸ’¬		Tran Phong
Tran Phong
πŸ›
tonychandesign
tonychandesign
πŸ›		Ihor Makarchuk
Ihor Makarchuk
πŸ›		hugoobauer
hugoobauer
πŸ›		Karan Singh
Karan Singh
πŸ€”		remusris
remusris
πŸ€”		hegel_dark
hegel_dark
πŸ€”		Jingsi
Jingsi
πŸ› πŸ’»
Chris Ozgo
Chris Ozgo
πŸ›		Cong
Cong
πŸ›		PatrykKuniczak
PatrykKuniczak
πŸ€” πŸ’» πŸ“–		Hector Parra
Hector Parra
πŸ›		JeongHyeon Kim
JeongHyeon Kim
πŸš‡		Terminels
Terminels
πŸ’»		WonkyDD
WonkyDD
πŸ’» πŸ›
wangxy
wangxy
πŸ›		Rasul
Rasul
πŸ“–
- - - - - - ---- - -## Thanks To - -| [Jetbrains](https://jb.gg/OpenSourceSupport) | [Jackson Hong](https://www.linkedin.com/in/j-acks0n/) | -|--------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------| -| JetBrains Logo (Main) logo. | Jackson Hong | - ---- - -[Jonghakseo](https://nookpi.tistory.com/) +The Chrome extension set-up leveraged an awesome boilerplate project [Jonghakseo/chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite).