docs: Add output paths to entrypoint docs
This commit is contained in:
Aaron Klinker
@@ -0,0 +1,40 @@
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
patterns: Array<[intput: string, output: string]>;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table class="no-vertical-dividers">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Input Pattern</th>
|
||||
<th></th>
|
||||
<th>Output Path</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="pattern of patterns">
|
||||
<td style="white-space: nowrap">
|
||||
<code>entrypoints/{{ pattern[0] }}</code>
|
||||
</td>
|
||||
<td style="padding: 6px; opacity: 50%">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
|
||||
/>
|
||||
</svg>
|
||||
</td>
|
||||
<td style="white-space: nowrap">
|
||||
<code>/{{ pattern[1] }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
@@ -61,6 +61,7 @@ export default defineConfig({
|
||||
{ text: 'Options', link: '/guide/options.md' },
|
||||
{ text: 'Popup', link: '/guide/popup.md' },
|
||||
{ text: 'Sandbox', link: '/guide/sandbox.md' },
|
||||
{ text: 'Sidepanel', link: '/guide/sidepanel.md' },
|
||||
{ text: 'Unlisted Pages', link: '/guide/unlisted-pages.md' },
|
||||
{ text: 'Unlisted Scripts', link: '/guide/unlisted-scripts.md' },
|
||||
],
|
||||
|
||||
@@ -48,3 +48,11 @@
|
||||
--vp-code-copy-code-bg: #212321;
|
||||
--vp-code-copy-code-hover-bg: #292d29;
|
||||
}
|
||||
|
||||
.vp-doc .no-vertical-dividers th,
|
||||
.vp-doc .no-vertical-dividers td {
|
||||
border: none;
|
||||
}
|
||||
.vp-doc .no-vertical-dividers tr {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import DefaultTheme from 'vitepress/theme';
|
||||
import Icon from '../components/Icon.vue';
|
||||
import EntrypointPatterns from '../components/EntrypointPatterns.vue';
|
||||
import './custom.css';
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp(ctx) {
|
||||
ctx.app.component('Icon', Icon);
|
||||
ctx.app.component('EntrypointPatterns', EntrypointPatterns);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -6,7 +6,11 @@ For MV2, the background is added as a script to the background page. For MV3, th
|
||||
|
||||
## Filenames
|
||||
|
||||
`entrypoints/background.ts` is the only recoginzed filename for the background script.
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['background.ts', 'background.js'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/bookmarks.html`
|
||||
- `entrypoints/bookmarks/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['bookmarks.html', 'bookmarks.html'],
|
||||
['bookmarks/index.html', 'bookmarks.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -2,14 +2,18 @@
|
||||
|
||||
[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) • [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)
|
||||
|
||||
When creating content script entrypoints, they are automatically included in the `manifest.json` along with any CSS they import.
|
||||
|
||||
## Filenames
|
||||
|
||||
When a filename matches the pattern below, it is added as a content script in the `manifest.json`.
|
||||
|
||||
- `entrypoints/content.tsx?`
|
||||
- `entrypoints/<name>.content.tsx?`
|
||||
- `entrypoints/content/index.tsx?`
|
||||
- `entrypoints/<name>.content/index.tsx?`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['content.tsx?', 'content-scripts/content.js'],
|
||||
['content/index.tsx?', 'content-scripts/content.js'],
|
||||
['<name>.content.tsx?', 'content-scripts/<name>.js'],
|
||||
['<name>.content/index.tsx?', 'content-scripts/<name>.js'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
+10
-7
@@ -10,13 +10,16 @@ If the recommended approach doesn't work for your use case, you can use any of t
|
||||
|
||||
## Filenames
|
||||
|
||||
When a filename matches the pattern below, WXT will transform it and output it with the rest of your extension.
|
||||
|
||||
- `entrypoints/content.(css|scss|sass|less|styl|stylus)`
|
||||
- `entrypoints/<name>.(css|scss|sass|less|styl|stylus)`
|
||||
- `entrypoints/<name>/index.(css|scss|sass|less|styl|stylus)`
|
||||
- `entrypoints/<name>.content.(css|scss|sass|less|styl|stylus)`
|
||||
- `entrypoints/<name>.content/index.(css|scss|sass|less|styl|stylus)`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['<name>.(css|scss|sass|less|styl|stylus)', '<name>.css'],
|
||||
['<name>/index.(css|scss|sass|less|styl|stylus)', '<name>.css'],
|
||||
['content.(css|scss|sass|less|styl|stylus)', 'content-scripts/content.css'],
|
||||
['content/index.(css|scss|sass|less|styl|stylus)', 'content-scripts/content.css'],
|
||||
['<name>.content.(css|scss|sass|less|styl|stylus)', 'content-scripts/<name>.css'],
|
||||
['<name>.content/index.(css|scss|sass|less|styl|stylus)', 'content-scripts/<name>.css'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/devtools.html`
|
||||
- `entrypoints/devtools/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['devtools.html', 'devtools.html'],
|
||||
['devtools/index.html', 'devtools.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/history.html`
|
||||
- `entrypoints/history/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['history.html', 'history.html'],
|
||||
['history/index.html', 'history.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/newtab.html`
|
||||
- `entrypoints/newtab/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['newtab.html', 'newtab.html'],
|
||||
['newtab/index.html', 'newtab.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -4,8 +4,12 @@
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/options.html`
|
||||
- `entrypoints/options/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['options.html', 'options.html'],
|
||||
['options/index.html', 'options.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
+6
-2
@@ -4,8 +4,12 @@
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/popup.html`
|
||||
- `entrypoints/popup/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['popup.html', 'popup.html'],
|
||||
['popup/index.html', 'popup.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -8,10 +8,14 @@ Firefox does not support sandboxed pages.
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/sandbox.html`
|
||||
- `entrypoints/<name>.sandbox.html`
|
||||
- `entrypoints/sandbox/index.html`
|
||||
- `entrypoints/<name>.sandbox/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['entrypoints/sandbox.html', 'sandbox.html'],
|
||||
['entrypoints/sandbox/index.html', 'sandbox.html'],
|
||||
['entrypoints/<name>.sandbox.html', '<name>.html` '],
|
||||
['entrypoints/<name>.sandbox/index.html', '<name>.html` '],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -8,10 +8,14 @@ Firefox does not support sandboxed pages.
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/sidepanel.html`
|
||||
- `entrypoints/<name>.sidepanel.html`
|
||||
- `entrypoints/sidepanel/index.html`
|
||||
- `entrypoints/<name>.sidepanel/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['entrypoints/sidepanel.html', 'sidepanel.html'],
|
||||
['entrypoints/sidepanel/index.html', 'sidepanel.html'],
|
||||
['entrypoints/<name>.sidepanel.html', '<name>.html` '],
|
||||
['entrypoints/<name>.sidepanel/index.html', '<name>.html` '],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
|
||||
@@ -12,8 +12,12 @@ HTML pages that are built by Vite, but are not included in the manifest.
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/<name>.html`
|
||||
- `entrypoints/<name>/index.html`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['<name>.html', '<name>.html'],
|
||||
['<name>/index.html', '<name>.html'],
|
||||
]"
|
||||
/>
|
||||
|
||||
Pages are accessible at `'/<name>.html'`:
|
||||
|
||||
|
||||
@@ -4,12 +4,16 @@ TypeScript files that are built, but are not included in the manifest.
|
||||
|
||||
## Filenames
|
||||
|
||||
- `entrypoints/<name>.tsx?`
|
||||
- `entrypoints/<name>/index.tsx?`
|
||||
<EntrypointPatterns
|
||||
:patterns="[
|
||||
['<name>.tsx?', '<name>.js'],
|
||||
['<name>/index.tsx?', '<name>.js'],
|
||||
]"
|
||||
/>
|
||||
|
||||
## Definition
|
||||
|
||||
Unlike the background and content scripts, you can define this script's logic in the main scope.
|
||||
Unlike the background or content scripts, you can define this script's logic in the top level scope.
|
||||
|
||||
```ts
|
||||
// Code goes here
|
||||
|
||||
Reference in New Issue
Block a user