chrome.storage 用于 Chrome 分机
chrome.storage for Chrome extension
我是 JavaScript 的新手,我正在创建一个扩展程序来保存用户数据以显示在特定页面(Google 课堂,具体而言)。我曾尝试使用 localStorage,但这会将其保存到特定页面的 local 存储中。我需要用户能够在 Chrome 中的 任何地方 保存和访问数据,并且我还需要它在新会话中可用。
综上所述,我需要三个功能。一种是将用户数据保存到 chrome.storage,一种是从 chrome.storage 中获取给定键的值,另一种是列出 chrome.storage.
中的所有键
manifest.json
{
"manifest_version": 2,
"name": "AssignMe for Classroom",
"short_name": "AssignMe",
"description": "Create your own assignments on Google Classroom.",
"version": "1.0",
"browser_action": {
"default_icon": "src/icon128.png",
"default_popup": "popup.html"
},
"icons": {
"16": "src/icon16.png",
"19": "src/icon19.png",
"48": "src/icon48.png",
"128": "src/icon128.png"
},
"content_scripts": [{
"matches": ["https://classroom.google.com/*/not-turned-in/all"],
"js": ["displayBackground.js"],
"run_at": "document_end"
}],
"permissions": [
"activeTab",
"storage",
"tabs",
"<all_urls>"
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="newAssignment" onsubmit="return display()">
<fieldset>
<legend><strong>New Assignment</strong></legend>
<strong>Title</strong>
<input type="text" id="title" spellcheck="false" name="title">
<br /><br />
<strong>Date</strong>
<input type="date" id="date" spellcheck="false" name="date">
<br />
<p id="demo">0</p>
<button type="button" id="do-count">Create Assignment</button>
<script src="content.js"></script>
</fieldset>
</form>
</body>
</html>
content.js
var title = document.getElementById("title").value;
var date = document.getElementById("date").value;
// Function that saves user data to chrome.storage
// Function that grabs user data from chrome.storage by key
// Function that grabs all keys from chrome.storage
试试这个。
curAssignment = 0;
// save data (you can use .local or .sync)
function saveData() {
chrome.storage.local.set({
Data: {
["Assignment" + curAssignment]: {
Title: title,
Date: date
}
}
}, function() {console.log("Data Saved");});
curAssignment = curAssignment + 1;
}
["Assignment" + curAssignment] 根据已保存的项目数量为新项目提供唯一 ID。
// load data
loadedAssignment = 0;
function loadData() {
chrome.storage.local.get(["Data"], function(results) {
while (loadedAssignment < results.Data.length) {
loadedTitle = results.Data[loadedAssignment].Title;
loadedDate = results.Date[loadedAssignment].Date;
// your code that handles the loaded data
loadedAssignment = loadedAssignment + 1;
}
curAssignment = results.Data.length;
});
}
loadData 函数循环遍历 chrome.storage.local 中的 "Data" 项目并获取存储项目的标题和日期。
根据Whosebug你可以使用
// get all items
function getAllItems() {
chrome.storage.local.get(null, function(items) {
var allKeys = Object.keys(items);
});
}
获取存储中的所有项目。
一种更奇特的方式(设置和获取),它也能处理错误:
const getStorageData = key =>
new Promise((resolve, reject) =>
chrome.storage.sync.get(key, result =>
chrome.runtime.lastError
? reject(Error(chrome.runtime.lastError.message))
: resolve(result)
)
)
const { data } = await getStorageData('data')
const setStorageData = data =>
new Promise((resolve, reject) =>
chrome.storage.sync.set(data, () =>
chrome.runtime.lastError
? reject(Error(chrome.runtime.lastError.message))
: resolve()
)
)
await setStorageData({ data: [someData] })
我是 JavaScript 的新手,我正在创建一个扩展程序来保存用户数据以显示在特定页面(Google 课堂,具体而言)。我曾尝试使用 localStorage,但这会将其保存到特定页面的 local 存储中。我需要用户能够在 Chrome 中的 任何地方 保存和访问数据,并且我还需要它在新会话中可用。
综上所述,我需要三个功能。一种是将用户数据保存到 chrome.storage,一种是从 chrome.storage 中获取给定键的值,另一种是列出 chrome.storage.
中的所有键manifest.json
{
"manifest_version": 2,
"name": "AssignMe for Classroom",
"short_name": "AssignMe",
"description": "Create your own assignments on Google Classroom.",
"version": "1.0",
"browser_action": {
"default_icon": "src/icon128.png",
"default_popup": "popup.html"
},
"icons": {
"16": "src/icon16.png",
"19": "src/icon19.png",
"48": "src/icon48.png",
"128": "src/icon128.png"
},
"content_scripts": [{
"matches": ["https://classroom.google.com/*/not-turned-in/all"],
"js": ["displayBackground.js"],
"run_at": "document_end"
}],
"permissions": [
"activeTab",
"storage",
"tabs",
"<all_urls>"
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="newAssignment" onsubmit="return display()">
<fieldset>
<legend><strong>New Assignment</strong></legend>
<strong>Title</strong>
<input type="text" id="title" spellcheck="false" name="title">
<br /><br />
<strong>Date</strong>
<input type="date" id="date" spellcheck="false" name="date">
<br />
<p id="demo">0</p>
<button type="button" id="do-count">Create Assignment</button>
<script src="content.js"></script>
</fieldset>
</form>
</body>
</html>
content.js
var title = document.getElementById("title").value;
var date = document.getElementById("date").value;
// Function that saves user data to chrome.storage
// Function that grabs user data from chrome.storage by key
// Function that grabs all keys from chrome.storage
试试这个。
curAssignment = 0;
// save data (you can use .local or .sync)
function saveData() {
chrome.storage.local.set({
Data: {
["Assignment" + curAssignment]: {
Title: title,
Date: date
}
}
}, function() {console.log("Data Saved");});
curAssignment = curAssignment + 1;
}
["Assignment" + curAssignment] 根据已保存的项目数量为新项目提供唯一 ID。
// load data
loadedAssignment = 0;
function loadData() {
chrome.storage.local.get(["Data"], function(results) {
while (loadedAssignment < results.Data.length) {
loadedTitle = results.Data[loadedAssignment].Title;
loadedDate = results.Date[loadedAssignment].Date;
// your code that handles the loaded data
loadedAssignment = loadedAssignment + 1;
}
curAssignment = results.Data.length;
});
}
loadData 函数循环遍历 chrome.storage.local 中的 "Data" 项目并获取存储项目的标题和日期。
根据Whosebug你可以使用
// get all items
function getAllItems() {
chrome.storage.local.get(null, function(items) {
var allKeys = Object.keys(items);
});
}
获取存储中的所有项目。
一种更奇特的方式(设置和获取),它也能处理错误:
const getStorageData = key =>
new Promise((resolve, reject) =>
chrome.storage.sync.get(key, result =>
chrome.runtime.lastError
? reject(Error(chrome.runtime.lastError.message))
: resolve(result)
)
)
const { data } = await getStorageData('data')
const setStorageData = data =>
new Promise((resolve, reject) =>
chrome.storage.sync.set(data, () =>
chrome.runtime.lastError
? reject(Error(chrome.runtime.lastError.message))
: resolve()
)
)
await setStorageData({ data: [someData] })