Chrome扩展MV3选项页数据存读异常及日志位置问题求助

问题描述 #

1. restore_options() 无法读取之前保存到 chrome.storage.sync 的数据，刷新选项页后会重置为默认值
2. 找不到选项页中 console.log 的日志输出位置，已检查popup和service worker的控制台

相关代码 #

manifest.json #

{"manifest_version": 3,"name": "Pondr","version": "0.0.0","description": "Time finds you.","icons": {"16": "assets/icons/pondr_16.png","48": "assets/icons/pondr_32.png","32": "assets/icons/pondr_48.png","128": "assets/icons/pondr_128.png"},"action": {"default_icon": "assets/icons/pondr_128.png","default_popup": "popup/popup.html"},"background": {"service_worker": "background.js"},"options_page": "options/options.html","permissions": ["tabs","alarms","storage","notifications","downloads"],"web_accessible_resources": [{"resources": ["options/options.html"],"matches": ["<all_urls>"],"extension_ids": []}]}

options.js #

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById("color").value;
  var likesColor = document.getElementById("like").checked;
  chrome.storage.sync.set(
    {
      favoriteColor: color,
      likesColor: likesColor,
    },
    function () {
      // Update status to let user know options were saved.
      var status = document.getElementById("status");
      status.textContent = "Options saved.";
      setTimeout(function () {
        status.textContent = "";
      }, 750);
    }
  );
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get(
    {
        favoriteColor: "red",
        likesColor: true,
    },
    function (items) {
      document.getElementById("color").value = items.favoriteColor;
      document.getElementById("like").checked = items.likesColor;
    }
  );
}
document.addEventListener("DOMContentLoaded", restore_options);
document.getElementById("save").addEventListener("click", save_options);

options.html #

<!DOCTYPE html>
<html>

<head>
    <title>My Test Extension Options</title>
</head>

<body>

    Favorite color:
    <select id="color">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
        <option value="yellow">yellow</option>
    </select>

    <label>
        <input type="checkbox" id="like">
        I like colors.
    </label>

    <div id="status"></div>
    <button id="save">Save</button>

    <script src="options.js"></script>
</body>

</html>

解决方案 #

问题1：无法读取storage数据，刷新后重置为默认值 #

• 检查Chrome登录状态：chrome.storage.sync 需要用户登录Chrome账号才能同步数据，未登录时数据不会持久化。可临时改用 chrome.storage.local 测试，排查是否为同步功能问题
• 验证数据保存状态：
  在save_options的回调中添加console.log('Saved data:', {favoriteColor: color, likesColor: likesColor})，确认保存参数正确；同时在扩展管理页的「检查视图」→「Application」→「Storage」→「Sync Storage」中查看是否存在目标键值对
• 移除冗余配置：manifest中的web_accessible_resources配置暴露options.html给所有网站，属于多余设置，删除该配置避免潜在冲突
• 确认函数执行时机：在restore_options开头添加console.log('Restoring options...')，验证函数是否触发。若DOMContentLoaded未生效，可直接在脚本末尾调用restore_options()
• 检查键名一致性：确认保存和读取的键名（favoriteColor、likesColor）完全一致，无拼写错误

问题2：找不到选项页的console.log日志 #

选项页控制台独立于popup和service worker，打开方式：

• 方式1：打开扩展管理页，找到目标扩展→点击「详细信息」→打开选项页后按F12/Ctrl+Shift+I唤起开发者工具
• 方式2：直接打开选项页，右键空白处选择「检查」，调出的控制台即为选项页日志输出位置

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