Safari Web Extension存储数据位置及JS查看/获取方法咨询

一、代码层面验证与读取存储数据 #

1. 先确认权限配置 #

必须在扩展的manifest.json中声明storage权限，否则API调用会静默失败：

{
  "permissions": ["storage"]
}

如果是Manifest V3版本，无需额外配置其他权限，确保上述声明存在即可。

2. 正确调用存储API并验证写入 #

不管使用chrome.storage还是browser.storage，调用后要通过回调或Promise确认写入状态，同时读取验证：

// 回调式写法（兼容Manifest V2/V3）
chrome.storage.local.set({inputFieldName: '测试内容'}, () => {
  if (chrome.runtime.lastError) {
    console.error('存储失败:', chrome.runtime.lastError);
  } else {
    chrome.storage.local.get('inputFieldName', (result) => {
      console.log('已存储的数据:', result.inputFieldName);
    });
  }
});

// Async/Await写法（Manifest V3推荐）
async function checkStorage() {
  try {
    await browser.storage.local.set({inputFieldName: '测试内容'});
    const data = await browser.storage.local.get('inputFieldName');
    console.log('已存储的数据:', data.inputFieldName);
  } catch (err) {
    console.error('存储出错:', err);
  }
}
checkStorage();

执行代码时要打开扩展自身的开发者工具：右键扩展图标→选择“检查扩展”，在Console面板运行代码即可看到结果。

3. 开发者工具中查看存储数据 #

在扩展的开发者工具里，切换到Storage标签页，选择对应存储类型：

• 用local存储就选Local Storage
• 用sync存储就选Sync Storage
  注意：必须是扩展专属的开发者工具，网页的开发者工具看不到扩展的存储数据。

二、本地文件系统中的存储位置 #

macOS系统路径 #

• Local存储：~/Library/Safari/Extensions/[你的扩展ID]/Local Storage/
• Sync存储：~/Library/Safari/LocalStorage/（和Safari自身同步数据混合，不建议手动修改）
  扩展ID可在Safari偏好设置→扩展→选中你的扩展后，在下方查看。

⚠️ 手动修改本地存储文件可能导致数据损坏或扩展异常，优先通过API操作数据。

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