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

Question

当我点击链接(或被网站重定向(时，我想用一个不同的通用值替换请求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。这个答案看起来最接近我的要求，但我不知道只修改URL的较小部分会如何工作，因为我对javascript非常缺乏经验，而且我的大部分编码知识只是把东西拼凑在一起，直到它起作用。

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

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

@wOxxOm感谢您的帮助！我想我现在已经有了大致的结构，但我仍然在为regex规则的格式设置而挣扎，这是我非常不熟悉的。按照我的理解，规则^(.*?utm_source=)(.+?(?=\&)|$)(.*)(及其"中等"变体(将把"utm_source="之前的所有值捕获到组1中，并将"&amp进入第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对象，您尝试做的事情可能看起来像这样：

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。这是真的，但我认为它还不支持回调函数。