Chrome扩展开发：chrome.tabs.update插入URL避免百分号编码问题

我正在开发一款小型Chrome扩展，用于URL操作并修改URL路径。目前功能基本正常，但涉及参数时出现问题：保存的路径数据存在列表中，点击列表项会替换当前标签页的URL路径，但如果保存的路径包含问号，问号总会被转义成%3F。手动在源码中直接写URL字符串调用chrome.tabs.update是正常的，我试过用decodeURIComponent和encodeURIComponent都没解决，求修复方法。

原核心代码：

function updateList(items) {
  listElement.innerHTML = '';
  items.forEach(function(item, index) {
    const listItem = document.createElement('li');

    const pathText = document.createElement('span');
    pathText.textContent = item.description;
    pathText.classList.add('path-text');
    pathText.addEventListener('click', function() {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        const tab = tabs[0];
        const url = new URL(tab.url);
        url.pathname = '/' + item.path;
        chrome.tabs.update(tab.id, {url: url.toString()});
      });
    });
  });
}

测试代码（可正常生效）：

let myNewUrl = 'https://www.test.de/test?formatc';
chrome.tabs.update(tab.id, { url: myNewUrl });

问题根源 #

直接将带问号的字符串赋值给URL对象的pathname属性是错误的——pathname会自动对路径中的特殊字符（包括问号）进行URL编码，导致问号被转义为%3F。而问号属于URL的查询参数部分，并非路径的一部分，不能和路径混在一起赋值给pathname。

修复方案 #

需要将item.path拆分为路径部分和查询参数部分，分别赋值给URL对象对应的属性：

方案1：简单拆分（适合参数格式简单的场景）

pathText.addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    const tab = tabs[0];
    const url = new URL(tab.url);
    // 拆分路径与查询参数，最多分割成2部分
    const [pathPart, queryPart] = item.path.split('?', 2);
    // 设置路径
    url.pathname = '/' + pathPart;
    // 设置查询参数（有则添加，无则清空）
    url.search = queryPart ? `?${queryPart}` : '';
    chrome.tabs.update(tab.id, {url: url.toString()});
  });
});

方案2：使用URLSearchParams（适合复杂参数场景）

如果查询参数包含特殊字符或多个键值对，推荐用URLSearchParams解析，能更稳妥地处理编码问题：

pathText.addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    const tab = tabs[0];
    const url = new URL(tab.url);
    const [pathPart, queryPart] = item.path.split('?', 2);
    url.pathname = '/' + pathPart;
    // 清空原有查询参数
    url.searchParams.clear();
    // 解析并添加新的查询参数
    if (queryPart) {
      const params = new URLSearchParams(queryPart);
      params.forEach((value, key) => {
        url.searchParams.set(key, value);
      });
    }
    chrome.tabs.update(tab.id, {url: url.toString()});
  });
});

内容的提问来源于stack exchange，提问作者FormatC