{"id":14984228,"url":"https://github.com/fluidicml/browser-plugin","last_synced_at":"2026-01-25T18:31:47.204Z","repository":{"id":254009347,"uuid":"833801862","full_name":"FluidicML/browser-plugin","owner":"FluidicML","description":"Workflow automation plugin.","archived":false,"fork":false,"pushed_at":"2024-08-20T20:47:29.000Z","size":514,"stargazers_count":1,"open_issues_count":17,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-03T07:36:27.610Z","etag":null,"topics":["browser","chrome","firefox","radix-ui","react","typescript","wxt"],"latest_commit_sha":null,"homepage":"https://www.fluidicml.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FluidicML.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-25T19:23:27.000Z","updated_at":"2024-12-26T21:30:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"f05d4c8d-8339-493b-9526-5a0f7514b066","html_url":"https://github.com/FluidicML/browser-plugin","commit_stats":{"total_commits":146,"total_committers":2,"mean_commits":73.0,"dds":"0.013698630136986356","last_synced_commit":"8d575ee0fc1dbcb13663bd3429142d1d9f709b81"},"previous_names":["fluidicml/browser-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FluidicML%2Fbrowser-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FluidicML%2Fbrowser-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FluidicML%2Fbrowser-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FluidicML%2Fbrowser-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FluidicML","download_url":"https://codeload.github.com/FluidicML/browser-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239384388,"owners_count":19629507,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","chrome","firefox","radix-ui","react","typescript","wxt"],"created_at":"2024-09-24T14:08:40.253Z","updated_at":"2025-11-02T06:30:32.145Z","avatar_url":"https://github.com/FluidicML.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browser Plugin\n\n![chromium](https://img.shields.io/badge/supported-chromium-blue)\n![chrome](https://img.shields.io/badge/supported-chrome-blue)\n![firefox](https://img.shields.io/badge/pending-firefox-orange)\n![safari](https://img.shields.io/badge/pending-safari-orange)\n![edge](https://img.shields.io/badge/pending-edge-orange)\n\n**Note**: This project is currently in alpha and prone to breaking changes.\n\n## Overview\n\nThis project is a browser extension for creating web-based automations on the\nfly. Capture different actions automatically for later replay or create\nfine-tuned steps in an intuitive, no-code way.\n\n## Building\n\nBecause this project is still early on, we have not released it on the various\nextension platforms. Load the extension manually instead. Use\n[pnpm](https://pnpm.io/) to build the project and manage dependencies. Install\nand run the following:\n\n```bash\n$ pnpm install\n$ pnpm build\n```\n\nThis will produce a `dist/chrome-mv3` directory containing the unpacked\nextension. Navigate to `Chrome \u003e Manage Extensions \u003e Load unpacked` and select\nthis directory. Consider pinning the newly installed extension.\n\n## Usage\n\nThe side panel contains four top-level tabs. We touch on each in turn.\n\n### Builder\n\n![Screenshot from 2024-08-02 18-49-18](https://github.com/user-attachments/assets/4206bb0d-3ad0-4011-b9d3-f1912168f5ee)\n\nThis is the primary workhorse of the application. Here you can provide a\nsequence of steps that can be replayed automatically later on. As of now, we\nhave the following steps available:\n\n---\n\n*Extracting*\n\n![Screenshot from 2024-08-02 18-45-48](https://github.com/user-attachments/assets/f1f149c7-077e-4d29-bbc1-e5d562b46fc8)\n\nTriggering this step converts your cursor to a crosshair and shows outlines\naround elements you hover over. On each click, the plugin will record which\nelement you targeted. Name each capture you perform in this way for\ninterpolating into subsequent steps.\n\n---\n\n*Navigating*\n\n![Screenshot from 2024-08-02 18-44-57](https://github.com/user-attachments/assets/ef71f4d3-ffae-4bac-8550-6403fb16db83)\n\nVery simply navigates to the specified URL. You can use interpolated values in\nthe required field. For example, you can specify a URL like:\n\n```\nhttps://github.com/{PROFILE}\n```\n\nif you have a `PROFILE` interpolation available to you.\n\n---\n\n*OpenAI*\n\n![Screenshot from 2024-08-02 18-46-53](https://github.com/user-attachments/assets/c3394c3a-ae2c-4539-8aea-46295a71172d)\n\nAllows sending a custom chat completion request to\n[OpenAI](https://openai.com/). The response is always formatted as a JSON\nobject, though you are free to specify what the keys of the object are. These\nkey/value pairs will be available for interpolating into subsequent steps.\n\nFurthermore, you can use any interpolated values already available in both the\nsystem and user prompt.\n\n---\n\n*Recording*\n\n![Screenshot from 2024-08-02 18-47-21](https://github.com/user-attachments/assets/26116954-d78f-454a-bbfb-aaa64e68aacd)\n\nAllows interacting with the webpage as normal, but captures clicks and key\npresses automatically.\n\n---\n\n### Library\n\n![Screenshot from 2024-08-02 18-48-13](https://github.com/user-attachments/assets/af06935d-5ea9-4de5-8406-4b55e100350d)\n\nA repository of all previously saved scripts. From here you can edit, delete,\nor execute (i.e. *run*) the script.\n\n### Runner\n\n![Screenshot from 2024-08-02 18-48-52](https://github.com/user-attachments/assets/f9cc2e3a-0102-4cdb-b514-e4259ff1a59b)\n\nAfter running a script from your library, this tab will populate with details\non each step as they execute. It will also surface any errors encountered\nduring.\n\n### Settings\n\n![Screenshot from 2024-08-02 18-49-51](https://github.com/user-attachments/assets/d405f663-e8d3-4288-9f1d-a8964dc4b057)\n\nOne particular step available in the builder tab is the `OpenAI` step. This\nsends a custom chat completion request to [OpenAI](https://openai.com/), but\nrequires an API key. You can configure the API key from here.\n\n## Development\n\nWe use the [WXT](https://wxt.dev/) framework to give room for cross-platform\nfunctionality, though efforts are currently focused on Chrome and\nChromium-based browsers. As such, organization of files mirror WXT's\nrecommendations:\n\n* `assets`\n  * A collection of [Tailwind](https://tailwindcss.com/) layers.\n* `components/ui`\n  * We use the [shadcn/ui](https://ui.shadcn.com/) component framework. If\n    looking to contribute, confirm any custom components do not have functional\n    equivalents already available. A list of available components can be found\n    [here](https://ui.shadcn.com/docs/components/).\n* `components/icons`\n  * SVG wrapped within a React component.\n* `entrypoints/background.ts`\n  * Corresponds to our service worker.\n* `entrypoints/*.content`\n  * Our content scripts. Fluidic works by injecting three different scripts into\n    every page. The scripts themselves do not do meaningful work unless certain\n    actions are invoked from the side panel.\n* `entrypoints/sidepanel`\n  * The primary entrypoint of the project. Contains most UI elements and\n    recording/replaying functionality.\n* `public`\n  * Browser extension icons.\n* `utils`\n  * A collection of utility functions/types that can be useful across entrypoints.\n\n### Formatting\n\nFormatting depends on [prettier](https://prettier.io/). A `pre-commit` hook is\nincluded in `.githooks` that can be used to format all `*.jsx?` and `*.tsx?`\nfiles prior to commit. Install via:\n```bash\n$ git config --local core.hooksPath .githooks/\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluidicml%2Fbrowser-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluidicml%2Fbrowser-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluidicml%2Fbrowser-plugin/lists"}