Skip to content

Commit

Permalink
Added example of inline anchor with insertPosition
Browse files Browse the repository at this point in the history
  • Loading branch information
dvvolynkin committed Mar 6, 2024
1 parent 53f56fe commit d4713f2
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 0 deletions.
25 changes: 25 additions & 0 deletions src/pages/framework/content-scripts-ui/life-cycle.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,17 @@ export const getInlineAnchor: PlasmoGetInlineAnchor = async () =>
document.querySelector("#pricing")
```

To specify single inline anchor with insert position:

```ts
import type { PlasmoGetInlineAnchor } from "plasmo"

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
element: document.querySelector("#pricing"),
insertPosition: "afterend"
})
```

To specify a list of inline anchors, export a `getInlineAnchorList` function:

```ts
Expand All @@ -137,6 +148,20 @@ export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
document.querySelectorAll("a")
```

To specify a list of inline anchors with insert position:

```ts
import type { PlasmoGetInlineAnchorList } from "plasmo"

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
const anchors = document.querySelectorAll("a")
return Array.from(anchors).map((element) => ({
element,
insertPosition: "afterend"
}))
}
```

Check [with-content-scripts-ui/contents/plasmo-inline.tsx](https://github.com/PlasmoHQ/examples/blob/main/with-content-scripts-ui/contents/plasmo-inline.tsx) for an example.

## Root Container
Expand Down
11 changes: 11 additions & 0 deletions src/pages/quickstarts/migrate-to-plasmo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,17 @@ By returning an Element, Plasmo will mount the component adjacent to that elemen

This feature is called [Content Scripts UI](/framework/content-scripts-ui). To learn more about its API and how it works, check out the technical documentation on [its lifecycle](/framework/content-scripts-ui/life-cycle).

You can also specify the component's insert position relative to the element you're mounting it to:

```tsx filename="contents/press-me.tsx"
import type { PlasmoGetInlineAnchor } from "plasmo"

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
element: document.querySelector("#pricing"),
insertPosition: "afterend"
})
```

## Background Service Worker

In non-Plasmo projects, creating a background service worker requires specifying the `background` property in the `manifest.json` file and writing the service worker code in JavaScript:
Expand Down

0 comments on commit d4713f2

Please sign in to comment.