Chrome扩展popup中Bootstrap tabs点击失效报unsafe协议错误问题

数据老陈

2026-9-24

Chrome扩展popup页面Bootstrap tabs报错解决方案

问题原因

Chrome扩展的默认内容安全策略（CSP）会限制页内锚点跳转的默认行为，旧版本Bootstrap的tabs组件触发点击时会优先读取href属性值尝试跳转，被扩展安全机制拦截后会自动添加unsafe:前缀，最终触发scheme不识别的报错。该问题和你配置的tabs权限无关，这个权限用于控制浏览器原生标签页操作，和popup内的UI组件无关。

可行解决方案

方案1：修改HTML标签属性（最推荐）

将所有tab导航的a标签的锚点地址从href属性移到data-target属性，href属性设置为无跳转值即可，Bootstrap tabs原生支持data-target指定关联面板，修改后的代码如下：

<div class="tabbable-line">
    <ul class="nav nav-tabs">
      <li class="active">
         <a href="javascript:void(0)" class="active" data-toggle="tab" data-target="#A">A</a>
      </li>
      <li>
          <a href="javascript:void(0)" data-toggle="tab" data-target="#B">B</a>
      </li>
      <li>
          <a href="javascript:void(0)" data-toggle="tab" data-target="#C">C</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="A">
        <h2>Atab</h2>
      </div>
      <div class="tab-pane" id="B">
         <p>B tab</p>
      </div>
      <div class="tab-pane" id="C">
         <p>C tab</p>
      </div>
    </div>
</div>

注：记得给默认激活的tab-pane也加上active类，避免初始状态面板不展示

方案2：添加JS阻止默认跳转行为

如果不想批量修改HTML，可在页面引入的JS文件中添加如下代码，主动拦截tab的点击跳转行为：

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('click', function(e) {
    // 阻止默认的锚点跳转逻辑
    e.preventDefault();
    // 手动触发tab切换
    $(this).tab('show');
  })
})