如何解决如何将包含 HTML 表单中空格的用户输入插入到 declarativeNetRequest 动态规则中，并将这些空格编码为“%20”而不是“+”
我正在构建一个扩展，允许用户用他们自己的字符串替换 UTM 参数。我想支持单词之间有空格的字符串。因此，例如，test input 的用户输入通过 declarativeNetRequest 功能为 URL google.com/?utm_source=originalsource 创建动态规则以重定向到结果 google.com/?utm_source=test%20input
%20 部分是我遇到问题的地方，因为无论我尝试什么，我都无法获得为 %20 提供 <space> 的输出。我认为这是因为在我转换 URL 后的某个时刻，浏览器重新编码它，给我 %2520 的输出，这只是附加到 % (%25) 的编码关注20。如果我不对输入做任何事情而只是将其作为值 <space> 显示为 +。
我的问题是：如何获取包含空格的用户输入，使用该输入创建动态规则，并确保浏览器在处理规则后指向的最终 URL 将这些空格编码为%20。
这是触发规则的 popup.js，我让每个替换都遵循稍微不同的逻辑，并注释了每个规则给出的输出。
document.addEventListener('DOMContentLoaded',documentEvents,false);
function myAction(input) {
console.log("input value is : " + input.value);
alert("The entered data is : " + input.value);
}
function documentEvents() {
document.getElementById('ok_btn').addEventListener('click',function() {
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [1],addRules: [
{
"id": 1,"priority": 1,"action": {
"type": "redirect","redirect": {
"transform": {
"queryTransform": {
"addOrReplaceParams": [
//dont use any input,just manually replace utm_source with the static value "test%20input",outputs "test%2520input"
{"key": "utm_source","value": "test%20input"},//get the input from the textbox and turn it into a string,for input "test input" outputs "test+input"
{"key": "utm_medium","value": document.getElementById('name_textbox').value},//get the input get the input from the textbox and turn it into a string,//then encode it as a URI component,for input "test input" outputs "test%2520input"
{"key": "utm_term","value": encodeURIComponent(document.getElementById('name_textbox').value)},//then encode it as a URI component and replace " " with "%20",for input "test input" outputs "test%2520input"
{"key": "utm_content","value": encodeURIComponent(document.getElementById('name_textbox').value).replace(" ","%20")},//then encode it as a URI component and replace " " with "\%20",I thought the escape might help,for input "test input" outputs "test%2520input"
{"key": "utm_campaign","\%20")}
]
}
}
}
},"condition": {
"regexFilter": "[?&]utm_(source|medium|term|content)=[^&]+","resourceTypes": ["main_frame"]
}
}
]
});
console.log("input value is : " + document.getElementById('name_textbox').value);
console.log("input value with space replaced by %20 : " + document.getElementById('name_textbox').value.replace(" ","%20"));
console.log("input value is with encodeURIComponent : " + encodeURIComponent(document.getElementById('name_textbox').value));
console.log("input value is with encodeURIComponent and space replaced by 20 : " + encodeURIComponent(document.getElementById('name_textbox').value.replace(" ","%20")));
})
}
目前，对于用户输入 test input 和 URL https://about.fb.com/regulations/?utm_source=fillersource&utm_medium=fillermedium&utm_term=fillerterm&utm_content=fillercontent&utm_campaign=fillercampaign，上述逻辑将用户引导至 https://about.fb.com/regulations/?utm_source=test%2520input&utm_medium=test+input&utm_term=test%2520input&utm_content=test%2520input&utm_campaign=test%2520input
这里是 manifest.json
{
"manifest_version": 3,"name": "CustomUTMPopup","version": "1.1","description": "Custom UTM testing","action": {
"default_icon": "images/icon.png","default_popup": "popup.html"
},"host_permissions": ["*://*/*"],"permissions": ["declarativeNetRequest","declarativeNetRequestFeedback"],"icons": {
"128": "icon128.png" }
}
和 popup.html
<!DOCTYPE html>
<html>
<head>
<title>UTM Replacer</title>
<script src="popup.js"></script>
</head>
<body>
<div style="padding: 20px 20px 20px 20px;">
<h3>Hello,</h3>
<p>Please write your UTM replacement: </p>
<input id="name_textbox" />
<button id="ok_btn" type="button">OK</button>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。