Skip to content

Clarify code outside of defineBackground as related error #1569

@avi12

Description

@avi12
Contributor

Feature Request

Suppose I have

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

it will throw an error that doesn't clarify that I must not have code outside of defineBackground

Is your feature request related to a bug?

Not related to a particular bug, though this issue could be classified as a bug

What are the alternatives?

Knowledge of the situation according to the documentation, nothing else

Additional context

Having this issue clarified will benefit both WXT devs who are new to the framework and devs like me, who explore using an agentic AI to code the extension (e.g. OpenHands)
Such an agent can often use errors to modify the code so that the error disappears

Activity

added theissue type on Apr 10, 2025
nishu-murmu

nishu-murmu commented on Apr 22, 2025

@nishu-murmu
Contributor

@avi12 Can you show me an example I'm not able to reproduce it.

Is it something like this? Cause this is working just fine.

const foo = () => {
  console.log(browser.runtime.getURL("/"));
};

export default defineBackground(() => {
  console.log("Hello background!", { id: browser.runtime.id });
  console.log(foo());
});
avi12

avi12 commented on Apr 22, 2025

@avi12
ContributorAuthor

Try

const foo = "bar";

export default defineBackground(() => {
  console.log(foo);
});
nishu-murmu

nishu-murmu commented on Apr 23, 2025

@nishu-murmu
Contributor

Try

const foo = "bar";

export default defineBackground(() => {
console.log(foo);
});

@avi12 I checked for this code as well. It is working for me.

Image

avi12

avi12 commented on Apr 23, 2025

@avi12
ContributorAuthor

@nishu-murmu According to that logic, this code should be perfectly valid:

console.log("background");

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

avi12 commented on Apr 23, 2025

@avi12
ContributorAuthor

Suppose I want to do

browser.runtime.onMessage.addListener(() => {});

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

the WXT compiler will yell at me

nishu-murmu

nishu-murmu commented on Apr 23, 2025

@nishu-murmu
Contributor

Suppose I want to do

browser.runtime.onMessage.addListener(() => {});

export default defineBackground(() => {});
the WXT compiler will yell at me

I ran every command, from pnpm compile, pnpm build, pnpm postinstall
I'm not seeing any errors.

And listeners are also working just fine.

Image

nishu-murmu

nishu-murmu commented on Apr 23, 2025

@nishu-murmu
Contributor

@nishu-murmu According to that logic, this code should be perfectly valid:

console.log("background");

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

Yeah, this is perfectly valid.

nishu-murmu

nishu-murmu commented on Apr 23, 2025

@nishu-murmu
Contributor

Can you try separating the code in different files and importing them in the root file.
Create background folder entrypoint.
Something like this?

Image

avi12

avi12 commented on Apr 23, 2025

@avi12
ContributorAuthor

To be fair, the project I linked is a puppet project that I let AI code it
But in general, it's good advice to code split
Besides that, I'd assume that the branch I linked failed to compile, am I right?

nishu-murmu

nishu-murmu commented on Apr 24, 2025

@nishu-murmu
Contributor

To be fair, the project I linked is a puppet project that I let AI code it But in general, it's good advice to code split Besides that, I'd assume that the branch I linked failed to compile, am I right?

Let me clone and check it myself.

nishu-murmu

nishu-murmu commented on Apr 25, 2025

@nishu-murmu
Contributor

@avi12 I checked the code.
Problem is with browser.action API, I've checked with other APIs like storage API, those are working fine.
@aklinker1 can chime in as to why that is happening

Image

avi12

avi12 commented on Apr 25, 2025

@avi12
ContributorAuthor

Another question is why do all of the chrome APIs need specific implementations in browser

nishu-murmu

nishu-murmu commented on Apr 25, 2025

@nishu-murmu
Contributor

Another question is why do all of the chrome APIs need specific implementations in browser

I don't have much idea regarding this, @aklinker1 has much more idea regarding this.
I'm assuming all the chrome APIs are monkey patched to browser

aklinker1

aklinker1 commented on Apr 27, 2025

@aklinker1
Member

I polyfill the node environment with a chrome and browser global from @webext-core/fake-browser.

Ideally all APIs would have an in-memory implementation, for testing, but I haven't implemented all of them.

So that's why some APIs don't throw an error, like storage, and some do, like the action APIs.

zampettim

zampettim commented on Jun 11, 2025

@zampettim

I definitely need the browser.action.XXX methods added to fake-browser (as I see there is a PR for), since my tests failing as a result. Just adding comment to help make clear this is needed.

aklinker1

aklinker1 commented on Jun 14, 2025

@aklinker1
Member

I definitely need the browser.action.XXX methods added to fake-browser (as I see there is a PR for), since my tests failing as a result. Just adding comment to help make clear this is needed.

@zampettimWe can add them, but it's also possible for you to add mock implementations yourself. Just modify the fakeBrowser object in a setup file:

// vitest.setup.ts
import { fakeBrowser } from 'wxt/testing';
import { vi } from 'vitest';

const onClickCallbacks = new Set();
fakeBrowser.action ??= {}
fakeBrowser.action.onClicked ??= {}
fakeBrowser.action.onClicked = vi.fn((callback) => {
  onClickCallbacks.add(callback)
})
fakeBrowser.action.onClicked.trigger = () => {
  onClickCallbacks.forEach(callback => callback())
}

This is necessary because sometimes you might need to specifically mock things with Vitest in the future. Just for reference.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @zampettim@avi12@aklinker1@nishu-murmu

      Issue actions

        Clarify code outside of `defineBackground` as related error · Issue #1569 · wxt-dev/wxt