I am developing a google chrome extension right now, In the google chrome extension UI page, I define a link like this in template.html:

<a href="#" @click="clearToken()">click</a>

when click the link in the UI, invoke the background method clearToken, this is the background code looks like:

import chromeCall from 'chrome-call';
import getOptions from '../../public/default-options';
import template from './template.html';

export default {
  template ,
  data : ()=> ({
    clearSuccess : false,
    options : {
      excludeDomains: []
    } ,
    showAdd : false ,
    tmpDomain : '',
    reddwarfUserName: '',
    reddwarfPassword: '',
    showYDApi : false,
    addYouDaoAPI : {
      apiKey : '',
      keyFrom : ''
    }
  }) ,
  methods : {
    clearToken() {
     alert("click");
  }
}})}

but when I click the link in the UI, did not alert any message, I am sure the background method was triggered because when I write a clear local storage key logic in the method and it works. why the background method did not show the alert information? what should I do to debug the google chrome extension option page? I also tried to add debugger code in the background method, still did not trigger the breakpoint. I already opened the background page of the extension(but I could not open the popup page and option page in the same time). My google chrome version is Version 97.0.4692.71 (Official Build) (arm64).