MSAL login in chrome extension: 'redirect_uri' is not valid

I build a chrome extension use Angular. In this extension I use @azure/msal-angular to login.

What can I do to login in chrome extension?

Here is my extension image:popup image

When I first click Login, console print:

@azure/msal-browser@3.0.0-beta.1 : Info - Emitting event: msal:loginStart.

Then click Login or Login using Popup, console print:

BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.

When I first click Login using Popup, the website show:

invalid_request: The provided value for the input parameter 'redirect_uri' is not valid. The expected value is a URI which matches a redirect URI registered for this client application.

Here is my login code:

loginRedirect() {
    if (this.msalGuardConfig.authRequest) {
      this.authService.loginRedirect({
        ...this.msalGuardConfig.authRequest,
      } as RedirectRequest);
    } else {
      this.authService.loginRedirect();
    }
  }

  loginPopup() {
    if (this.msalGuardConfig.authRequest) {
      this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
        .subscribe((response: AuthenticationResult) => {
          this.authService.instance.setActiveAccount(response.account);
        });
    } else {
      this.authService.loginPopup()
        .subscribe((response: AuthenticationResult) => {
          this.authService.instance.setActiveAccount(response.account);
        });
    }
  }

I use chrome.identity.launchWebAuthFlow API solve this issue.If you want use Oauth2 in chrome extension ,please watch chrome identity