chrome extensions插件通过点击按钮修改浏览器UserAgent，manifest v3版本

Love The Way You Lie 2023-10-04 20:40 56阅读 0赞

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

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

#### 需要用到的api为： ####

chrome.runtime.onMessage

chrome.declarativeNetRequest.updateDynamicRules

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

"declarativeNetRequest",

"declarativeNetRequestWithHostAccess",

"declarativeNetRequestFeedback"

![743a40e4291d4d169ddc78c53b0bdafd.png][]

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

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

![3784c023002042da89542cdea8dcf06c.png][]

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

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端的样式：![ea3c6a88599c43c687a74acf118da93d.png][]

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

![5464fcfc7c0b41ba9e51e40001425f50.png][]

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

![e078ea3e11554679a576b53ec251e7ed.png][]

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

[https_xiaoshen.blog.csdn.net_article_details_128832758]: https://xiaoshen.blog.csdn.net/article/details/128832758
[https_developer.chrome.com_docs_extensions_reference_runtime]: https://developer.chrome.com/docs/extensions/reference/runtime/
[743a40e4291d4d169ddc78c53b0bdafd.png]: https://img-blog.csdnimg.cn/743a40e4291d4d169ddc78c53b0bdafd.png
[3784c023002042da89542cdea8dcf06c.png]: https://img-blog.csdnimg.cn/3784c023002042da89542cdea8dcf06c.png
[ea3c6a88599c43c687a74acf118da93d.png]: https://img-blog.csdnimg.cn/ea3c6a88599c43c687a74acf118da93d.png
[5464fcfc7c0b41ba9e51e40001425f50.png]: https://img-blog.csdnimg.cn/5464fcfc7c0b41ba9e51e40001425f50.png
[e078ea3e11554679a576b53ec251e7ed.png]: https://img-blog.csdnimg.cn/e078ea3e11554679a576b53ec251e7ed.png