Chrome扩展表单提交问题：URL中ID显示为[object%20Event]

嘿，我明白你现在卡在哪了——提交ID后新窗口的URL里，本该是ID的位置变成了[object%20Event]，这事儿其实是你把事件对象当成了输入框的ID值来用了，咱们一步步把它搞定：

问题根源拆解 #

你的JS代码里，addEventListener('submit', a)会把submit事件的Event对象作为参数传给函数a，所以函数里的id变量根本不是用户输入的ID字符串，而是事件对象本身。当你把它拼进URL时，JS会把事件对象转成字符串[object Event]，URL编码后就变成了[object%20Event]。另外，表单默认的提交行为会刷新页面，这也不是你想要的效果，得一起处理掉。

修正方案 #

第一步：给输入框添加ID标识

先修改HTML里的输入框，给它加一个id属性，方便我们精准获取用户输入的内容：

<head> 
  <script type="text/javascript" src="ChromeFacebook.js"></script> 
</head> 
<body> 
  <h1 id="title"> Enter ID: </h1> 
  <h2 id="paragraphs"> Comments </h2> 
  <form id="form1"> 
    <!-- 新增id="inputId" -->
    <input type="text" id="inputId" size="60" placeholder="Photos-commented">
    <input type="submit" value="Search"> 
  </form> 
</body> 
</html>

第二步：修改JS逻辑，正确处理事件和输入值

替换你的JS代码，改成下面这样：

// 获取表单和输入框元素
const form = document.getElementById('form1');
const input = document.getElementById('inputId');

function handleSubmit(event) {
    // 阻止表单默认提交行为，避免页面刷新
    event.preventDefault();
    
    // 获取并清理用户输入的ID值（去掉首尾空格）
    const userId = input.value.trim();
    
    // 可选：添加输入为空的判断，提升体验
    if (!userId) {
        alert('请输入有效的ID！');
        return;
    }
    
    // 拼接完整URL并打开新窗口
    const fullUrl = `https://www.facebook.com/search/str/${userId}/photos-commented`;
    window.open(fullUrl, "a");
}

// 给表单绑定提交事件监听
form.addEventListener('submit', handleSubmit);

关键修改点说明 #

1. 阻止默认行为：用event.preventDefault()避免表单提交时刷新页面；
2. 正确获取输入值：通过input.value拿到用户输入的ID，trim()用来清理多余的首尾空格；
3. 更清晰的URL拼接：用ES6模板字符串拼接URL，比传统字符串拼接更直观；
4. 输入校验：新增空值判断，避免用户误提交空内容。

额外提醒 #

如果你的Chrome扩展需要访问Facebook域名，别忘了在manifest.json里添加对应的权限：

"permissions": [
    "https://www.facebook.com/*"
]

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