connect to the ui comtent items to example.com

Author: fkatsuhiro

packages/wxt-demo/src/entrypoints/automount.content/index.ts

@@ -2,14 +2,14 @@ import 'uno.css';
 import './style.css';
 
 export default defineContentScript({
-  matches: ['https://*.duckduckgo.com/*'],
+  matches: ['https://example.com/*'],
   cssInjectionMode: 'manifest',
 
   async main(ctx) {
     const dynamicUI = createIntegratedUi(ctx, {
       position: 'inline',
       append: 'after',
-      anchor: 'form[role=search]',
+      anchor: 'div',
       onMount: (container) => {
         const app = document.createElement('div');
         container.id = 'automount-anchor';
@@ -54,7 +54,7 @@ export default defineContentScript({
     const stopAutoMountButton = createIntegratedUi(ctx, {
       position: 'inline',
       append: 'last',
-      anchor: 'form[role=search]',
+      anchor: 'div',
       onMount: (container) => {
         const app = document.createElement('button');
         container.classList.add('flex', 'flex-justify-center');

packages/wxt-demo/src/entrypoints/automount.content/style.css

@@ -1,3 +1,3 @@
 :root {
-  color-scheme: dark;
+  color-scheme: light;
 }

packages/wxt-demo/src/entrypoints/ui.content/index.ts

@@ -3,7 +3,7 @@ import './style.css';
 import manualStyle from './manual-style.css?inline';
 
 export default defineContentScript({
-  matches: ['https://*.duckduckgo.com/*'],
+  matches: ['https://example.com/*'],
   cssInjectionMode: 'ui',
 
   async main(ctx) {
@@ -15,7 +15,7 @@ export default defineContentScript({
       name: 'demo-ui',
       position: 'inline',
       append: 'before',
-      anchor: 'form[role=search]',
+      anchor: 'div',
       onMount: (container) => {
         const app = document.createElement('div');
         app.classList.add('m-4', 'text-red-500');

packages/wxt-demo/src/entrypoints/ui.content/manual-style.css

@@ -1,4 +1,4 @@
 body {
   padding: 2rem;
-  background-color: blanchedalmond;
+  background-color: white;
 }