Chrome扩展连接Dropbox API遇ERR_BLOCKED_BY_CLIENT问题求助

问题根源 #

这个拦截是Chrome针对跨源跳转到扩展本地页面的安全机制导致的——Dropbox授权后的重定向属于第三方跳转请求，Chrome会默认拦截这类非用户主动触发的扩展页面访问；而手动点击刷新是用户主动操作，所以能绕过拦截拿到令牌。

可行解决方案 #

1. 用Chrome官方chrome.identity API处理授权（首推） #

Chrome的chrome.identity专门适配扩展的OAuth授权流程，能彻底避开重定向拦截：

• 先在manifest.json里加权限和OAuth配置：

  {
    "permissions": ["identity"],
    "oauth2": {
      "client_id": "你的Dropbox客户端ID",
      "scopes": ["files.content.read", "你需要的其他权限"]
    }
  }
  

• 用chrome.identity.launchWebAuthFlow发起授权：

  chrome.identity.launchWebAuthFlow({
    url: "https://www.dropbox.com/oauth2/authorize?client_id=你的客户端ID&response_type=code&redirect_uri=urn:ietf:wg:oauth:2.0:oob",
    interactive: true
  }, (redirectUrl) => {
    // 从回调URL里提取授权code，再请求access_token
    const code = new URL(redirectUrl).searchParams.get('code');
    // 这里调用Dropbox的token接口换取访问令牌
  });
  

  这种方式不需要自己维护redirect页面，Chrome会自动处理授权窗口的弹出和回调，完全绕开拦截问题。

2. 优化redirect.html的自动刷新逻辑 #

如果必须用自定义redirect页面，可以这么调整：

• 不要让Dropbox直接跳转到chrome-extension://地址，先跳转到一个线上中转页面，再由中转页面跳转到扩展的redirect.html；
• 或者在redirect.html里加延迟自动刷新，用location.replace替代普通刷新：

  <script>
    // 延迟1秒再刷新，给Chrome的拦截机制留处理时间
    setTimeout(() => {
      location.replace(location.href);
    }, 1000);
  </script>
  

  同时检查扩展的CSP配置，确保允许脚本执行：
  在manifest.json中添加：

  {
    "content_security_policy": "script-src 'self'; object-src 'none'"
  }
  

3. 改用Dropbox的无重定向授权模式 #

把Dropbox应用的redirect_uri改成urn:ietf:wg:oauth:2.0:oob，授权后Dropbox会显示一串授权码，让用户复制粘贴到你的扩展输入框里，再调用token接口换令牌。这种方式体验稍差，但完全不会有重定向拦截问题。

额外检查项 #

• 确认Dropbox后台配置的redirect_uri和扩展里用的完全一致，包括chrome-extension://EXTENSION_ID/redirect.html的路径和大小写；
• 本地开发时，必须通过chrome-extension://协议访问redirect页面，不能直接打开本地文件。

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