Opera扩展：Options页localStorage正常，内容脚本getItem返回null求解

• 浏览器扩展中，选项页和内容脚本处于不同的执行上下文，各自的localStorage完全隔离：
  • 选项页属于扩展自身的页面上下文，它的localStorage存储在扩展的独立域下
  • 内容脚本是注入到目标网页中的，它的localStorage属于当前访问的网页域，和扩展的存储体系不互通
    这就是选项页能读取到值、内容脚本返回null的核心原因。

改用扩展提供的chrome.storage API（Opera完全兼容Chrome的扩展存储规范），它是扩展全局共享的存储容器，所有扩展上下文（选项页、内容脚本、后台脚本）都能访问。

步骤1：更新选项页代码（options.js） #

function saveOptions() {
  chrome.storage.local.set({ secret: document.getElementById("secret").value }, () => {
    // 可选：添加保存成功的提示逻辑
  });
}

function restoreOptions() {
  chrome.storage.local.get("secret", (result) => {
    document.getElementById("secret").value = result.secret || '';
  });
}

// 初始化读取存储值
restoreOptions();
document.querySelector("form").addEventListener("submit", saveOptions);

步骤2：在内容脚本中读取存储 #

chrome.storage.local.get("secret", (result) => {
  alert(result.secret); // 现在能正确获取到选项页保存的值
});

步骤3：配置扩展权限 #

在扩展的manifest.json中添加存储权限声明：

{
  "permissions": ["storage"]
}

完成以上修改后，选项页保存的secret就能在内容脚本中正常读取。

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