Chrome 扩展：当被定向到一个新页面时，在 URL 请求被发送之前用不同的值替换各种 URL 参数

如何解决Chrome 扩展：当被定向到一个新页面时，在 URL 请求被发送之前用不同的值替换各种 URL 参数

当我单击某个链接（或被某个站点重定向）时，我想将请求的 URL 中各种跟踪参数的值替换为不同的通用值。对于这个例子，让我们使用我的用户名，所以一个指向

www.abc.com/?utm_source=originalsource&utm_campaign=originalcampaign&cid=originalcid&gclid=originalgclid

会变成www.abc.com/?utm_source=WTTDOTM&utm_campaign=WTTDOTMcampaign&cid=WTTDOTM&gclid=WTTDOTM

在发送请求之前编辑这些参数很重要，因为这样做是为了避免 UTM/cid/gclid/etc 跟踪，并在查看这些跟踪参数的人的流量数据中留下标记。我知道我必须使用 webRequest，而且逻辑看起来很简单，但我不知道如何使用 js 在 URL 中快速查找和替换。 This answer 看起来最接近我的要求，但我不知道它如何只修改 URL 的一小部分，因为我对 javascript 缺乏经验，而且我的大部分编码知识是只是把东西拍在一起直到它起作用。

从一个简单的子问题开始，我的问题是：如何在请求页面之前使用 webRequest API 将 URL 中的 utm_campaign=*** 替换为 utm_campaign=WTTDOTM？

----编辑：-----

@wOxxOm 感谢您的有用回答！我想我现在已经有了总体结构，但我仍然在为正则表达式规则的格式而苦苦挣扎，我对此非常陌生。按照我的理解，规则 ^(.*?utm_source=)(.+?(?=\\&)|$)(.*)（及其“中等”变体）将在 'utm_source=' 之前的所有值捕获到组 1 和所有值（或在它是最后一个参数的情况下没有）之后'&' 进入第 3 组，然后我应该可以使 regexSubstition group1+WTTDOTM+group3，对吗？当我目前尝试上传下面的解压扩展时，我收到一条错误消息，显示“rules.json：ID 为 1 的规则为“regexFilter”键指定了不正确的值。”我想我只是格式化错误，但我不知道我需要修复什么。你能帮我吗？这是我的 rules.json 和 manifest.json 文件。

规则.json

[
{
    "id": 1,"priority": 1,"action": {
      "type": "redirect","redirect": {
        "regexSubstitution": "\\1WTTDOTM\\3"
      }
    },"condition": {
      "regexFilter": "^(.*?utm_source=)(.+?(?=\\&)|$)(.*)","resourceTypes": [
        "main_frame"
      ]
    }
  },{
    "id": 2,"priority": 2,"condition": {
      "regexFilter": "^(.*?utm_medium=)(.+?(?=\\&)|$)(.*)","resourceTypes": [
        "main_frame"
      ]
    }
  }
]

manifest.json

{
    "manifest_version": 2,"name": "WTTDOTM is a UTM","version": "1.3","permissions": [
    "declarativeNetRequest","declarativeNetRequestFeedback","<all_urls>"
],"description": "Replaces all UTM values with 'WTTDOTM'","declarative_net_request" : {
    "rule_resources" : [{
      "id": "1","enabled": true,"path": "rules.json"
    },{
      "id": "2","path": "rules.json"
    }],"icons": {
          "128": "icon128.png" }
 }
}

解决方法

使用正则表达式可能不可能做到这一点，但这会令人沮丧。您尝试捕获的文本几乎可以包含任何内容，因此构建一个正则表达式来捕获每个查询参数之后的内容以及每个查询参数之后的内容 将会很困难。相反，我建议使用 Chrome 的内置 URLSearchParams API。

结合 Javascript 的 URL object，您尝试执行的操作可能如下所示：

const replaceTrackerParams = (urlString,replacementString) => {
  const url = new URL(urlString);
  const params = new URLSearchParams(url.search);

  // If campagin parameters exist,replace them
  params.has('utm_source') && params.set('utm_source',replacementString)
  params.has('utm_campaign') && params.set('utm_campaign',replacementString)

  // Return modified URL
  return url.hostname + '?' + params.toString() 
}

根据需要用更复杂的逻辑替换速记语法。

另一个答案建议使用 declarativeNetRequest，因为它是更新、更高效的 API。确实如此，但我认为它还不支持回调函数。