Javascript Chrome扩展:在后台存储数据
我希望能够在后台(在我的扩展上)存储数据,以便可以在多个域之间访问这些数据 我在做什么: content script.jsJavascript Chrome扩展:在后台存储数据,javascript,google-chrome-extension,local-storage,Javascript,Google Chrome Extension,Local Storage,我希望能够在后台(在我的扩展上)存储数据,以便可以在多个域之间访问这些数据 我在做什么: content script.js function setItem(name, data) { chrome.extension.sendMessage({ command: 'setItem', name: name, data: data }); } function getItem(name) { chrome.extension.sendMessage({ command: 'g
function setItem(name, data) {
chrome.extension.sendMessage({ command: 'setItem', name: name, data: data });
}
function getItem(name) {
chrome.extension.sendMessage({ command: 'getItem', name: name }, function(response) {
return response;
});
}
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch (request.command) {
case 'setItem':
localStorage.setObject(request.name, request.data);
return;
case 'getItem':
sendResponse(localStorage.getObject(request.name));
return;
}
});
后台脚本.js
function setItem(name, data) {
chrome.extension.sendMessage({ command: 'setItem', name: name, data: data });
}
function getItem(name) {
chrome.extension.sendMessage({ command: 'getItem', name: name }, function(response) {
return response;
});
}
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch (request.command) {
case 'setItem':
localStorage.setObject(request.name, request.data);
return;
case 'getItem':
sendResponse(localStorage.getObject(request.name));
return;
}
});
但是没有成功,因为我无法在getItem上从回调内部返回
我确实在函数(response){}
回调中获取了数据,但我不能将其作为getItem的返回返回
我应该怎么做?Content.js
var someVar = "hey hey!";
chrome.extension.sendRequest({method: "fromContentScript",greeting: someVar}, function(response) {
console.log(response.data); // response back from BG
if(response.who == 'bg'){ // checks if the response is from BG
//Something happened ...
}
var responseFromBg = response.data; // the response incase we need to use the message sent back... in this case should be 'hey yourself'
});
Background.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
// From content script.
if (sender.tab) {
if (request.method == "fromContentScript"){
localStorage.setItem("welcome-message",request.greeting); // in this case there will now be a localStorage variable called 'welcome-message' set with the value of 'hey hey!'. This will be viewable in the chrome:extensions page, click on the 'background.html / generated background.html' then view the 'Development Tools' or in Windows hit 'CTRL + SHIFT + I' and look at the 'LocalStorage' tab...
sendResponse({who: "bg",data: "hey yourself"}); // this is the response sent back, 'who' tells the content page where is responding, so it can do something with the response if needed.
}else{
sendResponse({}); // snub them.
}
}
});
Manifest.json//以防您遇到清单问题。。。这是我的大部分
{
"name": "Name here",
"version": "1",
"manifest_version": 2,
"description": "Enter desc here.",
"browser_action": {
"default_icon": "img/icon16.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "*://*/*"
],
"icons": { "16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png" },
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["js/jquery-1.7.2.min.js","content_script.js"],
"run_at": "document_end"
}
]
}
我会以你为例,但今天早上我很忙。我已经尽可能仔细地解释了所有的变量-抱歉:(这个2012年的问题是为了得到最新的答案而提出的。那么 现在正确的答案是使用。它是一个可用于扩展页面和内容脚本的API,并且提供异步存储。它需要
存储“
权限,但此权限不会生成警告
// Setting
chrome.storage.local.set({key: data}, function() {
if(chrome.runtime.lastError) {
console.error(
"Error setting " + key + " to " + JSON.stringify(data) +
": " + chrome.runtime.lastError.message
);
}
});
// Getting
chrome.storage.local.get("key", function(data) {
// Do something with data.key
});
另请参见文档的一部分
请注意,在任何一种情况下(这种方法或后台消息传递方法),都不能生成返回结果的函数getData
,因为调用是异步的
一些提示和技巧:
null
查询,可以读取所有值{key:defaultValue}
chrome.storage.onChanged
事件通知对存储的所有更改chrome.storage.local
遵守的“无限制存储”
权限chrome.storage.sync
会将该值传播到登录到同一Google帐户的所有配置文件,前提是启用了chrome sync进行扩展。但是,请记住chrome.storage
支持的本地缓存来伪造它。但是,存在一些限制:在同步代码块中,缓存不会随其他页面的更改而更新,并且您需要异步读取一次值来填充缓存后台脚本.js:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch (request.command) {
case 'setItem':
localStorage[request.name] = JSON.stringify(request.data));
return;
case 'getItem':
var retValue;
if (typeof(localStorage[request.name]) === 'string') {
retValue = JSON.parse(localStorage[request.name]);
}
sendResponse(retValue);
return;
case 'deleteItem':
if (typeof localStorage[request.name] !== 'undefined') {
delete localStorage[request.name];
}
return;
}
});
如果键不在localStorage中,getItem将返回未定义的。您不应该像以前那样定义函数getItem
,而应该通过回调将消息发送到后台,然后在调用回调时使用该值执行操作。您不能从函数getItem
返回值,但调用回调时,可以使用回调中的值:
function getItem(name, callback) {
chrome.extension.sendMessage({command: 'getItem', name: name}, function(response) {
if (typeof(callback) === "function") {
callback(response);
}
});
}
sendRequest和onRequest是deprecated@Chris我尝试了你的例子,但不幸的是没有用,你能帮我吗:)1我不知道在哪里可以看到我创建的数据库,2我使用了你的背景js
和内容js
,但是没有帮助,你需要使用扩展页面打开背景页面,然后F12并查看“资源”选项卡下的本地存储,同时确保在保存对象时不使用“历史”等保留关键字。。。在这件事上浪费了太多时间。