gpt4 book ai didi

javascript - 为什么 Javascript 在 Google 的新样式 Chrome 扩展选项页面示例代码中不起作用?

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:59:11 24 4
gpt4 key购买 nike

我正在尝试按照示例代码来制作新风格的 options pages .我添加了一个 options.html 和 options.js 文件,其中包含它们在该页面上列出的确切内容。我还在我的 manifest.json 中添加了“options_ui”部分(并删除了“chrome_style”: true 之后的尾随逗号)。

当我这样做时,我可以打开扩展的选项窗口,但保存和加载功能不起作用。我试过添加一些控制台日志和警报,但这些似乎都没有执行。我在任何地方都找不到任何错误或警告,但我就是想不出如何让 JavaScript 执行。有人知道我需要做些什么吗?

编辑:我在这里添加源文件是为了让人们更容易浏览它们并供后代使用。

list .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);

最佳答案

使用chrome.storage API,你必须declare list 文件中的 storage 权限。

如果您右键单击您的选项页面,选择“检查元素”(以打开开发工具),然后切换到“控制台”选项卡,那么您会收到“无法读取未定义的属性‘sync’”错误。

关于javascript - 为什么 Javascript 在 Google 的新样式 Chrome 扩展选项页面示例代码中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31493954/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com