Chrome 扩展弹出窗口不保留 chrome.storage.sync 的数据集
Chrome extension popup not persisting data set with chrome.storage.sync
我正在尝试构建一个主要由弹出式应用组成的 Chrome 扩展。问题是每当我点击弹出窗口(关闭它)时,我设置的数据就会消失。使用存储资源管理器扩展以及我自己的调试控制台日志,我可以确定它已设置为 chrome.storage.sync,但每次我重新打开它时,所有数据都消失了。
我是否从根本上误解了 API 的用途?我正在使用 React 并构建 popup.html,我没有 content.js 或 background.js。我是否需要发送消息以使数据持久保存?
这里是我的React中的相关代码App.jsx。我有一个同步功能,我用它来同步 allData
(这只是一个对象数组)和 componentWillMount:
中的数据 getter
const syncChanges = (allData) => {
chrome.storage.sync.set({ allData }, () => {
chrome.storage.sync.get('allData', data => console.log(data));
});
};
componentWillMount() {
// On app load, check if there's existing data. If not, set it.
chrome.storage.sync.get('allData', (allData) => {
console.log(allData);
if (allData.length) {
this.setState({ allData });
} else chrome.storage.sync.set({ allData: [] });
});
}
还有一点值得注意,在扩展的详细信息中它没有显示存储权限,即使我在我的 manifest.json 中设置了它,并且它没有给我使用 API 的错误.下面是我的完整 manifest.json,但我觉得还不错。
{
"name": "Leetcode Reminders",
"description": "A Chrome extension to remind users about Leetcode problems they should revisit.",
"manifest_version": 4,
"browser_action": {
"default_popup": "index.html",
"default_title": "Leetcode Reminders"
},
"version": "1.0",
"permissions": [
"storage",
"declarativeContent",
"tabs"
],
"icons": {
"64": "favicon.png"
}
}
chrome.storage.sync.get
callback 传递的是一个对象,其中数据作为键值属性,而不是直接传递给您的数据。因此,您的 allData
变量不是您保存的数组,而是包含它的对象。因此它没有 length
属性(除非您保存名为 length
的数据)。
因此,在每次打开时,您都将数据重置回空数组,因为 if(allData.length)
将测试为 false,因为 length
不存在。
检查适当的 属性 名称,在您的情况下 .allData
,看看您是否已经设置了数据
componentWillMount() {
// On app load, check if there's existing data. If not, set it.
chrome.storage.sync.get('allData', (result) => {
console.log(result.allData);
//use "in" check as a regular if(result.allData) will
//return false for empty arrays
if ( 'allData' in result ) {
this.setState({ allData });
} else chrome.storage.sync.set({ allData: [] });
});
}
我正在尝试构建一个主要由弹出式应用组成的 Chrome 扩展。问题是每当我点击弹出窗口(关闭它)时,我设置的数据就会消失。使用存储资源管理器扩展以及我自己的调试控制台日志,我可以确定它已设置为 chrome.storage.sync,但每次我重新打开它时,所有数据都消失了。
我是否从根本上误解了 API 的用途?我正在使用 React 并构建 popup.html,我没有 content.js 或 background.js。我是否需要发送消息以使数据持久保存?
这里是我的React中的相关代码App.jsx。我有一个同步功能,我用它来同步 allData
(这只是一个对象数组)和 componentWillMount:
const syncChanges = (allData) => {
chrome.storage.sync.set({ allData }, () => {
chrome.storage.sync.get('allData', data => console.log(data));
});
};
componentWillMount() {
// On app load, check if there's existing data. If not, set it.
chrome.storage.sync.get('allData', (allData) => {
console.log(allData);
if (allData.length) {
this.setState({ allData });
} else chrome.storage.sync.set({ allData: [] });
});
}
还有一点值得注意,在扩展的详细信息中它没有显示存储权限,即使我在我的 manifest.json 中设置了它,并且它没有给我使用 API 的错误.下面是我的完整 manifest.json,但我觉得还不错。
{
"name": "Leetcode Reminders",
"description": "A Chrome extension to remind users about Leetcode problems they should revisit.",
"manifest_version": 4,
"browser_action": {
"default_popup": "index.html",
"default_title": "Leetcode Reminders"
},
"version": "1.0",
"permissions": [
"storage",
"declarativeContent",
"tabs"
],
"icons": {
"64": "favicon.png"
}
}
chrome.storage.sync.get
callback 传递的是一个对象,其中数据作为键值属性,而不是直接传递给您的数据。因此,您的 allData
变量不是您保存的数组,而是包含它的对象。因此它没有 length
属性(除非您保存名为 length
的数据)。
因此,在每次打开时,您都将数据重置回空数组,因为 if(allData.length)
将测试为 false,因为 length
不存在。
检查适当的 属性 名称,在您的情况下 .allData
,看看您是否已经设置了数据
componentWillMount() {
// On app load, check if there's existing data. If not, set it.
chrome.storage.sync.get('allData', (result) => {
console.log(result.allData);
//use "in" check as a regular if(result.allData) will
//return false for empty arrays
if ( 'allData' in result ) {
this.setState({ allData });
} else chrome.storage.sync.set({ allData: [] });
});
}