Chrome扩展Manifest V3本地存储userId报错排查及Token方案咨询

错误原因分析 #

你代码里的报错是ReferenceError: newId is not defined，问题出在存储ID的那一行：

window.chrome.storage.local.set({userId: newId});

你实际生成的用户ID变量是userId，但这里误用了未定义的newId，把变量名改成userId即可修复。

修正后的代码 #

const rand = function() {
    return Math.random().toString(36).substr(2); // remove `0.`
};

const getRandomToken = function() {
    return rand() + rand(); // to make it longer
};

window.chrome.storage.local.get('userId', (items) => {
    let userId = items.userId;
    
    if (userId === undefined) 
    {
        userId = getRandomToken();
        window.chrome.storage.local.set({userId: userId}); // 修正变量名，也可简写为{userId}
    }
});

其他生成随机Token的思路 #

1. 使用Web Crypto API生成安全随机串 #

Math.random()并非密码学安全的随机数生成器，对于需要高安全性的用户标识，推荐使用浏览器原生的Web Crypto API：

function generateSecureToken(length = 32) {
  const randomBytes = new Uint8Array(length);
  window.crypto.getRandomValues(randomBytes);
  return Array.from(randomBytes, byte => byte.toString(16).padStart(2, '0')).join('');
}

2. 生成UUID v4标识 #

UUID是通用唯一识别码，适合作为用户唯一标识，基于Web Crypto API的实现如下：

function generateUUIDv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ window.crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

3. 结合时间戳与随机数 #

如果需要兼顾唯一性和可追溯性，可以将时间戳与随机数结合：

function generateTimestampToken() {
  const timestamp = Date.now().toString(36);
  const randomStr = Math.random().toString(36).substr(2, 10);
  return `${timestamp}-${randomStr}`;
}

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