Bootstrap类在JavaScript中未定义问题排查求助

核心原因：Chrome扩展的上下文隔离 #

Chrome扩展的内容脚本（包括Scripty默认注入的脚本）与页面全局执行上下文完全隔离：

• 通过loadFile加载的bootstrap.bundle.min.js会被注入到页面的全局上下文（页面自身的window对象）
• 但初始化代码const bsContactMenu = new bootstrap.Offcanvas('#contactMenu');是在内容脚本的独立上下文执行，这个上下文的window和页面全局window并非同一对象，因此找不到bootstrap变量
• 开发者工具Watch面板默认查看的是页面全局上下文的变量，所以会出现「面板能看到但代码找不到」的矛盾情况

次要可能：加载时机不匹配 #

如果loadFile是异步加载且未等待完成就执行初始化代码，也会触发bootstrap未定义错误。不过结合你提到的「文件已正确加载」，这个概率较低，但仍需确认加载逻辑的同步性。

解决办法 #

1. 将初始化代码注入到页面全局上下文 #

把需要访问bootstrap的代码放到页面自身的执行环境中，而非内容脚本：

// 封装loadFile为Promise（若原本不是异步回调形式）
function loadFile(url, type) {
  return new Promise((resolve, reject) => {
    const element = document.createElement(type);
    if (type === 'script') {
      element.src = url;
      element.onload = resolve;
      element.onerror = reject;
    } else if (type === 'link') {
      element.rel = 'stylesheet';
      element.href = url;
      element.onload = resolve;
      element.onerror = reject;
    }
    document.head.appendChild(element);
  });
}

// 等待Bootstrap资源加载完成后，注入初始化代码
Promise.all([
  loadFile('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', 'link'),
  loadFile('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', 'script')
]).then(() => {
  const initScript = document.createElement('script');
  initScript.textContent = `
    const bsContactMenu = new bootstrap.Offcanvas('#contactMenu');
    // 其他需要访问bootstrap的代码也写在这里
  `;
  document.body.appendChild(initScript);
});

2. 切换Scripty的执行上下文 #

在Scripty的脚本设置中，找到「执行上下文」选项，选择页面上下文（而非默认的内容脚本上下文），这样你的代码会直接在页面全局环境运行，可直接访问bootstrap变量。

3. 确保加载完成后执行代码 #

若坚持使用内容脚本上下文，需确保bootstrap被加载到内容脚本的上下文（不推荐，因为Bootstrap设计为运行在页面全局），或采用方法一将初始化代码注入到页面环境。

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