content script inject

[xunziheng]

For example:

I am using content script to inject scripts into the specified matching page, such as https://test.local/<ids>/edit,

but when the user visits the website, he first enters https://test.local/<ids>/view,

and then the user clicks the edit button, the URL changes to .../edit.

This is a simple change, but I observe that the content script is not injected.

It is injected only when I refresh the page manually.

How can I inject these scripts when the user enters the matching page?

Waiting for your expert advice. @aklinker1

[aklinker1]

Seems like the site you're working with is a SPA, or the website uses HTML 5 history to switch pages without a full reload. In this case, you need to load your content script for the whole site, not just the /edit path, and track the page changes yourself, deciding when to execute your logic yourself.

Thankfully, WXT provides utils for this.

export default defineContentScript({
  matches: ["*://test.local/<id>/*"],
  main(ctx) {
    const editPattern = new MatchPattern("*://test.local/<id>/edit");

    if (editPattern.matches(location)) editMain(ctx);

    ctx.addEventListener(window, "wxt:locationchange", (event) => {
      if (editPattern.matches(event.newUrl) && !editPattern.matches(event.oldUrl)) 
        editMain(ctx);
    })
  }
})

function editMain(ctx: ContentScriptContext) {
  // Your "/edit" code here
}

Wrote this on my phone by memory, so some of the APIs might be slightly wrong, misspelled, or missing curly braces. But hopefully it gives you an idea of how to accomplish this.

[aklinker1]

Letting WXT write this boilerplate would be a good feature idea. Something like spa: true... I'll think about it

[xunziheng]

sorry I tried that but not work:

(yes I am glad to see your great idea maybe like spa: true)

export default defineContentScript({
  matches: ['<all_urls>'],

  main(ctx) {
    ctx.addEventListener(document, "wxt:locationchange", (event) => {
      console.log('teststest', event)
    })
  },
});

[xunziheng]

by the way I am using [email protected]

I got a spa app, when I toggle the page, it was nothing go.

[aklinker1]

Try window instead of document:

wxt/packages/wxt-demo/src/entrypoints/location-change.content.ts

Lines 6 to 8 in 394cb1a

	ctx.addEventListener(window, 'wxt:locationchange', ({ newUrl, oldUrl }) => {
	console.log('Location changed:', newUrl.href, oldUrl.href);
	});

[xunziheng]

well done, thanks, but can you show me why?

[aklinker1]

wxt/packages/wxt/src/client/content-scripts/location-watcher.ts

Line 24 in 9fc6408

window.dispatchEvent(new WxtLocationChangeEvent(newUrl, oldUrl));

I call window.dispatchEvent, not document.dispatchEvent