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

Question

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

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 的较小切片会如何工作，因为我对 [=45= 非常缺乏经验] 而我的大部分编码知识只是将东西组合在一起，直到它起作用。

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

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

@wOxxOm 感谢您的帮助！我想我现在已经掌握了总体结构，但我仍在努力处理正则表达式规则的格式，我对此非常不熟悉。我理解它的方式，规则 ^(.*?utm_source=)(.+?(?=\&)|$)(.*) （及其“中”变体）将捕获 'utm_source=' 之前的所有值到组 1 和所有值（或 none 在它的情况下最后一个参数）在'&'之后进入第3组，然后我应该能够制作regexSubstition group1 + WTTDOTM + group3，对吗？当前，当我尝试上传下面的解压扩展程序时，我遇到了一条错误消息：“rules.json：ID 为 1 的规则为“regexFilter”键指定了不正确的值。”我想我只是格式错误，但我不知道我需要修复什么。你能帮我吗？这是我的 rules.json 和 manifest.json 文件。

rules.json

[
{
    "id": 1,
    "priority": 1,
    "action": {
      "type": "redirect",
      "redirect": {
        "regexSubstitution": "\1WTTDOTM\3"
      }
    },
    "condition": {
      "regexFilter": "^(.*?utm_source=)(.+?(?=\&)|$)(.*)",
      "resourceTypes": [
        "main_frame"
      ]
    }
  },
{
    "id": 2,
    "priority": 2,
    "action": {
      "type": "redirect",
      "redirect": {
        "regexSubstitution": "\1WTTDOTM\3"
      }
    },
    "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",
      "enabled": true,
      "path": "rules.json"
    }],
    "icons": {
          "128": "icon128.png" }
 }
}

Answer 1

可能不可能用正则表达式做到这一点，但它会令人沮丧。您尝试捕获的文本几乎可以包含任何内容，因此构建一个捕获 每个查询参数之后的内容并且仅捕获每个查询参数 之后的内容的正则表达式将很困难。相反，我建议使用 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() 
}

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

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

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

Chrome Extension: when being directed to a new page, replace assorted URL parameters with a different value before the URL request gets sent off

javascript

google-chrome

webrequest

google-chrome-extension