How can I spoof the search in new tab as mobile (Edge Extension)? Javascript

I am not so good at JavaScript, but I wanted to try making the extension for Microsoft Edge where it'll randomly search in bing. The desktop search is working for now, but Mobile search isn't able to spoof the search as mobile device. How can I solve it? I have manifest version 3.

Github Prokect

This is my function which search in new tab:

function executeSearchM(searches){
    /*
    Spoof to mobile, not working :(
    */
    for(var i=0; i<searches.length; i++){

        var win = window.open('https://www.bing.com/search?q='+searches[i],'_blank');
        win.focus();
        
    }
    
}

Search is working but it is still in Desktop mode. What should I do to spoof it as mobile device search.

This is spoof function:

function spoof(){
    chrome.webRequest.onBeforeSendHeaders.addListener(
        function(details) {
            for (var i = 0; i < details.requestHeaders.length; ++i) {
                if (details.requestHeaders[i].name === 'User-Agent') {
                    details.requestHeaders.splice(i, 1);
                    break;
                }
            }
            details.requestHeaders.push({name: 'User-Agent', value: 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Mobile Safari/537.36'});
            return {requestHeaders: details.requestHeaders};
        },
        {urls: ["<all_urls>"]},
        ["blocking", "requestHeaders"]
    );
}

I tried lots of things to spoof as a device but it is not working, I am not good at JavaScript that's why I am not able to do it properly.

Solution

You're using webRequestBlocking to edit User-Agent, but webRequestBlocking requires Manifest version of 2 or lower. In Manifest V3, you need to use declarativeNetRequest to edit User-Agent.

You can refer to below steps and modify codes according to your situation.

First, you need to add permissions in manifest.json:

"permissions": [
    "webRequest",
    "declarativeNetRequest",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ],

Then edit the executeSearchD and executeSearchM functions in popup.js to send the editUserAgent message and resetUserAgent message:

function executeSearchD(searches){
    const response = chrome.runtime.sendMessage("resetUserAgent"); //add this line
    for(var i=0; i<searches.length; i++){
        var win = window.open('https://www.bing.com/search?q='+searches[i]);
        win.focus();
    }
}

function executeSearchM(searches){
    const response = chrome.runtime.sendMessage("editUserAgent"); //add this line 
    for(var i=0; i<searches.length; i++){ 
        var win = window.open('https://www.bing.com/search?q='+searches[i],'_blank');
        win.focus();            
    } 
}

Finally, we set a User-Agent edit rule and add an event listener in background.js to change the User-Agent:

const RULE = {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "requestHeaders": [
        { "header": "User-Agent", "operation": "set", "value": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Mobile Safari/537.36 Edg/112.0.1722.48" }
      ]
    },
    "condition": { "urlFilter": "www.bing.com", "resourceTypes": ["main_frame"] }
};

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message == 'editUserAgent') {
        chrome.declarativeNetRequest.updateDynamicRules({
            removeRuleIds: [RULE.id],
            addRules: [RULE]
          });
          chrome.tabs.reload();
    } else if (message === 'resetUserAgent') {
        chrome.declarativeNetRequest.updateDynamicRules({
            removeRuleIds: [RULE.id]
          });
        chrome.tabs.reload();
      } else {
        sendResponse(message);
      }
      sendResponse({response: "response from background script"});
});

The result is like below: