Prevent browser tabs from `auto-reloading` on manual extension load or code changes

[arnab710]

Feature Request

My content script runs across <all_urls>. Currently, when I manually load my extension or update the content or background scripts, all open browser tabs automatically reload. This wasn’t an issue with the Plasmo framework.

Is your feature request related to a bug?

N/A

What are the alternatives?

A more flexible approach would be to reload only the currently active tab, rather than refreshing all tabs. If a developer needs to reload other tabs, they can manually do so as needed.

Additional context

I recently migrated my extension from Plasmo to WXT. Plasmo didn't have this reload issue. While I had an important process running in another tab, manually loading my extension caused every tab to refresh, and the ongoing process was lost. It would be helpful if we could prevent automatic reloading for all tabs. Amazing framework, by the way! 💯

[aklinker1]

This really depends on what you use your content scripts for, I don't think everyone would want this behavior changed.

If a developer needs to reload other tabs, they can manually do so as needed.

In some of my extensions, which run content scripts in *://*/*, I need all the tabs to reload immediately for the new code to run everywhere, and their UIs are minimal enough that I don't lose any state during the reloads.

While I had an important process running in another tab, manually loading my extension caused every tab to refresh, and the ongoing process was lost

What URL is this "important process" running on? Is it an HTML page that's apart of your extension? Or is it unrelated to the the extension, like watching a youtube video while you code?

In the first case, switching to *://*/* would only reload tabs with http:// and https://, not chrome-extension://. For the second, this is the main reason why WXT defaults to using a brand browser profile during development, so it doesn't effect your usual browser and processes.

I'm not opposed to adding a feature like this, but I want to make sure you've tried out the existing solutions for this problem before introducing another one.

[aklinker1]

The alternative to reloads is to use browser.scripting.executeScript to run the latest code without reloading the tabs. Main drawback here is it would require developers to use content script context to properly shut down and stop the old version of the content script so it doesn't interfere with the newer version of the content script.

This would be:

• good because it would force developers to properly clean up their content scripts
• bad because I would get lots of issue reports on github and discord about "content scripts not working after saving a file" lol

So reloading a tab to run the new content script is the safer option, it's guarenteed to always cleanup and run the latest code, regardless of the content script's contents.

[VladRud]

I agree with @arnab710 . I just started working with WXT, and the behavior where all tabs in the browser are reloaded was unexpected. I waited several minutes for all tabs to fully reload.

I’m fine with reloading just one tab when I need to refresh the UI code, but reloading all tabs seems strange to me. Maybe using the “Alt+R” reload command to refresh the extension would be a better option?

[Timeraa]

There's actually a rare edge case that I need content scripts to not reload the page @aklinker1. For example if you want to test the behavior when the content script can't be injected into the page as the page needs a reload and for example having your extension icon show something like an exclamation mark for example and when opening have something in there to hint the user to reload the page. As my users are quite "stupid" in that regard

I keep getting complaints from people telling me my extension doesn't work and when you tell them if they reloaded the tab after installing they say no and once they do 🎉

[GorvGoyl]

@aklinker1 would really like to have the option to only reload the currently active tab instead of all tabs.

My Chrome extension is an AI tool. It shows a modal when activated so that users can chat with AI on any page.

Here's my development flow:

• I keep a persistent browser (defineRunnerConfig {disable true}) as it is faster and allows me to maintain my saved logins.
• I use a single tab to test my extension; if it works on that tab, it should work on all sites.
• Sometimes I open multiple tabs to read documentation and do research while developing the extension. However, when I save changes in VSCode, it reloads all tabs instead of just the single tab I'm working on. I would prefer to reload only the active tab because that's where I'm doing the development.

I would get lots of issue reports on github and discord about "content scripts not working after saving a file" lol

If you provide an additional option to only reload the current tab, but do not set it as the default behavior, then you should not get those reports.

[aklinker1]

Hmm, OK, you guys have convinced me that we need some way to customize reloading behavior during development. I'm not convinced that the default behavior of reloading all tabs should change, I think that's preferred in the majority of cases, but I understand you use-cases.

So how to implement this... In general, it would be good to have some kind of hook system for runtime events, letting you configure WXT's runtime behavior, like handling reloads.

export default defineBackground((wxt) => {
  wxt.hook("reload:tabs", (tabs) => {
    // remove tabs from array here
  });
});

That could be a solution. Another might be to allow another export from the background entrypoint with a callback function like shouldReloadTab.

export const devOptions = defineBackgroundDevOptions({
  shouldReloadTabOnChange(tab) {
    return tab.active
  },
})

export default defineBackground(() => {});

Anyone else have suggestions for what you want this to look like? Just started brainstorming, open to any idea.

Between those two options, I would prefer to implement a hooks system than have one-off exports, which stays inline with WXT's design.

[GorvGoyl]

sweet! is it possible to detect currently active tab and reload that instead of all tabs in the hook method?

[aklinker1]

sweet! is it possible to detect currently active tab and reload that instead of all tabs in the hook method?

Yes, it would be.

[futantan]

hi @aklinker1 I need this so much! Is this under development? otherwise I'm willing to help based on your API design 🙌🏻

[davestewart]

Hey Aaron,

I just came here to say that I was going to file the same "bug" in that WXT killed my entire Mac a few weeks ago by trying to reload 200+ tabs in my main Chrome profile when I run the dev version in my main profile (vs the temp profile WXT seems to create).

At first I wasn't sure what was happening, but every app on my machine froze, had redraw issues, etc, etc because Chrome was reloading everything. At one point I panicked and thought it might be a virus!

Just letting you know the impact.

[aklinker1]

OK, thanks for the heads up. I'm currently focusing on releasing 1.0, so I won't be able to work on this until that's done.

My main suggestion right now would be to not install the dev version of your extension in your main profile. If you need to login to websites or persist data between runs, you could:

1. Configure the runner to use a persistent profile: https://wxt.dev/guide/essentials/config/browser-startup.html#persist-data
2. Use a test profile instead of your main one
3. Build a ZIP and install that on your main profile to test

[davestewart]

You're doing God's work!

New docs are also 🔥🔥🔥 btw 🥳

[sghsri]

This feature would be awesome. I have my own template that I've been wanting to move over to wxt from, and this is something holding me back. The template only hot-reloads the active tab, and any other tabs have a (very unpolished) disclaimer bar injected showing something like this, just to make it clear that there are new changes that haven't been reloaded yet.

The logic powering this is extremely simple: