Search code examples
javascriptgoogle-chromegoogle-chrome-extension

Struggling with local storage for a Chrome Extension

I'm struggling with trying to develop a simple Chrome Extension for my "portfolio".

What I want to do is really simple. I think I can do it in two different ways! First way:

  • I have an input field into my popup.html. What I want to do is get the text prompted into this input field and save it into the storage. After that, into my contentScript, I want to read the text/field saved into the storage and use it for some JS logic.

So, basically this is the input from popup.html:

<input class="custom-input-script-length" type="text" name="custom" id="values-input"/>

This is a function that get as parameter the value from the input. It's declared/called inside my popup.js:

function saveValue(value) {
     if(value !== '') {
         chrome.storage.local.set({'valuesInput': value}, function() {
             console.log("Values saved!");
         })
     }
}

Now, I've tried many ways to read the value directly from the chrome tab (not from the extension, I've tried into the contentScript) but it never works, it will always return an "undefined".

How should I read that value?

What my extension must do it's just grab the entire responseHeader and search for a specific value from the toString (for example: cache-control). If it will find it it will just show the value into a new div added into the DOM, that's all.

Another solution could be send/read the entire responseHeader from the chrome tab from inside the popup but even in this way it never works. All I get is "undefined" or the responseHeader of the extension context...

Do you have any advice?

I'm usind the Manifest V3 and I already have the storage permissions added into it.

Thanks for everyone who will answer!

Solution

  • This is a response to OP's question which is too long for a comment.

    The only way I could reproduce the problem was by trying to set the popup input value before the page had completed loading. The Chrome storage method calls worked as expected. To avoid problems, initialization code should be loaded at the end of the page or else wrapped in a DOMContentLoaded event.

    OP also asks how to pass the stored value between popup and content pages. And in this case the content page can read the value directly from storage, which is shared between the pages. The content page may also receive notifications when the value changes by using the chrome.storage.onChanged event.

    The relevant parts of the Chrome extension are shown below:

    popup.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Popup</title>
  </head>
  <body>
    <input class="custom-input-script-length" type="text" name="custom" id="values-input"/>
    <!-- script must load last -->
    <script src="scripts/popup.js"></script>
  </body>
</html>

    popup.js

      let valuesInput = document.getElementById("values-input");

  valuesInput.addEventListener("change", (event) => {
    chrome.storage.local.set({valuesInput: valuesInput.value});
  })

  chrome.storage.local.get('valuesInput', function(obj) {
      if(obj.valuesInput !== undefined && obj.valuesInput !== '') {
          valuesInput.value = obj.valuesInput;
      }else {
          console.log("input field can't be empty.");
      }
  });

    content.js

    let valuesInput = null;

chrome.storage.local.get('valuesInput', (result) => {
  console.log('storage.get', result);
  valuesInput = result.valuesInput;
})