Skip to content

Commit

Permalink
feat: content scripts
Browse files Browse the repository at this point in the history
  • Loading branch information
Bartek532 committed Nov 19, 2024
1 parent 9a3d960 commit b39ffce
Show file tree
Hide file tree
Showing 24 changed files with 449 additions and 94 deletions.
25 changes: 13 additions & 12 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ Description of the project files and directories.
├── .github/ # Github related files (workflows, templates)
├── .husky/ # Husky config
├── .vscode/ # VSCode settings (extensions, settings)
├── assets/ # Static assets (fonts, images, svgs, etc.)
├── src/ # Source code for the extension
│ ├── app/ # Entry files for each part of the extension (background, popup, options, etc.)
│ ├── assets/ # Static assets (fonts, images, svgs, etc.)
│ ├── components/ # Shared components
│ ├── lib/ # Utility functions and third-party libraries
│ ├── styles/ # Global styles
│ ├── public/ # Public assets (fonts, locales, etc.)
│ ├── types/ # TypeScript types
│ └── typings/ # Custom type definitions
├── .cursorrules # Cursor rules
Expand All @@ -33,24 +33,24 @@ Description of the project files and directories.
├── bun.lockb # Bun lockfile
├── commitlint.config.ts # Config for CommitLint - to enforce commit consistency
├── components.json # shadcn/ui configuration
├── keys.template.json # Publishing API keys template
├── package.json # Dependencies and additional informations about the project
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript config
├── wxt.config.ts # WXT configuration
```

### `/app`

Extro ships with the following extension pages preconfigured:

- `background` - [background service worker](https://docs.plasmo.com/framework/background-service-worker)
- `contents` - [content scripts](https://docs.plasmo.com/framework/content-scripts) that run in the context of web pages
- `devtools` - [devtools](https://docs.plasmo.com/framework/devtools) page with custom panels
- `newtab` - [new tab](https://docs.plasmo.com/framework/newtab) page
- `options` - [options](https://docs.plasmo.com/framework/options) page
- `popup` - [popup](https://docs.plasmo.com/framework/popup) window
- `sidepanel` - [side panel](https://docs.plasmo.com/framework/sidepanel)
- `tabs` - [tabs](https://docs.plasmo.com/framework/tabs) pages (custom pages delivered with the extension)
- `background` - [background service worker](https://wxt.dev/guide/essentials/entrypoints.html#background)
- `content` - [content scripts](https://wxt.dev/guide/essentials/content-scripts.html) that run in the context of web pages
- `devtools` - [devtools](https://wxt.dev/guide/essentials/entrypoints.html#devtools) page with custom panels
- `newtab` - [new tab](https://wxt.dev/guide/essentials/entrypoints.html#newtab) page
- `options` - [options](https://wxt.dev/guide/essentials/entrypoints.html#options) page
- `popup` - [popup](https://wxt.dev/guide/essentials/entrypoints.html#popup) window
- `sidepanel` - [side panel](https://wxt.dev/guide/essentials/entrypoints.html#side-panel)
- `tabs` - [unlisted](https://wxt.dev/guide/essentials/entrypoints.html#unlisted-pages) pages (custom pages delivered with the extension)

## Styleguide

Expand Down Expand Up @@ -95,12 +95,13 @@ Component.displayName = "Component";
| ---------------------------------------------- | ----------------------------------------------------------------------------- |
| [TypeScript](https://www.typescriptlang.org/) | Static type-checking programming language |
| [React](https://reactjs.org/) | Library for building user interfaces |
| [Plasmo](https://www.plasmo.com/) | Next.js for browser extensions |
| [WXT](https://wxt.dev/) | Next-gen Web Extension Framework |
| [Supabase](https://supabase.com/) | Open source Firebase alternative |
| [shadcn/ui](https://ui.shadcn.com/) | Extendable component library |
| [Tailwind](https://tailwindcss.com/) | Utility-first CSS framework |
| [OpenPanel](https://openpanel.dev/) | Open source analytics |
| [React Hook Form](https://react-hook-form.com) | Forms with easy-to-use validation |
| [Vite](https://vitejs.dev/) | Next generation frontend tool |
| [Bun](https://bun.sh/) | Package manager and build tool |
| [Husky](https://github.com/typicode/husky) | Git hooks |
| [Biome](https://biomejs.dev/) | Linting and formatting |
29 changes: 15 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@

- 🔒 Full type-safety with Typescript
- 📄 All pages (background, popup, options etc.)
- 📜 Content scripts
- 📜 Content scripts (UI)
- 🔐 Authentication (OAuth)
- 💾 Storage
- 💬 Messaging
Expand All @@ -77,12 +77,13 @@
| ---------------------------------------------- | ----------------------------------------------------------------------------- |
| [TypeScript](https://www.typescriptlang.org/) | Static type-checking programming language |
| [React](https://reactjs.org/) | Library for building user interfaces |
| [Plasmo](https://www.plasmo.com/) | Next.js for browser extensions |
| [WXT](https://wxt.dev/) | Next-gen Web Extension Framework |
| [Supabase](https://supabase.com/) | Open source Firebase alternative |
| [shadcn/ui](https://ui.shadcn.com/) | Extendable component library |
| [Tailwind](https://tailwindcss.com/) | Utility-first CSS framework |
| [OpenPanel](https://openpanel.dev/) | Open source analytics |
| [React Hook Form](https://react-hook-form.com) | Forms with easy-to-use validation |
| [Vite](https://vitejs.dev/) | Next generation frontend tool |
| [Bun](https://bun.sh/) | Package manager and build tool |
| [Husky](https://github.com/typicode/husky) | Git hooks |
| [Biome](https://biomejs.dev/) | Linting and formatting |
Expand Down Expand Up @@ -130,7 +131,7 @@ bun dev:chrome
2. Open Chrome and go to `chrome://extensions`
3. Check `Developer mode`
4. Click `Load unpacked`
5. Select the `build/chrome-mv3-dev` directory at root
5. Select the `build/chrome-mv3` directory at root

#### Firefox

Expand All @@ -142,7 +143,7 @@ bun dev:firefox

2. Open Firefox and go to `about:debugging#/runtime/this-firefox`
3. Click `Load Temporary Add-on...`
4. Select the `build/firefox-mv2-dev/manifest.json` file at root
4. Select the `build/firefox-mv2/manifest.json` file at root

> [!NOTE]
> In Firefox you're adding a plugin in _temporary_ mode - that means it'll disappear after you close the browser.
Expand All @@ -156,22 +157,22 @@ bun dev:firefox

#### CI/CD

1. Copy `keys.template.json` to `keys.json` and update the keys (check the [official token guide](https://github.com/PlasmoHQ/bms/blob/main/tokens.md) to learn more about the tokens required to submit)
2. Set content of `keys.json` as [Github secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets) under `SUBMIT_KEYS` name
1. Obtain all the [required API keys](https://wxt.dev/guide/essentials/publishing.html#github-action) for your submission (check the [official token guide](https://github.com/PlasmoHQ/bms/blob/main/tokens.md) to learn more about the tokens required to submit)
2. Set your API keys as [Github secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) under appropriate names
3. Run `CI / Publish` workflow

### Pages

Extro ships with the following extension pages preconfigured:

- `background` - [background service worker](https://docs.plasmo.com/framework/background-service-worker)
- `contents` - [content scripts](https://docs.plasmo.com/framework/content-scripts) that run in the context of web pages
- `devtools` - [devtools](https://docs.plasmo.com/framework/devtools) page with custom panels
- `newtab` - [new tab](https://docs.plasmo.com/framework/newtab) page
- `options` - [options](https://docs.plasmo.com/framework/options) page
- `popup` - [popup](https://docs.plasmo.com/framework/popup) window
- `sidepanel` - [side panel](https://docs.plasmo.com/framework/sidepanel)
- `tabs` - [tabs](https://docs.plasmo.com/framework/tabs) pages (custom pages delivered with the extension)
- `background` - [background service worker](https://wxt.dev/guide/essentials/entrypoints.html#background)
- `content` - [content scripts](https://wxt.dev/guide/essentials/content-scripts.html) that run in the context of web pages
- `devtools` - [devtools](https://wxt.dev/guide/essentials/entrypoints.html#devtools) page with custom panels
- `newtab` - [new tab](https://wxt.dev/guide/essentials/entrypoints.html#newtab) page
- `options` - [options](https://wxt.dev/guide/essentials/entrypoints.html#options) page
- `popup` - [popup](https://wxt.dev/guide/essentials/entrypoints.html#popup) window
- `sidepanel` - [side panel](https://wxt.dev/guide/essentials/entrypoints.html#side-panel)
- `tabs` - [unlisted](https://wxt.dev/guide/essentials/entrypoints.html#unlisted-pages) pages (custom pages delivered with the extension)

## Community 💬 <a name="community"></a>

Expand Down
Binary file modified bun.lockb
Binary file not shown.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@supabase/supabase-js": "^2.46.1",
"@t3-oss/env-core": "0.11.1",
"@tanstack/react-query": "^5.59.16",
"@webext-core/messaging": "^2.1.0",
"ai": "^3.4.32",
"chrome-ai": "^1.11.1",
"class-variance-authority": "^0.7.0",
Expand All @@ -41,6 +42,7 @@
"react": "18.3.1",
"react-dom": "18.3.1",
"react-hook-form": "^7.53.1",
"react-router-dom": "^6.28.0",
"sonner": "^1.5.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
Expand Down
7 changes: 7 additions & 0 deletions src/app/background/index.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import { StorageKey, getStorage } from "@/lib/storage";
import { defineBackground } from "wxt/sandbox";
import { Message, onMessage } from "~/lib/messaging";

const main = () => {
console.log(
"Background service worker is running! Edit `src/app/background` and save to reload.",
);
};

onMessage(Message.USER, () => {
const storage = getStorage(StorageKey.USER);
return storage.getValue();
});

export default defineBackground(main);
45 changes: 45 additions & 0 deletions src/app/content/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Button } from "@/components/ui/button";
import ReactDOM from "react-dom/client";
import { browser } from "wxt/browser";
import { createShadowRootUi } from "wxt/client";
import { defineContentScript } from "wxt/sandbox";

import "~/assets/styles/globals.css";

const ContentScriptUI = () => {
return (
<Button onClick={() => alert("This is injected UI!")}>
{browser.i18n.getMessage("contentScriptUI")}
</Button>
);
};

export default defineContentScript({
matches: ["<all_urls>"],
cssInjectionMode: "ui",

async main(ctx) {
console.log(
"Content script is running! Edit `src/app/content` and save to reload.",
);

const ui = await createShadowRootUi(ctx, {
name: "extro-ui",
position: "overlay",
anchor: "body",
onMount: (container) => {
const app = document.createElement("div");
container.append(app);

const root = ReactDOM.createRoot(app);
root.render(<ContentScriptUI />);
return root;
},
onRemove: (root) => {
root?.unmount();
},
});

ui.mount();
},
});
2 changes: 1 addition & 1 deletion src/app/newtab/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Layout } from "~/components/layout/layout";

const NewTab = () => {
return (
<Layout className="p-8">
<Layout>
<Main filename="app/newtab" />
</Layout>
);
Expand Down
2 changes: 1 addition & 1 deletion src/app/options/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Layout } from "~/components/layout/layout";

const Options = () => {
return (
<Layout className="p-8">
<Layout>
<Main filename="app/options" />
</Layout>
);
Expand Down
2 changes: 1 addition & 1 deletion src/app/sidepanel/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Layout } from "~/components/layout/layout";

const SidePanel = () => {
return (
<Layout className="p-8">
<Layout>
<Main filename="app/sidepanel" />
</Layout>
);
Expand Down
Loading

0 comments on commit b39ffce

Please sign in to comment.