0

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

}

John
  • 33
  • 10
  • Your code in the background script runs before the content script sets the value. Depending on what you want to achieve there are several solutions, so please add more code and info to clarify the workflow so we can see conditions/timing of each piece. – wOxxOm Jun 14 '22 at 07:17
  • @wOxxOm I added the description. By the way how can I view what data is currently stored in Chrome.storage? I know how to view background storage data but it seems it does not get stored there. – John Jun 14 '22 at 08:12
  • Use `fromPanel` variable inside the callback, not outside, because it's asynchronous. See also [Inspect extension's chrome.storage in devtools](https://stackoverflow.com/q/32435399) – wOxxOm Jun 14 '22 at 08:45

0 Answers0