部署Chrome扩展出现Uncaught TypeError (reading 'split')错误如何解决

你的报错触发自这行代码：
const search2=new URL(urlString).searchParams.get("q").split(" ");
当页面URL的查询参数中不存在q字段时，searchParams.get("q")会返回null，对null调用split方法就会抛出你遇到的Uncaught TypeError: Cannot read properties of null (reading 'split')错误。

你需要先对q参数做非空校验，只有参数存在且有有效值时才执行后续逻辑，同时可以补充兜底逻辑处理参数不存在的场景。修复后的完整代码如下：

function getURL(){
  return window.location.href
}

const mainEL = document.getElementById("main")
const eL=document.getElementById("caption")
const saveEL=document.getElementById("save")
const topKeys=['FRED','SAM','PER','CRAFT','MARK','SANDRA','DERICK'];
const searchKeys=['RITA','PER','DERICK','FRED','BEN','ZOEY'];

const urlString = getURL();
// 新增q参数的非空校验
const qParam = new URL(urlString).searchParams.get("q");
let found = [];

if (qParam) {
  const search2 = qParam.split(" ");
  found = String(search2).toUpperCase().split(",").filter((val)=>{
    return searchKeys.includes(val)
  });
}

const isFound=topKeys.some(ai=>found.includes(ai));

function noMatch(){
  // 优化拼接逻辑，避免末尾多余逗号
  eL.innerHTML = found.join(', ');
}

function topMatch(){
  eL.innerHTML="<a href='#'>there is a match</a>"
}

if(found.length>0 && isFound===true){
  topMatch()
}else if(found.length>0 && isFound===false){
  noMatch()
}

• 如果你是在Chrome扩展的内容脚本中运行这段代码，建议将脚本执行时机设置为document_idle，或者把代码包裹在DOMContentLoaded事件回调中，避免页面DOM还没渲染完成时，getElementById拿到null导致后续操作报错
• 如果你的关键词来源是用户可控的搜索参数，尽量用textContent代替innerHTML拼接内容，避免XSS注入风险

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