Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
arnab710 opened this issue Sep 11, 2024 · 9 comments

Comments

@arnab710
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link

VladRud commented Oct 13, 2024

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
Copy link
Contributor

Timeraa commented Oct 17, 2024

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
Copy link
Contributor

GorvGoyl commented Oct 18, 2024

@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
Copy link
Collaborator

aklinker1 commented Oct 18, 2024

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
Copy link
Contributor

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

@aklinker1
Copy link
Collaborator

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
Copy link

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

@aklinker1 aklinker1 added this to the DX Improvements milestone Oct 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants