为什么Javascript不适用于新版Chrome扩展选项页面的Google示例代码？

Question

我正在尝试按照新的样式制作选项页面的示例代码。 我添加了一个options.html和options.js文件，其中包含他们在该页面上列出的确切内容。 我还在manifest.json中添加了“options_ui”部分（并删除了“chrome_style”之后的尾随逗号：true'）。

当我这样做时，我能够打开扩展的选项窗口，但保存和加载功能不起作用。 我已经尝试添加一些控制台日志和警报，这些似乎也没有执行。 我无法在任何地方找到任何错误或警告，但我无法弄清楚如何让JavaScript执行。 有人知道我需要做些什么吗？

编辑：我在这里添加源文件，以便人们更容易扫描它们和后代。

的manifest.json

{
  "manifest_version": 2,

  "name": "My extension",
  "description": "test extension",
  "version": "1.0",
  "options_ui": {
    // Required.
    "page": "options.html",
    // Recommended.
    "chrome_style": true
    // Not recommended; only provided for backwards compatibility,
    // and will be unsupported in a future version of Chrome (TBD).
    //"open_in_tab": true
  }
}

options.html

<!DOCTYPE html>
<html>
<head>
  <title>My Test Extension Options</title>
  <style>
    body: { padding: 10px; }
  </style>
</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>

options.js

// Saves options to chrome.storage.sync.
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);

Answer 1

要使用chrome.storage API，您必须在清单文件中声明 storage权限。

如果右键单击选项页面，选择“Inspect element”（打开devtools），并切换到Console选项卡，那么您将收到“无法读取属性'同步'未定义”错误。

为什么Javascript不适用于新版Chrome扩展选项页面的Google示例代码？

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-07-18 20:10:56

为什么Javascript不适用于新版Chrome扩展选项页面的Google示例代码？

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-07-18 20:10:56

解决方案1
3 已采纳 2015-07-18 20:10:56