I am developing a Chrome
extension and I try to capture some information from host page using my content.js
and the store it in a way that background.js
and popup.js
can access it. To test I use below code in my content.js
:
chrome.storage.local.set({"fromContent": "This is a test"}, function() {
if(chrome.runtime.lastError) {
console.error(
"Error " + chrome.runtime.lastError.message
);
}
});
And when I tried to retrieve it in background.js
I get undefined:
chrome.storage.local.get("fromContent", function(data) {
console.log(data);
});
And I have set storage
in permissions
part of manifest.json
file:
{
"manifest_version": 2,
"name": "Test",
"description": "Test",
"version": "0.01",
"permissions": [
"storage",
"tabs"
],
"content_scripts": [
{
"run_at": "document_end",
"matches": ["https://*/"],
"js": ["js/lib/jquery-3.5.1.min.js","js/app/content.js"],
"css": ["css/bootstrap-iso.css","css/confirm.css","css/popup.css"]
}
],
"background": {
"scripts": ["js/lib/jquery-3.5.1.min.js","js/app/background.js"]
},
"browser_action": {
"default_popup": "views/popup.html",
"default_icon": "images/icon_32x32.png"
},
"web_accessible_resources": [ "/images/*" ]
}
finally I can pass messages between my scripts but I want to use storage.
EDIT: App description. When user visits a website which he already has coupon codes on it they get listed and shown to user and he can select one. But there is also my website which lists all the available coupons. I actually add an event listener for all cards and when user clicks on one of them,content.js
saves the data of card to storage and a new tab with website link opens and in targeted website content.js
sends a coupon list request to background.js
(switch case) and it checks whether it is from the coupon panel by checking the storage for the flag and coupon id and just queries the specific coupon that user clicked, removes the flag from storage and sends the response back to content.js
which applies it (No more listing of all related coupons for that website).
background.js:
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
switch (message.type) {
case "couponcheck":
let couponCheck = message.data;
console.log('couponCheck was hit', couponCheck.website);
var fromPanel;
chrome.storage.local.get("fromPanel", function (data) {
fromPanel = data;
});
if (fromPanel && fromPanel !== false){
couponCheck.id = fromPanel.id;
couponCheck.username = fromPanel.username;
ajaxCall("POST", "user/couponCheck", couponCheck, '', function(response){
console.log('response from server is: ',response);
sendResponse(response);
});
chrome.storage.local.set({"fromPanel": false}, function() {
if(chrome.runtime.lastError) {
console.error(
"Error setting " + key + " to " + JSON.stringify(data) +
": " + chrome.runtime.lastError.message
);
}
});
}
else {
ajaxCall("POST", "user/couponCheck", couponCheck, '', function (response) {
console.log('response from server is: ', response);
sendResponse(response);
});
}
}
})
content.js:
URL = window.location.href;
if (URL.indexOf("couponPortal") !== -1) {
// code that adds event listeners and gets their data on click
chrome.storage.local.set({"fromPanel": data}, function () {
if (chrome.runtime.lastError) {
console.error(
"Error setting " + key + " to " + JSON.stringify(data) +
": " + chrome.runtime.lastError.message
);
}
});
} else {
sendToBackground('couponCheck', {URL});
//other parts of code
}