CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Paul van den Dool
Paul van den Dool

Reputation: 3232

Can't communicate from content script to popup in Chrome extension

I'm trying my hand at my first Chrome Extension.
I've stumbled upon an issue where I can't communicate from the content script to the popup.

Context:
My popup contains some localStorage data that I want to retrieve from the content script at the refresh/init of a page so I can use that data on the page.

If I understand the official documentation correctly this should be possible.
It says:

"Sending a request from a content script looks like this:"

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

So I've tried that and I can see the above piece of code being triggered from the JS script I injected (the content script), but I'm guessing I'm not "listening for it" correctly in the popup.

This is my code:

Content script (function runs at runtime) 

function getLocalStorageItems() {
chrome.runtime.sendMessage({task: "retrieve-local"}, function(response) 
  {
    console.log(response.farewell);
  });
}

I've kept the example function as intact as possible.

Popup js 

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => 
  {
    if ( request.task == "retrieve-local" ) {
      console.log('retrieve-local');
  }
});

Manifest 

{
  "manifest_version": 2,
  "name": "Maxxton Dev Extension",
  "description": "Extension for Maxxton Developers",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["injected.js"],
      "run_at": "document_end"
    }
  ]
}

I never see the console.log being registered in the popup.

I thought it might have to do with the fact I'm trying chrome.runtime.onMessage since sending the message from the popup is chrome.tabs.query. So I tried changing it to chrome.tabs.onMessage, but that didn't do anything also.

Now I'm thinking it's maybe not even possible because the popup is dormant/not active. But I'm not sure. And I can't find anything about this issue.

Upvotes: 2

Views: 1217

Answers (1)

Daniel Möller
Daniel Möller

Reputation: 86650

I made this work with a background scritp. I don't know how "browser_action" works, but when I was trying with "page_action" I noticed the page was recreated whenever I clicked the button (so, it would probably not exist and not be listening if not currently popped).

I suggest that you keep your data in the background instead, and make both the content and the popup communicate with the background.

Add to your manifest:

"background": {
   "scripts": [
     //"you_probably_have_something_here_to_register_browser_action?", 
     "background_data_manager.js", //this will be your script to manage data
   ],
   "persistent": false
},

Put your listener and all the code to handle data inside the file background_data_manater.js.

To access the background console, go to the Chrome tools and open the extensions page with developer mode on. You will see a little link about views in your extension there. This link opens the console for the background.

You should see the expected logs in that console.

Upvotes: 2

Related Questions