Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fluidicml/browser-plugin
Workflow automation plugin.
https://github.com/fluidicml/browser-plugin
browser chrome firefox radix-ui react typescript wxt
Last synced: 25 days ago
JSON representation
Workflow automation plugin.
- Host: GitHub
- URL: https://github.com/fluidicml/browser-plugin
- Owner: FluidicML
- License: mit
- Created: 2024-07-25T19:23:27.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T20:47:29.000Z (3 months ago)
- Last Synced: 2024-10-13T06:41:45.656Z (25 days ago)
- Topics: browser, chrome, firefox, radix-ui, react, typescript, wxt
- Language: TypeScript
- Homepage: https://www.fluidicml.com
- Size: 502 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Browser Plugin
**Note**: This project is currently in alpha and prone to breaking changes.
## Overview
This project is a browser extension for creating web-based automations on the
fly. Capture different actions automatically for later replay or create
fine-tuned steps in an intuitive, no-code way.
## Building
Because this project is still early on, we have not released it on the various
extension platforms. Load the extension manually instead. Use
[pnpm](https://pnpm.io/) to build the project and manage dependencies. Install
and run the following:
```bash
$ pnpm install
$ pnpm build
```
This will produce a `dist/chrome-mv3` directory containing the unpacked
extension. Navigate to `Chrome > Manage Extensions > Load unpacked` and select
this directory. Consider pinning the newly installed extension.
## Usage
The side panel contains four top-level tabs. We touch on each in turn.
### Builder
This is the primary workhorse of the application. Here you can provide a
sequence of steps that can be replayed automatically later on. As of now, we
have the following steps available:
---
*Extracting*
Triggering this step converts your cursor to a crosshair and shows outlines
around elements you hover over. On each click, the plugin will record which
element you targeted. Name each capture you perform in this way for
interpolating into subsequent steps.
---
*Navigating*
Very simply navigates to the specified URL. You can use interpolated values in
the required field. For example, you can specify a URL like:
```
https://github.com/{PROFILE}
```
if you have a `PROFILE` interpolation available to you.
---
*OpenAI*
Allows sending a custom chat completion request to
[OpenAI](https://openai.com/). The response is always formatted as a JSON
object, though you are free to specify what the keys of the object are. These
key/value pairs will be available for interpolating into subsequent steps.
Furthermore, you can use any interpolated values already available in both the
system and user prompt.
---
*Recording*
Allows interacting with the webpage as normal, but captures clicks and key
presses automatically.
---
### Library
A repository of all previously saved scripts. From here you can edit, delete,
or execute (i.e. *run*) the script.
### Runner
After running a script from your library, this tab will populate with details
on each step as they execute. It will also surface any errors encountered
during.
### Settings
One particular step available in the builder tab is the `OpenAI` step. This
sends a custom chat completion request to [OpenAI](https://openai.com/), but
requires an API key. You can configure the API key from here.
## Development
We use the [WXT](https://wxt.dev/) framework to give room for cross-platform
functionality, though efforts are currently focused on Chrome and
Chromium-based browsers. As such, organization of files mirror WXT's
recommendations:
* `assets`
* A collection of [Tailwind](https://tailwindcss.com/) layers.
* `components/ui`
* We use the [shadcn/ui](https://ui.shadcn.com/) component framework. If
looking to contribute, confirm any custom components do not have functional
equivalents already available. A list of available components can be found
[here](https://ui.shadcn.com/docs/components/).
* `components/icons`
* SVG wrapped within a React component.
* `entrypoints/background.ts`
* Corresponds to our service worker.
* `entrypoints/*.content`
* Our content scripts. Fluidic works by injecting three different scripts into
every page. The scripts themselves do not do meaningful work unless certain
actions are invoked from the side panel.
* `entrypoints/sidepanel`
* The primary entrypoint of the project. Contains most UI elements and
recording/replaying functionality.
* `public`
* Browser extension icons.
* `utils`
* A collection of utility functions/types that can be useful across entrypoints.
### Formatting
Formatting depends on [prettier](https://prettier.io/). A `pre-commit` hook is
included in `.githooks` that can be used to format all `*.jsx?` and `*.tsx?`
files prior to commit. Install via:
```bash
$ git config --local core.hooksPath .githooks/
```