feat(db): mesh data model — meshes, members, invites, audit log
- pgSchema "mesh" with 4 tables isolating the peer mesh domain - Enums: visibility, transport, tier, role - audit_log is metadata-only (E2E encryption enforced at broker/client) - Cascade on mesh delete, soft-delete via archivedAt/revokedAt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: App configuration
|
||||
description: Learn how to setup the overall settings of your extension.
|
||||
url: /docs/extension/configuration/app
|
||||
---
|
||||
|
||||
# App configuration
|
||||
|
||||
The application configuration is set at `apps/extension/src/config/app.ts`. This configuration stores some overall variables for your application.
|
||||
|
||||
This allows you to host multiple apps in the same monorepo, as every application defines its own configuration.
|
||||
|
||||
The recommendation is to **not update this directly** - instead, please define the environment variables and override the default behavior. The configuration is strongly typed so you can use it safely accross your codebase - it'll be validated at build time.
|
||||
|
||||
```ts title="apps/extension/src/config/app.ts"
|
||||
import env from "env.config";
|
||||
|
||||
export const appConfig = {
|
||||
name: env.VITE_PRODUCT_NAME,
|
||||
url: env.VITE_SITE_URL,
|
||||
locale: env.VITE_DEFAULT_LOCALE,
|
||||
theme: {
|
||||
mode: env.VITE_THEME_MODE,
|
||||
color: env.VITE_THEME_COLOR,
|
||||
},
|
||||
} as const;
|
||||
```
|
||||
|
||||
For example, to set the extension default theme color, you'd update the following variable:
|
||||
|
||||
```dotenv title=".env.local"
|
||||
VITE_THEME_COLOR="yellow"
|
||||
```
|
||||
|
||||
<Callout type="warn" title="Do NOT use process.env!">
|
||||
Do NOT use `process.env` to get the values of the variables. Variables
|
||||
accessed this way are not validated at build time, and thus the wrong variable
|
||||
can be used in production.
|
||||
</Callout>
|
||||
|
||||
## WXT config
|
||||
|
||||
To configure framework-specific settings, you can use the `wxt.config.ts` file. You can configure a lot of options there, such as [manifest](/docs/extension/configuration/manifest), [project structure](https://wxt.dev/guide/essentials/project-structure.html) or even [underlying Vite config](https://wxt.dev/guide/essentials/config/vite.html):
|
||||
|
||||
```ts title="wxt.config.ts"
|
||||
import { defineConfig } from "wxt";
|
||||
|
||||
export default defineConfig({
|
||||
srcDir: "src",
|
||||
entrypointsDir: "app",
|
||||
outDir: "build",
|
||||
modules: [],
|
||||
manifest: {
|
||||
// Put manifest changes here
|
||||
},
|
||||
vite: () => ({
|
||||
// Override config here, same as `defineConfig({ ... })`
|
||||
// inside vite.config.ts files
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
Make sure to setup it correctly, as it's the main source of config for your development, build and publishing process.
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
title: Environment variables
|
||||
description: Learn how to configure environment variables.
|
||||
url: /docs/extension/configuration/environment-variables
|
||||
---
|
||||
|
||||
# Environment variables
|
||||
|
||||
Environment variables are defined in the `.env` file in the root of the repository and in the root of the `apps/extension` package.
|
||||
|
||||
* **Shared environment variables**: Defined in the **root** `.env` file. These are shared between environments (e.g., development, staging, production) and apps (e.g., web, extension).
|
||||
* **Environment-specific variables**: Defined in `.env.development` and `.env.production` files. These are specific to the development and production environments.
|
||||
* **App-specific variables**: Defined in the app-specific directory (e.g., `apps/extension`). These are specific to the app and are not shared between apps.
|
||||
* **Bundle-specific variables**: Specific to the [bundle target](https://wxt.dev/guide/essentials/config/environment-variables.html#built-in-environment-variables) (e.g. `.env.safari`, `.env.firefox`) or [bundle tag](https://wxt.dev/guide/essentials/config/environment-variables.html#built-in-environment-variables) (e.g. `.env.testing`)
|
||||
* **Build environment variables**: Not stored in the `.env` file. Instead, they are stored in the environment variables of the CI/CD system.
|
||||
* **Secret keys**: They're not stored on the extension side, instead [they're defined on the web side.](/docs/web/configuration/environment-variables#secret-keys)
|
||||
|
||||
## Shared variables
|
||||
|
||||
Here you can add all the environment variables that are shared across all the apps.
|
||||
|
||||
To override these variables in a specific environment, please add them to the specific environment file (e.g. `.env.development`, `.env.production`).
|
||||
|
||||
```dotenv title=".env.local"
|
||||
# Shared environment variables
|
||||
|
||||
# The database URL is used to connect to your database.
|
||||
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
|
||||
|
||||
# The name of the product. This is used in various places across the apps.
|
||||
PRODUCT_NAME="TurboStarter"
|
||||
|
||||
# The url of the web app. Used mostly to link between apps.
|
||||
URL="http://localhost:3000"
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
## App-specific variables
|
||||
|
||||
Here you can add all the environment variables that are specific to the app (e.g. `apps/extension`).
|
||||
|
||||
You can also override the shared variables defined in the root `.env` file.
|
||||
|
||||
```dotenv title="apps/extension/.env.local"
|
||||
# App-specific environment variables
|
||||
|
||||
# Env variables extracted from shared to be exposed to the client in WXT (Vite) extension
|
||||
VITE_SITE_URL="${URL}"
|
||||
VITE_DEFAULT_LOCALE="${DEFAULT_LOCALE}"
|
||||
|
||||
# Theme mode and color
|
||||
VITE_THEME_MODE="system"
|
||||
VITE_THEME_COLOR="orange"
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
<Callout title="VITE_ prefix">
|
||||
To make environment variables available in the browser extension code, you need to prefix them with `VITE_`. They will be injected to the code during the build process.
|
||||
|
||||
Only environment variables prefixed with `VITE_` will be injected.
|
||||
|
||||
[Read more about Vite environment variables.](https://vite.dev/guide/env-and-mode.html#env-files)
|
||||
</Callout>
|
||||
|
||||
## Bundle-specific variables
|
||||
|
||||
WXT also provides environment variables specific to a certain [build target](https://wxt.dev/guide/essentials/config/environment-variables.html#built-in-environment-variables) or [build tag](https://wxt.dev/guide/essentials/config/environment-variables.html#built-in-environment-variables) when creating the final bundle. Given the following build command:
|
||||
|
||||
```json title="package.json"
|
||||
"scripts": {
|
||||
"build": "wxt build -b firefox --mode testing"
|
||||
}
|
||||
```
|
||||
|
||||
The following env files will be considered, ordered by priority:
|
||||
|
||||
* `.env.firefox`
|
||||
* `.env.testing`
|
||||
* `.env`
|
||||
|
||||
You shouldn't worry much about this, as TurboStarter comes with already configured build processes for all the major browsers.
|
||||
|
||||
## Build environment variables
|
||||
|
||||
To allow your extension to build properly on CI you need to define your environment variables on your CI/CD system (e.g. [Github Actions](https://docs.github.com/en/actions/learn-github-actions/environment-variables)).
|
||||
|
||||
TurboStarter comes with predefined Github Actions workflow used to build and submit your extension to the stores. It's located in `.github/workflows/publish-extension.yml` file.
|
||||
|
||||
To correctly set up the build environment variables, you need to define them under `env` section and then add them as a [secrets](http://docs.github.com/en/actions/security-for-github-actions/security-guides/using-secrets-in-github-actions) to your repository.
|
||||
|
||||
```yaml title="publish-extension.yml"
|
||||
...
|
||||
|
||||
jobs:
|
||||
extension:
|
||||
name: 🚀 Publish extension
|
||||
runs-on: ubuntu-latest
|
||||
environment: Production
|
||||
env:
|
||||
VITE_SITE_URL: ${{ secrets.SITE_URL }}
|
||||
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
We'll go through the whole process of building and publishing the extension in the [publishing guide](/docs/extension/publishing/checklist).
|
||||
|
||||
## Secret keys
|
||||
|
||||
Secret keys and sensitive information are to be **never** stored on the extension app code.
|
||||
|
||||
<Callout title="What does this mean?">
|
||||
It means that you will need to add the secret keys to the **web app, where the API is deployed.**
|
||||
|
||||
The browser extension should only communicate with the backend API, which is typically part of the web app. The web app is responsible for handling sensitive operations and storing secret keys securely.
|
||||
|
||||
[See web documentation for more details.](/docs/web/configuration/environment-variables#secret-keys)
|
||||
|
||||
This is not a TurboStarter-specific requirement, but a best practice for security for any
|
||||
application. Ultimately, it's your choice.
|
||||
</Callout>
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
title: Manifest
|
||||
description: Learn how to configure the manifest of your extension.
|
||||
url: /docs/extension/configuration/manifest
|
||||
---
|
||||
|
||||
# Manifest
|
||||
|
||||
As a requirement from web stores, every extension must have a `manifest.json` file in its root directory that lists important information about the structure and behavior of that extension.
|
||||
|
||||
It's a JSON file that contains metadata about the extension, such as its name, version, and permissions.
|
||||
|
||||
You can read more about it in the [official documentation](https://developer.chrome.com/docs/extensions/reference/manifest).
|
||||
|
||||
## Where is the `manifest.json` file?
|
||||
|
||||
WXT **abstracts away** the manifest file. The framework generates the manifest under the hood based on your source files and configurations you export from your code, similar to how Next.js abstracts page routing and SSG with the file system and page components.
|
||||
|
||||
That way, you don't have to manually create the `manifest.json` file and worry about correctly setting all the fields.
|
||||
|
||||
Most of the common properties are taken from the `package.json` and `wxt.config.ts` files:
|
||||
|
||||
| Manifest Field | Abstractions |
|
||||
| ------------------------ | ------------------------------------------------------------- |
|
||||
| icons | Auto generated with the `icon.png` in the `/assets` directory |
|
||||
| action, browser\_actions | Popup window |
|
||||
| options\_ui | Options page |
|
||||
| content\_scripts | Content scripts |
|
||||
| background | Background service worker |
|
||||
| version | set by the `version` field in `package.json` |
|
||||
| name | set by the `name` field in `wxt.config.ts` |
|
||||
| description | set by the `description` field in `wxt.config.ts` |
|
||||
| author | set by the `author` field in `wxt.config.ts` |
|
||||
| homepage\_url | set by the `homepage` field in `wxt.config.ts` |
|
||||
|
||||
WXT build process centralizes common metadata and resolves any static file references (such as popup, background, content scripts, and so on) automatically.
|
||||
|
||||
This enables you to focus on the metadata that matters, such as name, description, OAuth, and so on.
|
||||
|
||||
## Overriding manifest
|
||||
|
||||
Sometimes, you want to override the default manifest fields (e.g. because you need to add a new permission that is required for your extension to work).
|
||||
|
||||
You'll need to modify your project's `wxt.config.ts` like so:
|
||||
|
||||
```ts title="apps/extension/wxt.config.ts"
|
||||
export default defineConfig({
|
||||
manifest: {
|
||||
permissions: ["activeTab"],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Then, your settings will be merged with the settings auto-generated by WXT.
|
||||
|
||||
### Environment variables
|
||||
|
||||
You can use environment variables inside the manifest overrides:
|
||||
|
||||
```ts title="apps/extension/wxt.config.ts"
|
||||
export default defineConfig({
|
||||
manifest: {
|
||||
browser_specific_settings: {
|
||||
gecko: {
|
||||
id: import.meta.env.VITE_FIREFOX_EXT_ID,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
If the environment variable could not be found, the field will be removed completely from the manifest.
|
||||
|
||||
### Locales
|
||||
|
||||
TurboStarter extension supports [extension localization](https://developer.chrome.com/docs/extensions/reference/api/i18n) out-of-the-box. You can customize e.g. your extension's name and description based on the language of the user's browser.
|
||||
|
||||
Locales are defined in the `/public/_locales` directory. The directory should contain a `messages.json` file for each language you want to support (e.g. `/public/_locales/en/messages.json` and `/public/_locales/es/messages.json`).
|
||||
|
||||
By default, the first locale alphabetically available is used as default. However, you can specify a `default_locale` in your manifest like so:
|
||||
|
||||
```ts title="apps/extension/wxt.config.ts"
|
||||
export default defineConfig({
|
||||
manifest: {
|
||||
default_locale: "en",
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
To reference a locale string inside your manifest overrides, wrap the key inside `__MSG_<key>__`:
|
||||
|
||||
```ts title="apps/extension/wxt.config.ts"
|
||||
export default defineConfig({
|
||||
manifest: {
|
||||
name: "__MSG_extensionName__",
|
||||
description: "__MSG_extensionDescription__",
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Apart of this, we also configure [in-extension internationalization](/docs/extension/internationalization) out-of-the-box to easily translate your components and views.
|
||||
|
||||
<Cards>
|
||||
<Card title="Manifest file format" href="https://developer.chrome.com/docs/extensions/reference/manifest" description="developer.chrome.com" />
|
||||
|
||||
<Card title="WXT Manifest" href="https://wxt.dev/guide/essentials/config/manifest.html" description="wxt.dev" />
|
||||
|
||||
<Card title="chrome.i18n" href="https://developer.chrome.com/docs/extensions/reference/api/i18n" description="developer.chrome.com" />
|
||||
|
||||
<Card title="WXT i18n" href="https://wxt.dev/guide/essentials/i18n.html" description="wxt.dev" />
|
||||
</Cards>
|
||||
Reference in New Issue
Block a user