1

I have a simple, working chrome extension that sets and gets values on chrome.storage.

I am not able to retrieve the key-value pair I set manually (by manually, I meant through chrome developer tool). I have tried typing on dev tool console

chrome.storage.sync.get(null, function(items) {
    var allKeys = Object.keys(items);
    console.log(allKeys);
});

returns 

`Uncaught TypeError: Cannot read property 'sync' of undefined
    at <anonymous>:1:16`

(reference)

I tried different varieties on chrome devtool console, but it seems like on console chrome.storage always returns undefined.

This is what the app does. It is a simple text area that sets and gets a predefined key value.

popup.html

    <textarea rows="10"  cols="15" id="texti"></textarea>
    <button id="buttoni">Sat value</button>

    <button id="button_geti">Get value</button>
    <script src="popup.js" ></script>

popup.js

const texti = document.getElementById("texti")
const buttoni = document.getElementById("buttoni")
const button_geti = document.getElementById("button_geti")

buttoni.addEventListener("click", () => {
    chrome.storage.sync.set({"awesomeKey": texti.value}, function() {
        alert('Value is set to ' + texti.value);
    });
})

button_geti.addEventListener("click", () => {
    chrome.storage.sync.get(["awesomeKey"], (result) => {
        alert("Key is " + result.awesomeKey)
    })
})

Again, the above works, but I can't figure out a way to "pry" into my key-values manually.

I also checked Application tab but it has nothing. I don't see any awesomeKey key defined anywhere.

How can I access/ debug chrome.storage on devtools?

Iggy
  • 5,129
  • 12
  • 53
  • 87
  • 1
    To run it in console of a web page where your content script runs you need to [switch the context](https://www.telerik.com/sfimages/default-source/blogs/2018/2018-09/contexts-in-dojo.png) to your extension first. See also [Inspect chrome.storage.sync while debugging Chrome extension](//stackoverflow.com/a/32471596). Note the popup is a separate window so it has separate devtools accessible by right-clicking the popup then clicking "Inspect". – wOxxOm Dec 03 '18 at 14:14
  • 1
    @wOxxOm I tried both, but still not seeing it. The extension only shows `localStorage` and `sessionStorage`, no `storage`. I tried changing the context but on the dropdown, I don't see the name of my local extension. – Iggy Dec 03 '18 at 19:40
  • 1
    That extension works only on own pages of your extension. Both the popup and the background script are separate pages that have their own separate devtools, which you should open. – wOxxOm Dec 04 '18 at 04:27

0 Answers0