3

I've asked for help to understand how to implement correctly the message API for chrome extension, then I've implemented it in my code. The workflow is that the popup.js will send a message to my background script to let it know that the popup is opened and available to receive data, then the background script is sending a message to the content script that will grab the desired data and send back a response with these data. I get an error in the popup.js console: Uncaught TypeError: chrome.runtime.onMessage is not a function. I've also noticed that the content script is not fired on message, Is there any fix for this, what's wrong with the code?

popup.js

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    chrome.runtime.sendMessage({type:'init_popup_feed'});
      chrome.runtime.onMessage(function(message, sender, response){
        console.log(sender);
        if( message.type == 'feed_data' ){
          console.log(message.data);
        }
      });
  });
}(jQuery));

background.js

const s = [];
chrome.runtime.onMessage.addListener(function(message, sender, response){
  console.log(sender);
  console.log(message.type);
  if( message.type == 'init_popup_feed' ){
    chrome.runtime.sendMessage({type:'grab_feed'});
  }
  else if( message.type == 's_feed'){
    chrome.runtime.sendMessage({type:'feed_data',data:message.data});
  }
  //chrome.runtime.sendMessage({});
});

main.js - content script

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    const l = [];
    var d;
    chrome.runtime.onMessage.addListener(function(message, sender, response){
      console.log(message.type);
      if( message.type == 'grab_feed' ){
        // ... code stuff here ...
          sendResponse({type:'s_feed',data:l});
          console.log(l);
      }
    });
  });
}(jQuery));

UPDATE

I've modified the code according to the suggestion in the comments. Now I have an error in the background script console log : Error in event handler: TypeError: Error in invocation of tabs.sendMessage(integer tabId, any message, optional object options, optional function responseCallback): No matching signature. what's wrong with the chrome.tabs.sendMessage()?

background.js

var id;
chrome.runtime.onMessage.addListener(function(message, sender, response){
  console.log(message.type);
  if( message.type == 'extension_started'){
    console.log(sender);
    id = sender.tab.tabId;
  }
  else if( message.type == 'init_popup_feed' ){
    chrome.tabs.sendMessage(id, {type:'grab_stories'}, function(response){
        console.log(response);
        chrome.runtime.sendMessage({type:'stories_feed_data',data:response.data});
    });
  }
});
jihuuNI
  • 551
  • 2
  • 5
  • 17
  • 1) You have to use `chrome.runtime.onMessage.addListener` in `popup.js`, where you only used `chrome.runtime.onMessage`. 2) To send a message to a content script, you have to use `chrome.tabs.sendMessage`. – Iván Nokonoko Aug 30 '19 at 09:59
  • @IvánNokonoko Yes sir, I've noticed that there is the typo error in my code, and I've fixed the popup.js with this `chrome.runtime.onMessage.addListener`, I just need some guidance about the chrome tabs sendMessage method – jihuuNI Aug 30 '19 at 10:12
  • Check the [official documentation](https://developer.chrome.com/extensions/tabs#method-sendMessage) and extension samples. – Iván Nokonoko Aug 30 '19 at 10:13
  • I've read them, I just need to know how to obtain the tabId according to my code, maybe the `sender` var will work? – jihuuNI Aug 30 '19 at 10:16
  • Send a message from the content script to the background script. The message listener on the background script can then get the content script's tab's tabId by checking `sender.tab.tabId` from its arguments. – Iván Nokonoko Aug 30 '19 at 10:27
  • @IvánNokonoko ok, so the `chrome.tabs.query({active: true, currentWindow: true}, function(tabs){})` it's not required? I'm testing using this way and I get an error if I try to debug the popup in his own console. – jihuuNI Aug 30 '19 at 10:52
  • If I use chrome.tabs.sendMessage I get this error `Error in event handler: TypeError: Error in invocation of tabs.sendMessage(integer tabId, any message, optional object options, optional function responseCallback): No matching signature.` any fix? – jihuuNI Aug 30 '19 at 11:29
  • When you call `chrome.tabs.sendMessage` the variable `id` hasn't been initialised yet. – Iván Nokonoko Aug 30 '19 at 13:01
  • Yes, I've notice that behaviour, I've managed how to pass the messages between the scripts of my extension. Thanks for the support – jihuuNI Aug 30 '19 at 16:38

1 Answers1

0

I ran into this error when I loaded content scripts from a content script using a <script type="module"> tag.

The solution found here was to use the import import('path/your js file') function to import the scripts not a script tag.

Jerinaw
  • 5,260
  • 7
  • 41
  • 54