Send a variable from popup.js to background.js in Chrome Extension

Question

Before I start - yes I know there are some answers to similar questions, but none of them are complete. Ie you cannot use the info in the answers without documents that weren't included in the question.

So I'm trying to set up a scaffold to use in chrome extensions where I can type something in a field in the popup and it is stored in the background. I will probably then use this variable to call an API on the field (say a ZIP code for a weather app for instance).

All I am trying to do here is set the badge text to the message entered on the popup.

I've tried to use the code in other answers to this question, but I haven't been able to get anything to work, which is why I am keeping this very simple.

manifest.json (nothing crazy here):

{
  "name": "Popup to Background Communication",
  "description": "Chrome Extension Scaffolding for Communication between
    the popup and the background script.",
  "manifest_version": 2,
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

popup.html (shows a field with a sumbit button)

<!doctype html>
<html>

  <div class="field_entry">
    <p>Enter Message to be Sent:</p>
    <form id = "messageForm">
      <input type="text" id="messageToSend" />
      <input type="submit"/>
    </form>
  </div>

</html>

popup.js (listens for the submit and calls a function from background):

function sendToBackground() {
  var messageFromForm = document.getElementById("messageToSend");
  var background = chrome.extension.getBackgroundPage();
  background.setBadgeToMessage(messageFromForm);
}

document.getElementById('messageForm')
            .addEventListener('submit', sendToBackground);

background.js (holds the variable to change to the message from popup)

var badge = "0";

function setBadgeToMessage(msg){
  badge = msg;
  chrome.browserAction.setBadgeText(badge + "");
};

Nothing happens when I submit. I think what is wrong is that I am accessing a variable from popup.js that is local to background.js, but it seems like it should at least change the version copied to popup.js and change the badge.

Any help would be super appreciated. I've been beating my head against the wall on this for 2 days and it seems like a super simple issue.

Answer 1

You're almost there. However, you cannot pass a Element as a message to the Chrome API. The docs for browserAction.setBadgeText specify an object. Do it like so:

function sendToBackground() {
  var messageFromForm = document.getElementById("messageToSend").value;
 chrome.runtime.getBackgroundPage((background) => background.setBadgeToMessage(messageFromForm));

  ...
}

...

function setBadgeToMessage(msg){
  badge = msg;
  chrome.browserAction.setBadgeText({ text : badge });
}

Send a variable from popup.js to background.js in Chrome Extension

Question

1 answers

solution1
2 2019-07-01 00:52:41

Send a variable from popup.js to background.js in Chrome Extension

Question

1 answers

solution1 2 2019-07-01 00:52:41

solution1
2 2019-07-01 00:52:41