Extension integration #240
Conversation
| @@ -12,6 +12,7 @@ on: | |||
| - 'core/test/**' | |||
| - 'loader-tests/**' | |||
| - '.devcontainer/**' | |||
| - 'extensions/**' | |||
There was a problem hiding this comment.
We try to avoid calling CI without a reason.
For instance, we do not publish staging on changes irrelevant to web client.
| @@ -102,6 +102,7 @@ Slow Reader is a local-first app. Clients do most of the work, and the server ju | |||
| - See **[`web/README.md`](./web/README.md)** for web client architecture. | |||
| - [`server/`](./server/): a small server that syncs data between users’ devices. | |||
| - [`proxy/`](./proxy/): HTTP proxy server to bypass censorship or to try web clients before they install the upcoming extensions (to bypass the CORS limit of the web apps). | |||
| - [`extension/`](./extension/): browser’s extension to avoid CORS limits in web client. | |||
There was a problem hiding this comment.
Cross-links between docs
| - Run `pnpm dev` to build the extension and watch the changes | ||
| - Open `chrome://extensions/` -> `Load unpacked` and choose `dist` folder from this repo. The extension should appear in the list of your extensions | ||
| - In the `.env` file of the main app, place the next line (`EXTENSION_ID` can be found in the `ID` line inside the uploaded extension block): | ||
| 1. Run `cd extension && pnpm start` to build the extension and watch the changes. |
There was a problem hiding this comment.
For steps it is better to use <ol>
extension/README.md
Outdated
|
|
||
| `VITE_EXTENSION_ID=<EXTENSION_ID>` | ||
| ``` |
There was a problem hiding this comment.
We can do nested code blocks in lists in Markdown
| } | ||
|
|
||
| export type ExtensionMessage = | ||
| | { data: string; type: 'fetched' } |
There was a problem hiding this comment.
This way of typing messages is better because it tells that msg.error will be only for msg.type = 'error'
| if (message.url) { | ||
| await fetch(message.url, { | ||
| try { | ||
| let response = await fetch(message.url, { |
There was a problem hiding this comment.
By using await everywhere we are having better readability in contrast with mixing await and .then()
| @@ -0,0 +1,21 @@ | |||
| import { defineManifest } from '@crxjs/vite-plugin' | |||
|
|
|||
| const URL = | |||
There was a problem hiding this comment.
We can use function instead of static JSON file for manifest
|
|
||
| export default defineConfig({ | ||
| build: { | ||
| outDir |
There was a problem hiding this comment.
You do not need to specify outDir since dist is the default value
| @@ -5,3 +5,4 @@ packages: | |||
| - web | |||
| - proxy | |||
| - loader-tests | |||
| - extension | |||
There was a problem hiding this comment.
pnpm has great monorepo support (when you have multiple package.json in dirs).
By having pnpm-workspace.yaml you can specify project’s folders and they all will have common pnpm-lock.yaml.
| }, | ||
| "keywords": [], | ||
| "author": "[email protected]", |
There was a problem hiding this comment.
You do not need this keys on private: true
Integrate extension into the project code style