Try to change UserAgent of chrome-browser with rewriting http-request-header using chrome-webrequest API, but it doesn't work well

Question

I'm developing chrome-extension for changing UserAgent to your desired. I use chrome-webrequest API, but I cannot rewrite it from the second time.....

I try to monitor the request headers. I found the web-requests increase from the second request.

I want to resolve this problem.

This is my code. I think the cause of this problem is chrome.webRequest.onBeforeSendHeaders.addListener(...).

But, I have no idea.

Can anyone give me some advices??

class BrowserConfig {
  apply (userAgent, language) {
  let targetURL = "<all_urls>"
  function rewriteHeader(e) {
    e.requestHeaders.forEach(function(header){
      let headerName = header.name.toLowerCase();
      if (headerName === "user-agent") {
        header.value = userAgent;
      }
    });
    return {requestHeaders: e.requestHeaders};
  }
  
  // the cause of this problem....?
  chrome.webRequest.onBeforeSendHeaders.addListener(
    rewriteHeader,
    {urls: [targetURL]},
    ["blocking", "requestHeaders", "extraHeaders"]
  );
}

import BrowserConfig from 'pass/to/BrowserConfig.js'
const browserConfig = new BrowserConfig()

// browserOptions example...  {userAgent: HeadlessChrome}
chrome.storage.local.get('browserOptions', ({ browserOptions }) => {
    this.browserConfig.apply(browserOptions.userAgent)
})

Expected Behavior

// 1st
set userAgent = 'aaaaa'
=> requestHeader = [{name: 'User-Agent', value: 'aaaaa'}]

// 2nd
set userAgent = 'bbbbb'
=> requestHeader = [{name: 'User-Agent', value: 'bbbbb'}]

Actual Behavior

// 1st
set userAgent = 'aaaaa'
=> requestHeader = [{name: 'User-Agent', value: 'aaaaa'}]

// 2nd
set userAgent = 'bbbbb'
=> // webrequest end up send 2 times.....
requestHeader = [{name: 'User-Agent', value: 'aaaaa'}]
requestHeader = [{name: 'User-Agent', value: 'bbbbb'}]

// 3rd
set userAgent = 'ccccc'
=> 
requestHeader = [{name: 'User-Agent', value: 'aaaaa'}]
requestHeader = [{name: 'User-Agent', value: 'bbbbb'}]
requestHeader = [{name: 'User-Agent', value: 'ccccc'}]

Answer 1

I can see that you've done an addListener but can't see a removeListener. If you don't remove the listeners, all the listeners will get triggered. Hence, when you add it the first time with 'aaaaa', it works as expected. The next time, there are two actions happening, the first 'aaaaa' listeners, and the second 'bbbbb' listenener, and so on.

Have a look at this page https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeSendHeaders and remove the listeners when you update/modify the user agent.