要实现此功能，需要用到popue.js和background.js通讯功能，如果不知道此功能，可以看我写的一篇文章或者官网：https://xiaoshen.blog.csdn.net/article/details/128832758

官网链接：https://developer.chrome.com/docs/extensions/reference/runtime/ 

需要用到的api为：

chrome.runtime.onMessage

chrome.declarativeNetRequest.updateDynamicRules

需要现在manifest.json文件中添加权限：

"declarativeNetRequest",

"declarativeNetRequestWithHostAccess",

"declarativeNetRequestFeedback"

在popue.html中添加两个按钮：修改UserAgent 和 恢复UserAgent

<button id="toggle-useragent">修改UserAgent</button>
<button id="reset-useragent">恢复UserAgent</button>

 

然后给这两个按钮绑定监听事件：

toggleUserAgent按钮会给background.js传递一个editUserAgent消息

resetUserAgent 按钮会给background.js传递一个resetUserAgent消息

    // 切换userAgent
    const toggleUserAgent = document.getElementById("toggle-useragent")
    toggleUserAgent.onclick = async function () {
      // 先获取当前激活的tab页
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      // 然后向这个tab页里面发送消息
      console.log('开始toggleUserAgent: ', tab);
      const response = await chrome.runtime.sendMessage("editUserAgent");
      // const response = await chrome.tabs.sendMessage(tab.id, { greeting: "hello" });
      // do something with response here, not outside the function
      console.log("toggleReceiveResponse:", response);
    }

    // 恢复userAgent
    const resetUserAgent = document.getElementById("reset-useragent")
    resetUserAgent.onclick = async function () {
      // 先获取当前激活的tab页
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      // 然后向这个tab页里面发送消息
      console.log('开始resetUserAgent: ', tab);
      const response = await chrome.runtime.sendMessage("resetUserAgent");
      // const response = await chrome.tabs.sendMessage(tab.id, { greeting: "hello" });
      // do something with response here, not outside the function
      console.log("resetUserAgentReceiveResponse:", response);
    }

 然后要在background.js里面开启监听消息的api：

当传递过来的消息是editUserAgent时，执行修改UserAgent操作

当传递的是resetUserAgent时，执行恢复UserAgent操作

并且会调用chrome.tabs.reload()刷新当前页面

// 监听传递过来的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 2. A page requested user data, respond with a copy of `user`
  console.log('这是background脚本onMessage', message);
  if (message === 'editUserAgent') {
    addRules(2)
    chrome.tabs.reload()
  } else if (message === 'resetUserAgent') {
    delRules(2)
    chrome.tabs.reload()
  } else {
    console.log('background脚本onMessage: else', message);
    sendContent(message)
  }
  sendResponse(user);
});

先添加一个修改UserAgent规则：

// 添加的规则内容
const configRules = [
  {
    id: 2,
    priority: 2,
    action: {
      type: 'modifyHeaders',
      requestHeaders: [
        {
          header: 'user-agent',
          operation: 'set',
          value: `Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25`,
        },
      ],
    },
    condition: {
      urlFilter: '|https*',
      resourceTypes: [
        'main_frame',
        'xmlhttprequest',
      ],
    },
  },
]

然后修改UserAgent的函数是：

// 添加规则
async function addRules(ruleId) {
  console.log('添加ruleId', ruleId);
  const rule = configRules.find(item => item.id === ruleId)
  if (!rule) {
    console.log('没有找到对应的ruleID', ruleId);
    return
  }
  const rules = { addRules: [rule] }
  // 更新动态规则的操作：添加、删除
  chrome.declarativeNetRequest.updateDynamicRules(rules, () => {
    if (chrome.runtime.lastError) {
      console.log('chrome.runtime.lastError-', chrome.runtime.lastError);
    } else {
      chrome.declarativeNetRequest.getDynamicRules(rules => console.log(rules))
    }
    console.log('修改请求头.....declarativeNetRequest');
  })
}

恢复UserAgent的方法：就是删除刚才那条规则

// 删除规则
async function delRules(ruleId) {
  console.log('删除ruleId', ruleId);
  const rules = { removeRuleIds: [ruleId] }
  // 更新动态规则的操作：添加、删除
  chrome.declarativeNetRequest.updateDynamicRules(rules, () => {
    if (chrome.runtime.lastError) {
      console.log('chrome.runtime.lastError-', chrome.runtime.lastError);
    } else {
      chrome.declarativeNetRequest.getDynamicRules(rules => console.log(rules))
    }
    console.log('修改请求头.....declarativeNetRequest');
  })
}

最后看一下效果：

点击打开插件，可以看到有两个按钮，并且csdn的首页是pc端的样式：

 

当点击修改UserAgent按钮时：可以看到页面发生了变化，并且可以看到网络请求的user-agent已经变为我们代码里面写的那个了

 

当点击恢复UserAgent的时候，可以看到页面恢复为了PC样式，并且网络请求的user-agent已经恢复了

搜嘎，到此，这个文章已经写完了，下一篇继续讲解怎么动态修改Cookie，go go go！