Skip to content

Commit 878f7f9

Browse files
aehardingaeharding
committed
fix: remove data-wxt-* attributes
Resolves #1912
1 parent bb67910 commit 878f7f9

File tree

4 files changed

+46
-68
lines changed

4 files changed

+46
-68
lines changed

‎packages/wxt/src/utils/content-script-ui/__tests__/index.test.ts‎

Lines changed: 46 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,7 @@ describe('Content Script UIs', () => {
6363
});
6464
ui.mount();
6565

66-
expect(
67-
document.querySelector('div[data-wxt-integrated]'),
68-
).not.toBeNull();
66+
expect(document.body.children).toContain(ui.wrapper);
6967
expect(document.querySelector('app')).not.toBeNull();
7068
});
7169

@@ -77,9 +75,7 @@ describe('Content Script UIs', () => {
7775
});
7876
ui.mount();
7977

80-
expect(
81-
document.querySelector('pre[data-wxt-integrated]'),
82-
).not.toBeNull();
78+
expect(document.querySelector('pre')).toBe(ui.wrapper);
8379
expect(document.querySelector('app')).not.toBeNull();
8480
});
8581
});
@@ -92,7 +88,7 @@ describe('Content Script UIs', () => {
9288
});
9389
ui.mount();
9490

95-
expect(document.querySelector('div[data-wxt-iframe]')).toBeDefined();
91+
expect(document.body.children).toContain(ui.wrapper);
9692
expect(document.querySelector('iframe')).toBeDefined();
9793
});
9894
});
@@ -108,9 +104,7 @@ describe('Content Script UIs', () => {
108104
});
109105
ui.mount();
110106

111-
expect(
112-
document.querySelector('test-component[data-wxt-shadow-root]'),
113-
).not.toBeNull();
107+
expect(document.querySelector('test-component')).toBe(ui.shadowHost);
114108
expect(ui.shadow.querySelector('app')).not.toBeNull();
115109
});
116110

@@ -143,7 +137,7 @@ describe('Content Script UIs', () => {
143137
});
144138

145139
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
146-
`"<div data-wxt-iframe=""><iframe src="chrome-extension://test-extension-id/page.html"></iframe></div>"`,
140+
`"<div><iframe src="chrome-extension://test-extension-id/page.html"></iframe></div>"`,
147141
);
148142
});
149143
});
@@ -157,7 +151,7 @@ describe('Content Script UIs', () => {
157151
ui.mount();
158152

159153
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
160-
`"<div data-wxt-iframe="" style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; top: 0px; left: 0px;"></iframe></div>"`,
154+
`"<div style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; top: 0px; left: 0px;"></iframe></div>"`,
161155
);
162156
});
163157

@@ -170,7 +164,7 @@ describe('Content Script UIs', () => {
170164
ui.mount();
171165

172166
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
173-
`"<div data-wxt-iframe="" style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; top: 0px; left: 0px;"></iframe></div>"`,
167+
`"<div style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; top: 0px; left: 0px;"></iframe></div>"`,
174168
);
175169
});
176170

@@ -183,7 +177,7 @@ describe('Content Script UIs', () => {
183177
ui.mount();
184178

185179
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
186-
`"<div data-wxt-iframe="" style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; top: 0px; right: 0px;"></iframe></div>"`,
180+
`"<div style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; top: 0px; right: 0px;"></iframe></div>"`,
187181
);
188182
});
189183

@@ -196,7 +190,7 @@ describe('Content Script UIs', () => {
196190
ui.mount();
197191

198192
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
199-
`"<div data-wxt-iframe="" style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; bottom: 0px; right: 0px;"></iframe></div>"`,
193+
`"<div style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; bottom: 0px; right: 0px;"></iframe></div>"`,
200194
);
201195
});
202196

@@ -209,7 +203,7 @@ describe('Content Script UIs', () => {
209203
ui.mount();
210204

211205
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
212-
`"<div data-wxt-iframe="" style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; bottom: 0px; left: 0px;"></iframe></div>"`,
206+
`"<div style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: absolute; bottom: 0px; left: 0px;"></iframe></div>"`,
213207
);
214208
});
215209

@@ -235,7 +229,7 @@ describe('Content Script UIs', () => {
235229
ui.mount();
236230

237231
expect(ui.wrapper.outerHTML).toMatchInlineSnapshot(
238-
`"<div data-wxt-iframe="" style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px;"></iframe></div>"`,
232+
`"<div style="overflow: visible; position: relative; width: 0px; height: 0px; display: block;"><iframe src="chrome-extension://test-extension-id/page.html" style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px;"></iframe></div>"`,
239233
);
240234
});
241235

@@ -262,9 +256,7 @@ describe('Content Script UIs', () => {
262256
});
263257
ui.mount();
264258

265-
expect(
266-
document.querySelector('body > div[data-wxt-integrated]'),
267-
).not.toBeNull();
259+
expect(document.body.children).toContain(ui.wrapper);
268260
});
269261
});
270262

@@ -277,9 +269,9 @@ describe('Content Script UIs', () => {
277269
});
278270
ui.mount();
279271

280-
expect(
281-
document.querySelector('#parent > div[data-wxt-integrated]'),
282-
).not.toBeNull();
272+
expect(document.querySelector('#parent')!.children).toContain(
273+
ui.wrapper,
274+
);
283275
});
284276

285277
it('should append the element using an XPath string', () => {
@@ -295,9 +287,7 @@ describe('Content Script UIs', () => {
295287
});
296288
ui.mount();
297289

298-
expect(
299-
document.querySelector('#three > div[data-wxt-integrated]'),
300-
).not.toBeNull();
290+
expect(document.querySelector('#three')!.children[0]).toBe(ui.wrapper);
301291
});
302292
});
303293

@@ -310,9 +300,9 @@ describe('Content Script UIs', () => {
310300
});
311301
ui.mount();
312302

313-
expect(
314-
document.querySelector('#parent > div[data-wxt-integrated]'),
315-
).not.toBeNull();
303+
expect(document.querySelector('#parent')!.children).toContain(
304+
ui.wrapper,
305+
);
316306
});
317307
});
318308

@@ -325,9 +315,9 @@ describe('Content Script UIs', () => {
325315
});
326316
ui.mount();
327317

328-
expect(
329-
document.querySelector('#parent > div[data-wxt-integrated]'),
330-
).not.toBeNull();
318+
expect(document.querySelector('#parent')!.children).toContain(
319+
ui.wrapper,
320+
);
331321
});
332322
});
333323

@@ -354,9 +344,7 @@ describe('Content Script UIs', () => {
354344
ui.mount();
355345

356346
expect(
357-
document.querySelector(
358-
'#parent > div[data-wxt-integrated]:last-child',
359-
),
347+
document.querySelector('#parent')!.lastElementChild,
360348
).not.toBeNull();
361349
});
362350
});
@@ -372,9 +360,7 @@ describe('Content Script UIs', () => {
372360
ui.mount();
373361

374362
expect(
375-
document.querySelector(
376-
'#parent > div[data-wxt-integrated]:first-child',
377-
),
363+
document.querySelector('#parent')!.children[0].firstElementChild,
378364
).not.toBeNull();
379365
});
380366
});
@@ -389,9 +375,7 @@ describe('Content Script UIs', () => {
389375
});
390376
ui.mount();
391377

392-
expect(
393-
document.querySelector('body > div[data-wxt-integrated]'),
394-
).not.toBeNull();
378+
expect(document.body.children).toContain(ui.wrapper);
395379
expect(document.querySelector('#parent')).toBeNull();
396380
});
397381
});
@@ -406,11 +390,9 @@ describe('Content Script UIs', () => {
406390
});
407391
ui.mount();
408392

409-
expect(
410-
document.querySelector(
411-
'#parent > div[data-wxt-integrated]:first-child',
412-
),
413-
).not.toBeNull();
393+
expect(document.querySelector('#parent')!.firstElementChild).toBe(
394+
ui.wrapper,
395+
);
414396
});
415397
});
416398

@@ -424,11 +406,9 @@ describe('Content Script UIs', () => {
424406
});
425407
ui.mount();
426408

427-
expect(
428-
document.querySelector(
429-
'#parent > div[data-wxt-integrated]:last-child',
430-
),
431-
).not.toBeNull();
409+
expect(document.querySelector('#parent')!.lastElementChild).toBe(
410+
ui.wrapper,
411+
);
432412
});
433413
});
434414

@@ -444,9 +424,8 @@ describe('Content Script UIs', () => {
444424
});
445425
ui.mount();
446426

447-
expect(
448-
document.querySelector('body > div[data-wxt-integrated]'),
449-
).not.toBeNull();
427+
expect(document.body.children).toContain(ui.wrapper);
428+
450429
expect(document.querySelector('#parent')).toBeNull();
451430
});
452431
});
@@ -529,23 +508,29 @@ describe('Content Script UIs', () => {
529508
{
530509
name: 'integrated',
531510
createUiFunction: createIntegratedUi,
532-
uiSelector: 'div[data-wxt-integrated]',
511+
uiSelector: '[data-wrapper-name="integrated"]',
533512
},
534513
{
535514
name: 'iframe',
536515
createUiFunction: createIframeUi,
537-
uiSelector: 'div[data-wxt-iframe]',
516+
uiSelector: `[data-wrapper-name="iframe"]`,
538517
},
539518
{
540519
name: 'shadow-root',
541520
createUiFunction: createShadowRootUi,
542-
uiSelector: 'test-component[data-wxt-shadow-root]',
521+
uiSelector: 'test-component',
543522
},
544523
] as const)(
545524
'built-in UI type: $name',
546525
({ name, createUiFunction, uiSelector }) => {
526+
const onMount = vi.fn((wrapper: HTMLElement) => {
527+
if (name === 'shadow-root') return;
528+
529+
wrapper.setAttribute('data-wrapper-name', name);
530+
appendTestApp(wrapper);
531+
});
532+
547533
it('should mount if an anchor already exists at the initialization', async () => {
548-
const onMount = vi.fn(appendTestApp);
549534
ui = await createUiFunction(ctx, {
550535
position: 'inline',
551536
onMount,
@@ -555,6 +540,7 @@ describe('Content Script UIs', () => {
555540
});
556541

557542
appendTestElement({ id: DYNAMIC_CHILD_ID });
543+
558544
ui.autoMount();
559545
await runMicrotasks();
560546

@@ -564,7 +550,6 @@ describe('Content Script UIs', () => {
564550
});
565551

566552
it('should mount when an anchor is dynamically added and unmount when an anchor is removed', async () => {
567-
const onMount = vi.fn(appendTestApp);
568553
const onRemove = vi.fn();
569554
ui = await createUiFunction(ctx, {
570555
position: 'inline',
@@ -599,7 +584,6 @@ describe('Content Script UIs', () => {
599584

600585
describe('options', () => {
601586
it('should auto-mount only once mount and remove when the `once` option is true', async () => {
602-
const onMount = vi.fn(appendTestApp);
603587
const onRemove = vi.fn();
604588
ui = await createUiFunction(ctx, {
605589
position: 'inline',
@@ -644,7 +628,7 @@ describe('Content Script UIs', () => {
644628
it('should throw when anchor is set as type Element', async () => {
645629
ui = await createUiFunction(ctx, {
646630
position: 'inline',
647-
onMount: appendTestApp,
631+
onMount: onMount,
648632
anchor: document.documentElement,
649633
page: name === 'iframe' ? '/page.html' : undefined,
650634
name: 'test-component',
@@ -657,7 +641,7 @@ describe('Content Script UIs', () => {
657641
it('should throw when anchor is set as type `() => Element`', async () => {
658642
ui = await createUiFunction(ctx, {
659643
position: 'inline',
660-
onMount: appendTestApp,
644+
onMount: onMount,
661645
anchor: () => document.documentElement,
662646
page: name === 'iframe' ? '/page.html' : undefined,
663647
name: 'test-component',
@@ -670,7 +654,6 @@ describe('Content Script UIs', () => {
670654

671655
describe('StopAutoMount', () => {
672656
it('should stop auto-mounting and remove ui when `ui.remove` is called', async () => {
673-
const onMount = vi.fn(appendTestApp);
674657
const onRemove = vi.fn();
675658
ui = await createUiFunction(ctx, {
676659
position: 'inline',
@@ -705,7 +688,6 @@ describe('Content Script UIs', () => {
705688
});
706689

707690
it('should call internal StopAutoMount when `ui.remove` is called', async () => {
708-
const onMount = vi.fn(appendTestApp);
709691
const onRemove = vi.fn();
710692
const onStop = vi.fn();
711693
ui = await createUiFunction(ctx, {
@@ -723,7 +705,6 @@ describe('Content Script UIs', () => {
723705
});
724706

725707
it('should allow calling automount again after internal StopAutoMount is called', async () => {
726-
const onMount = vi.fn(appendTestApp);
727708
ui = await createUiFunction(ctx, {
728709
position: 'inline',
729710
onMount,

‎packages/wxt/src/utils/content-script-ui/iframe.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export function createIframeUi<TMounted>(
1414
options: IframeContentScriptUiOptions<TMounted>,
1515
): IframeContentScriptUi<TMounted> {
1616
const wrapper = document.createElement('div');
17-
wrapper.setAttribute('data-wxt-iframe', '');
1817
const iframe = document.createElement('iframe');
1918
// @ts-expect-error: getURL is defined per-project, but not inside the package
2019
iframe.src = browser.runtime.getURL(options.page);

‎packages/wxt/src/utils/content-script-ui/integrated.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export function createIntegratedUi<TMounted>(
1313
options: IntegratedContentScriptUiOptions<TMounted>,
1414
): IntegratedContentScriptUi<TMounted> {
1515
const wrapper = document.createElement(options.tag || 'div');
16-
wrapper.setAttribute('data-wxt-integrated', '');
1716

1817
let mounted: TMounted | undefined = undefined;
1918
const mount = () => {

‎packages/wxt/src/utils/content-script-ui/shadow-root.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export async function createShadowRootUi<TMounted>(
4848
mode: options.mode ?? 'open',
4949
isolateEvents: options.isolateEvents,
5050
});
51-
shadowHost.setAttribute('data-wxt-shadow-root', '');
5251

5352
let mounted: TMounted | undefined;
5453

0 commit comments

Comments
 (0)