Chrome扩展集成Credential Manager API存储API凭证时遇到问题的解决方案咨询

我来帮你梳理下这个问题——Chrome扩展里使用Credential Manager API确实有不少坑，你遇到的弹窗不支持、后台没window的问题都是典型场景。下面给你几个可行的解决方案，按需选择：

1. 为什么弹窗里会报错？ #

Chrome的弹窗（Popup）属于受限的浏览器上下文，不支持Credential Manager API的PasswordCredential存储操作，这就是你看到NotSupportedError的原因。弹窗的设计初衷是轻量交互，很多浏览器原生API在这里都被限制了。

2. 首选方案：用内容脚本配合登录页面操作 #

如果你的登录操作是在某个网页上进行的，内容脚本是最适合的场景——它运行在网页的上下文里，拥有完整的window对象，完全支持Credential Manager API。

具体步骤：

• 在扩展的manifest.json里配置内容脚本，匹配你的目标登录页面：

  "content_scripts": [
    {
      "matches": ["https://your-login-page.com/*"],
      "js": ["content-script.js"]
    }
  ]
  

• 在content-script.js里监听登录表单的提交事件，获取凭证后调用存储代码：

  document.querySelector('form.login-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const uname = document.querySelector('#username').value;
    const pwd = document.querySelector('#password').value;
  
    if ("PasswordCredential" in window) {
      try {
        let cmAPICredential = new PasswordCredential({ 
          id: "extension", 
          name: uname, 
          password: pwd 
        });
        await navigator.credentials.store(cmAPICredential);
        // 可以通知扩展后台/popup存储成功
        chrome.runtime.sendMessage({ message: "credential_stored" });
      } catch (err) {
        console.error('存储凭证失败:', err);
      }
    } else {
      console.log('当前浏览器不支持PasswordCredential');
    }
  });
  

这样就能在用户登录时直接存储凭证，完全符合你的需求。

3. 替代方案：用Chrome原生的chrome.storage API #

如果你的需求只是安全存储密码供扩展内部使用，没必要非要用Credential Manager API——Chrome的chrome.storage是专门为扩展设计的存储方案，所有扩展上下文（Popup、后台、内容脚本）都能访问，而且Chrome会加密存储这些数据（同步存储还会加密传输）。

示例代码：

// 在Popup里存储凭证
chrome.storage.local.set({
  'api_credentials': {
    id: 'extension',
    name: uname,
    password: pwd
  }
}, () => {
  if (chrome.runtime.lastError) {
    console.error('存储失败:', chrome.runtime.lastError);
  } else {
    console.log('凭证已安全存储');
  }
});

// 在后台脚本里获取凭证
chrome.storage.local.get('api_credentials', (result) => {
  if (result.api_credentials) {
    const { name, password } = result.api_credentials;
    // 在这里使用凭证调用API
  }
});

这个方案比Credential Manager更简单，不需要依赖网页上下文，适合扩展内部使用的场景。

4. 硬要用上Credential Manager？试试扩展内部页面 #

如果你必须和系统的Credential Manager集成（比如让用户在系统钥匙串里看到凭证），可以打开一个扩展内部的独立页面（比如登录处理页）来执行存储操作：

• 在扩展里创建一个login-handler.html页面，引入对应的脚本。
• 在Popup里触发登录后，用chrome.windows.create打开这个页面，并传递用户名和密码参数：

  chrome.windows.create({
    url: `login-handler.html?uname=${encodeURIComponent(uname)}&pwd=${encodeURIComponent(pwd)}`,
    type: 'popup',
    width: 300,
    height: 200
  });
  

• 在login-handler.html的脚本里解析参数，执行你原有的Credential Manager存储代码，完成后关闭页面：

  const params = new URLSearchParams(window.location.search);
  const uname = params.get('uname');
  const pwd = params.get('pwd');
  
  // 执行你的存储代码...
  navigator.credentials.store(cmAPICredential).then(() => {
    window.close();
  });
  

总结 #

• 如果要和系统Credential Manager集成，优先用内容脚本（配合网页登录）或者扩展内部页面；
• 如果只是扩展内部用，chrome.storage是最省心的选择。

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