chore(release): v0.13.2

Co-authored-by: Aaron <aaronklinker1@gmail.com>

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## v0.13.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.13.1...v0.13.2)
+
+### 🚀 Enhancements
+
+- Add `isolateEvents` option to `createContentScripUi` ([#313](https://github.com/wxt-dev/wxt/pull/313))
+
+### 📖 Documentation
+
+- Remove duplicate `entrypoints/` path ([76e63e2](https://github.com/wxt-dev/wxt/commit/76e63e2))
+- Update unlisted pages/scripts description ([c99a281](https://github.com/wxt-dev/wxt/commit/c99a281))
+- Update content script entrypoint docs ([1360eb7](https://github.com/wxt-dev/wxt/commit/1360eb7))
+- Add example for setting up custom panels/panes in devtools ([#308](https://github.com/wxt-dev/wxt/pull/308))
+- Use example tags to automate relevant example lists ([#311](https://github.com/wxt-dev/wxt/pull/311))
+
+### 🏡 Chore
+
+- Update templates to `^0.13.0` ([#309](https://github.com/wxt-dev/wxt/pull/309))
+- Upgrade template dependencies ([#310](https://github.com/wxt-dev/wxt/pull/310))
+- Re-enable coverage ([#312](https://github.com/wxt-dev/wxt/pull/312))
+
+### ❤️ Contributors
+
+- 冯不游
+
 ## v0.13.1
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.13.0...v0.13.1)

README.md

@@ -9,9 +9,8 @@
   <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048"></a>
   <span> </span>
   <a href="https://github.com/wxt-dev/wxt/blob/main/LICENSE" target="_blank"><img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048"></a>
-  <!-- Hide code coverage while it's broken -->
-  <!-- <span> </span>
-  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a> -->
+  <span> </span>
+  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a>
 </p>
 
 <p align="center">

docs/.vitepress/components/ExampleList.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue';
+
+const props = defineProps<{
+  tag?: string;
+}>();
+
+const examples = ref();
+onMounted(async () => {
+  const res = await fetch(
+    'https://raw.githubusercontent.com/wxt-dev/wxt-examples/main/examples.json',
+  );
+  examples.value = await res.json();
+});
+
+const filteredExamples = computed(() => {
+  if (props.tag == null) return examples.value;
+
+  return examples.value.filter((example) => {
+    return example.tags?.includes(props.tag);
+  });
+});
+</script>
+
+<template>
+  <ul>
+    <li v-if="examples == null">Loading...</li>
+    <template v-else>
+      <li v-for="example of filteredExamples">
+        <a :href="example.url" target="_blank">{{ example.name }}</a>
+      </li>
+    </template>
+  </ul>
+</template>

docs/.vitepress/components/UsingWxtSection.vue

@@ -5,6 +5,10 @@ import useListExtensionDetails, {
 } from '../composables/useListExtensionDetails';
 
 // Add extension IDs here. Order doesn't matter, will be sorted by weekly active users
+// During the transition from chrome.google.com/webstore to
+// chromewebstore.google.com, queue.wxt.dev might return null for your
+// extension. If it does, use "<slug>/<id>" instead of just the ID. The slug
+// can be retrieved from the URL of the item on chromewebstore.google.com
 const chromeExtensionIds = [
   'ocfdgncpifmegplaglcnglhioflaimkd', // GitHub: Better Line Counts
   'mgmdkjcljneegjfajchedjpdhbadklcf', // Anime Skip Player
@@ -12,6 +16,7 @@ const chromeExtensionIds = [
   'elfaihghhjjoknimpccccmkioofjjfkf', // StayFree - Website Blocker & Web Analytics
   'okifoaikfmpfcamplcfjkpdnhfodpkil', // Doozy: Ai Made Easy
   'lknmjhcajhfbbglglccadlfdjbaiifig', // tl;dv - Record, Transcribe & ChatGPT for Google Meet
+  'youtube中文配音/oglffgiaiekgeicdgkdlnlkhliajdlja', // Youtube中文配音
 ];
 
 const { data } = useListExtensionDetails(chromeExtensionIds);
@@ -24,6 +29,7 @@ const sortedExtensions = computed(() => {
       // Sort based on the user count weighted by the rating
       sortKey: ((item.rating ?? 5) / 5) * item.weeklyActiveUsers,
     }))
+    .filter((item) => !!item)
     .sort((l, r) => r.sortKey - l.sortKey);
 });
 

docs/.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import Icon from '../components/Icon.vue';
 import EntrypointPatterns from '../components/EntrypointPatterns.vue';
 import UsingWxtSection from '../components/UsingWxtSection.vue';
+import ExampleList from '../components/ExampleList.vue';
 import './custom.css';
 
 export default {
@@ -10,5 +11,6 @@ export default {
     ctx.app.component('Icon', Icon);
     ctx.app.component('EntrypointPatterns', EntrypointPatterns);
     ctx.app.component('UsingWxtSection', UsingWxtSection);
+    ctx.app.component('ExampleList', ExampleList);
   },
 };

docs/entrypoints/content-scripts.md

@@ -20,7 +20,7 @@ When creating content script entrypoints, they are automatically included in the
 ```ts
 export default defineContentScript({
   // Set manifest options
-  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+  matches: string[],
   excludeMatches: undefined | [],
   includeGlobs: undefined | [],
   excludeGlobs: undefined | [],
@@ -90,7 +90,7 @@ To include CSS with your content script, import the CSS file at the top of your
 
 ```
 
-<srcDir>
+<srcDir>/
 └─ entrypoints/
    └─ overlay.content/
       ├─ index.ts
@@ -137,3 +137,5 @@ export default defineContentScript({
   },
 });
 ```
+
+See [Content Script UI](/guide/content-script-ui) for more info on creating UIs and including CSS in content scripts.

docs/entrypoints/devtools.md

@@ -13,15 +13,12 @@
 
 ## Definition
 
-Plain old HTML file.
-
 ```html
 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
     <!-- Set include/exclude if the page should be removed from some builds -->
     <meta name="manifest.include" content="['chrome', ...]" />
     <meta name="manifest.exclude" content="['chrome', ...]" />
@@ -31,3 +28,13 @@ Plain old HTML file.
   </body>
 </html>
 ```
+
+## Adding UI Elements
+
+Chrome extensions allow you to add panels and side panes to the devtools window.
+
+![DevTools window showing Elements panel and Styles sidebar pane.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd_1920.png)
+
+See the WXT's examples for a full walkthrough of extending the devtools window:
+
+<ExampleList tag="devtools" />

docs/entrypoints/sandbox.md

@@ -10,10 +10,10 @@ Firefox does not support sandboxed pages.
 
 <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` '],
+    ['sandbox.html', 'sandbox.html'],
+    ['sandbox/index.html', 'sandbox.html'],
+    ['<name>.sandbox.html', '<name>.html` '],
+    ['<name>.sandbox/index.html', '<name>.html` '],
   ]"
 />
 

docs/entrypoints/sidepanel.md

@@ -10,10 +10,10 @@ Chrome added support for sidepanels in Manifest V3, they are not available in Ma
 
 <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` '],
+    ['sidepanel.html', 'sidepanel.html'],
+    ['sidepanel/index.html', 'sidepanel.html'],
+    ['<name>.sidepanel.html', '<name>.html` '],
+    ['<name>.sidepanel/index.html', '<name>.html` '],
   ]"
 />
 

docs/entrypoints/unlisted-pages.md

@@ -1,6 +1,6 @@
 # Unlisted Pages
 
-HTML pages that are built by Vite, but are not included in the manifest.
+HTML pages that are bundled and shipped with the extension, but are not included in the manifest.
 
 ### Examples
 

docs/entrypoints/unlisted-scripts.md

@@ -1,6 +1,6 @@
 # Unlisted Scripts
 
-TypeScript files that are built, but are not included in the manifest.
+TypeScript files that are bundled and shipped with the extension, but are not included in the manifest.
 
 You are responsible for loading/running these scripts where needed.
 

docs/examples.md

@@ -2,26 +2,6 @@
 
 Simple walkthroughs to accomplish common tasks or patterns with WXT.
 
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-
-const examples = ref()
-onMounted(async () => {
-    const res = await fetch("https://raw.githubusercontent.com/wxt-dev/wxt-examples/main/examples.json");
-    examples.value = await res.json();
-})
-
-</script>
-
-<ul>
-    <li v-if="examples == null">
-        Loading...
-    </li>
-    <template v-else>
-        <li v-for="example of examples">
-        <a :href="example.url" target="_blank">{{ example.name }}</a>
-        </li>
-    </template>
-</ul>
+<ExampleList />
 
 > Full code available at [`wxt-dev/wxt-examples`](https://github.com/wxt-dev/wxt-examples)

docs/guide/content-script-ui.md

@@ -6,11 +6,11 @@ There are three ways to mount a UI inside a content script:
 
 Each has their own set of advantages and disadvantages.
 
-| Method     | Isolated Styles | HMR | Use page's context |
-| ---------- | :-------------: | :-: | :----------------: |
-| Integrated |       ❌        | ❌  |         ✅         |
-| ShadowRoot |       ✅        | ❌  |         ✅         |
-| IFrame     |       ✅        | ✅  |         ❌         |
+| Method     | Isolated Styles |   Isolated Events   | HMR | Use page's context |
+| ---------- | :-------------: | :-----------------: | :-: | :----------------: |
+| Integrated |       ❌        |         ❌          | ❌  |         ✅         |
+| ShadowRoot |       ✅        | ✅ (off by default) | ❌  |         ✅         |
+| IFrame     |       ✅        |         ✅          | ✅  |         ❌         |
 
 ## Integrated
 
@@ -149,7 +149,7 @@ export default defineContentScript({
 
 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 CSS.
+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. It also supports an optional `isolateEvents` parameter to further isolate user interactions.
 
 To use `createContentScriptUi`, follow these steps:
 

docs/guide/manifest.md

@@ -122,5 +122,4 @@ export default defineConfig({
 
 See the official localization examples for more details:
 
-- [I18n](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-i18n#readme)
-- [Vue I18n](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vue-i18n#readme)
+<ExampleList tag="i18n" />

docs/guide/testing.md

@@ -6,9 +6,7 @@ WXT officially supports [Vitest](https://vitest.dev/) for unit tests and either
 
 For details setting up each testing framework, see the official examples:
 
-- [Vitest example](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-vitest#readme)
-- [Playwright example](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-playwright#readme)
-- [Puppeteer example](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-puppeteer#readme)
+<ExampleList tag="testing" />
 
 ### Unofficial Frameworks
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -93,7 +93,7 @@
     "compile:wxt": "tsc --noEmit",
     "compile:virtual": "tsc --noEmit -p src/virtual",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest run --coverage.enabled \"--coverage.include=src/**\" \"--coverage.exclude=src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\"",
     "prepare": "simple-git-hooks",
     "prepublish": "pnpm -s build",
     "docs:gen": "typedoc --options docs/typedoc.json",
@@ -105,7 +105,7 @@
   "dependencies": {
     "@types/webextension-polyfill": "^0.10.5",
     "@webext-core/fake-browser": "^1.3.1",
-    "@webext-core/isolated-element": "^1.0.4",
+    "@webext-core/isolated-element": "^1.1.1",
     "@webext-core/match-patterns": "^1.0.3",
     "async-mutex": "^0.4.0",
     "c12": "^1.5.1",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^1.3.1
         version: 1.3.1
       '@webext-core/isolated-element':
-        specifier: ^1.0.4
-        version: 1.0.4
+        specifier: ^1.1.1
+        version: 1.1.1
       '@webext-core/match-patterns':
         specifier: ^1.0.3
         version: 1.0.3
@@ -1413,8 +1413,8 @@ packages:
       lodash.merge: 4.6.2
     dev: false
 
-  /@webext-core/isolated-element@1.0.4:
-    resolution: {integrity: sha512-jbkG+7b6Ty4fNo2o53rokCTkNRinI/0tneJSyuUCJfPzAFtyylF3IxH/WhXykXC+1Ca8ouQnjbEcpYt9IFNcUg==}
+  /@webext-core/isolated-element@1.1.1:
+    resolution: {integrity: sha512-kn5OURB8FaEB0oSZdf1jc1PyohWXbWQbdhXfAS2d3AxxkP8HlYfhB75fhZJ3GceZvFf8in4bZNJbOvcArSFxCg==}
     dev: false
 
   /@webext-core/match-patterns@1.0.3:

src/client/content-scripts/__tests__/content-script-ui.test.ts

@@ -5,6 +5,7 @@ import { ContentScriptContext } from '~/client/content-scripts/content-script-co
 import { createIsolatedElement } from '@webext-core/isolated-element';
 import { mock } from 'vitest-mock-extended';
 import { browser } from '~/browser';
+import { faker } from '@faker-js/faker';
 
 vi.mock('@webext-core/isolated-element', async () => {
   const { vi } = await import('vitest');
@@ -332,4 +333,26 @@ describe('createContentScriptUi', () => {
       expect(document.querySelector('test-app')).toBeDefined();
     });
   });
+
+  it('should forward isolateEvents into createIsolatedElement', async () => {
+    const isolateEvents = faker.helpers.arrayElement([
+      undefined,
+      true,
+      false,
+      ['click', 'keydown'],
+    ]);
+    await createContentScriptUi(createCtx(), {
+      name: 'test-app',
+      type: 'inline',
+      mount: testApp,
+      isolateEvents,
+    });
+
+    expect(createIsolatedElementMock).toBeCalledTimes(1);
+    expect(createIsolatedElementMock).toBeCalledWith(
+      expect.objectContaining({
+        isolateEvents,
+      }),
+    );
+  });
 });

src/client/content-scripts/content-script-ui.ts

@@ -10,8 +10,8 @@ import {
 } from '../utils/content-script-ui';
 
 /**
- * Utility for mounting content script UI's with isolated styles. Automatically removed from the DOM
- * when the content script's context is invalidated.
+ * Utility for mounting content script UI's with isolated styles and controlled event bubbling.
+ * Automatically removed from the DOM when the content script's context is invalidated.
  *
  * See https://wxt.dev/guide/content-script-ui.html for full documentation.
  *
@@ -31,7 +31,7 @@ import {
  *         const app = document.createElement("div");
  *         app.textContent = "Content Script UI";
  *         container.append(app);
- *       }
+ *       },
  *     })
  *     ui.mount();
  *   }
@@ -56,6 +56,7 @@ export async function createContentScriptUi<TApp>(
       textContent: css.join('\n').trim(),
     },
     mode: 'open',
+    isolateEvents: options.isolateEvents,
   });
 
   let mounted: TApp;
@@ -170,4 +171,13 @@ export type ContentScriptUiOptions<TApp> = ContentScriptPositioningOptions &
      * See https://wxt.dev/guide/content-script-ui.html for more info.
      */
     css?: string;
+    /**
+     * When enabled, `event.stopPropagation` will be called on events trying to bubble out of the
+     * shadow root.
+     *
+     * - Set to `true` to stop the propagation of a default set of events,
+     *   `["keyup", "keydown", "keypress"]`
+     * - Set to an array of event names to stop the propagation of a custom list of events
+     */
+    isolateEvents?: boolean | string[];
   };

templates/react/package.json

@@ -19,10 +19,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
-    "typescript": "^5.3.2",
-    "wxt": "^0.12.0"
+    "typescript": "^5.3.3",
+    "wxt": "^0.13.0"
   }
 }

templates/solid/package.json

@@ -15,11 +15,11 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "solid-js": "^1.7.8"
+    "solid-js": "^1.8.7"
   },
   "devDependencies": {
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "vite-plugin-solid": "^2.8.0",
-    "wxt": "^0.12.0"
+    "wxt": "^0.13.0"
   }
 }

templates/svelte/package.json

@@ -14,12 +14,12 @@
     "postinstall": "wxt prepare"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@tsconfig/svelte": "^5.0.0",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.6",
-    "tslib": "^2.6.0",
-    "typescript": "^5.3.2",
-    "wxt": "^0.12.0"
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "wxt": "^0.13.0"
   }
 }

templates/vanilla/package.json

@@ -15,7 +15,7 @@
     "postinstall": "wxt prepare"
   },
   "devDependencies": {
-    "typescript": "^5.3.2",
-    "wxt": "^0.12.0"
+    "typescript": "^5.3.3",
+    "wxt": "^0.13.0"
   }
 }

templates/vue/package.json

@@ -15,12 +15,12 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.1",
-    "typescript": "^5.3.2",
-    "vue-tsc": "^1.8.25",
-    "wxt": "^0.12.0"
+    "@vitejs/plugin-vue": "^5.0.1",
+    "typescript": "^5.3.3",
+    "vue-tsc": "^1.8.27",
+    "wxt": "^0.13.0"
   }
 }