浏览器扩展点击按钮调用getReviews()无法更新reviews元素问题排查

• 1. 扩展跨域权限未配置
     浏览器扩展的安全策略默认会拦截未授权的跨域请求，你需要在扩展的manifest.json文件中添加Github API的访问权限：
  • 若使用Manifest V2，在permissions数组中添加"https://api.github.com/*"
  • 若使用Manifest V3，在host_permissions数组中添加"https://api.github.com/*"
    你在控制台手动执行代码时不受扩展权限限制，所以可以正常发起请求，加载为扩展后没有权限就会直接拦截请求，导致getReviews()内的回调完全不触发，没有alert弹窗。
• 2. 代码存在变量引用错误
     getReviews()函数中你接收了要更新的元素参数elem，但实际赋值内容时错误使用了不存在的变量div：
     错误代码：

div.innerHTML = atob(reply)

应改为：

elem.innerHTML = atob(reply)

同时函数内的reply变量未做声明，直接赋值会隐式创建全局变量，严格模式下会抛出异常中断执行，需补充声明：

const reply = JSON.parse(request.responseText)["content"];

• 3. 全局XMLHttpRequest实例被覆盖
     你代码开头声明了全局的request变量，getReviews()中每次发起新请求都会覆盖这个全局实例，若用户短时间点击多个课程按钮，前序请求的回调函数会被后序请求覆盖，导致前序请求完成后无法触发回调。
     需将getReviews()内的request改为局部变量，在函数内部声明，同时删除全局冗余的request声明即可：

function getReviews(course, elem){
    const request = new XMLHttpRequest();
    // 剩余逻辑不变
}

• 4. Manifest V3兼容问题
     如果你使用的是Manifest V3版本的扩展，内容脚本对XMLHttpRequest的支持存在限制，建议替换为标准fetchAPI实现请求逻辑。

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