oleks/wxt
1
0
Fork 0
Code Issues Pull Requests Actions 112 Packages Projects Releases Wiki Activity

docs: Improve content script UI guide (#272)

Browse Source
This commit is contained in:
Aaron
2023-12-13 15:43:40 -06:00
committed by GitHub
parent fde488ac82
commit 6f902cc598
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/content-script-ui.md
+6 -6
View File
@@ -14,9 +14,9 @@ Each has their own set of advantages and disadvantages.
## Integrated
Integrated content script UIs use the page's CSS to inject a UI that looks like it's apart of the page.
Integrated content script UIs are injected alongside the content of a page. This means that they are affected by CSS on that page.
WXT doesn't provide any utils for mounting integrated UIs yet. Here are some examples for setting up integrated UIs.
You can control how CSS is injected for an integrated content script UI with the [`cssInjectionMode`](/api/wxt/interfaces/ContentScriptDefinition#cssinjectionmode) property.
:::code-group
@@ -147,14 +147,14 @@ export default defineContentScript({
## ShadowRoot
Often in web extensions, you don't want your content script's CSS effecting the page, or vise-versa. The [`ShadowRoot` API](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) is ideal for this. It isolates an element's style from the page's style.
Often in web extensions, you don't want your content script's CSS affecting the page, or vise-versa. The [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) API is ideal for this.
WXT provides a helper function, [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi), that abstracts all the `ShadowRoot` setup away, making it easy to create UIs with isolated styles.
WXT provides a helper function, [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi), that abstracts all the `ShadowRoot` setup away, making it easy to create UIs with isolated CSS.
To use `createContentScriptUi`, follow these steps:
1. Import your CSS file at the top of your content script
2. Set `cssInjectionMode: "ui"` inside `defineContentScript`
2. Set [`cssInjectionMode: "ui"`](/api/wxt/interfaces/ContentScriptDefinition#cssinjectionmode) inside `defineContentScript`
3. Define your UI with `createContentScriptUi()`
4. Mount the UI so it is visible to users
@@ -194,7 +194,7 @@ See the [API Reference](/api/wxt/client/functions/createContentScriptUi) for the
`createContentScriptUi` supports TailwindCSS out of the box! When importing the styles, just import the main CSS file containing the `@tailwind` directives, and everything will just work :+1:.
:::
When using a frontend framework for your UI, you'll need to unmount the app when the UI is removed. When defining the UI, return an app reference from the `mount` option and pass in a custom `onRemoved` option:
When using a frontend framework for your UI, you'll need to unmount the app when the UI is removed. This is accomplished by returning an app reference from the `mount` option and by passing in a custom `onRemoved` option:
:::code-group
src/client/utils/content-script-ui.ts
+1 -1
View File
@@ -86,7 +86,7 @@ export interface ContentScriptModalPositioningOptions {
/**
* Choose between `"inline"`, `"overlay"`, or `"modal" `types.
*
* ![Visualization of different types](https://wxt.dev/content-script-ui-types.png)
* ![Visualization of different types](https://wxt.dev/content-script-ui-type.png)
*/
export type ContentScriptPositioningOptions =
| ContentScriptInlinePositioningOptions