From 6f902cc59830c36f9403878bd5eb481cdb4c48eb Mon Sep 17 00:00:00 2001 From: Aaron Date: Wed, 13 Dec 2023 15:43:40 -0600 Subject: [PATCH] docs: Improve content script UI guide (#272) --- docs/guide/content-script-ui.md | 12 ++++++------ src/client/utils/content-script-ui.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/guide/content-script-ui.md b/docs/guide/content-script-ui.md index 980ad4d3..02ee9f3b 100644 --- a/docs/guide/content-script-ui.md +++ b/docs/guide/content-script-ui.md @@ -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 diff --git a/src/client/utils/content-script-ui.ts b/src/client/utils/content-script-ui.ts index 546d39c4..d0c8b1e1 100644 --- a/src/client/utils/content-script-ui.ts +++ b/src/client/utils/content-script-ui.ts @@ -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