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

Question

I'm trying to follow the example code for the newer style of making options pages . 我正在尝试按照新的样式制作选项页面的示例代码。 I've added an options.html and options.js file with the exact content that they list on that page. 我添加了一个options.html和options.js文件，其中包含他们在该页面上列出的确切内容。 I've also added the "options_ui" section to my manifest.json (and removed the trailing comma after '"chrome_style": true'). 我还在manifest.json中添加了“options_ui”部分（并删除了“chrome_style”之后的尾随逗号：true'）。

When I do this I am able to open the options window for the extension but the saving and loading functionality do not work. 当我这样做时，我能够打开扩展的选项窗口，但保存和加载功能不起作用。 I've tried adding in some console logs and alerts and these don't seem to be executing either. 我已经尝试添加一些控制台日志和警报，这些似乎也没有执行。 I can't find any errors or warnings anywhere but I just can't figure out how to get the JavaScript to execute. 我无法在任何地方找到任何错误或警告，但我无法弄清楚如何让JavaScript执行。 Does anybody know what I need to do differently? 有人知道我需要做些什么吗？

Edit: I'm adding the source files here to make it easier for people to scan through them and for posterity. 编辑：我在这里添加源文件，以便人们更容易扫描它们和后代。

manifest.json 的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 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 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

To use the chrome.storage API, you have to declare the storage permission in the manifest file. 要使用chrome.storage API，您必须在清单文件中声明 storage权限。

If you right-clicked on your options page, selected "Inspect element" (to open the devtools), and switched to the Console tab, then you would have received the "Cannot read property 'sync' of undefined" error. 如果右键单击选项页面，选择“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