我有一个在 Option.html 文件中声明的元素，并保存到 Option.js 中的 chrome 存储中。我想访问该元素的值，以便可以在 Content.js 中使用它。有什么可能的办法吗？
我尝试在 Content.js 中通过元素的 ID 调用该元素，但没有成功!它给出“无法读取 null 的属性‘值’”，因此我假设它没有读取该元素(因为它不在同一个文件中)。
这是我所拥有的:
选项.html:
<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>
waiting time:
<select id="waitingTime">
<option value="oneMin">1 minute</option>
<option value="TwoMin">2 minutes</option>
<option value="FourMin">4 minutes</option>
<option value="FiveMin">5 minutes</option>
</select>
<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
选项.js:
// Saves options to chrome.storage
function save_options() {
var color = document.getElementById('waitingTime').value;
chrome.storage.sync.set({
favoriteColor: waitingTime,
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
});
}
Content.js(我在其中调用元素):
....
//the line I'm calling the element
var timeout = document.getElementById('waitingTime').value;
....
Manifest.json(我添加了选项和权限):
....
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage", "activeTab"],
"options_page": "options.html",
....
如果您能帮我找到一种从 content.js 文件访问“waitingTime”值的方法，我将不胜感激! (或任何达到此目的的替代解决方案)。
最佳答案
您已将选项中的值保存到 Chrome 存储中，因此现在您只需从那里读取它即可。由于 content script 和 option 位于不同的上下文中，因此我们所要做的就是找到这两个上下文可以连接到的位置，在本例中是 Chrome Storage 。就像这样:
options.js
// Saves options to chrome.storage
function save_options() {
var color = document.getElementById('waitingTime').value;
chrome.storage.sync.set({
favoriteColor: waitingTime,
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
});
}
content-script.js
chrome.storage.sync.get('favoriteColor', function(result) {
if (result && result.favoriteColor) {
// You can use it here: result.favoriteColor
}
});
我想提的一件事是 chrome.storage.sync 和 chrome.storage.local，您可能已经知道了，但以防万一。
chrome.storage.sync，在您使用帐户登录的Chrome浏览器之间同步数据，以同步浏览数据，此具有读/写limitationchrome.storage.local不会同步数据，基本上它只是将您的数据存储在您安装了扩展程序的浏览器上。该函数有存储大小限制(最多只能存储5,242,880字节)，您可以读取this document来增加它。
关于javascript - 如何在 Chrome 扩展中调用 OPTION.html 页面中声明的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58243832/