1

I have reviewed this question/answer as well: Communicating between Chrome DevTools and content script in extension

It looks like they are doing something slightly different than I am trying to do, so I don't know how much it applies. Maybe I absolutely need a background.js file?

I have also reviewed this question: extension using background, content and devtools together

Here it looks like they are not using long-lived connections as documented here (which is what I need): https://developer.chrome.com/extensions/messaging#connect

Anyway, previous question aside here is my problem:

I have tried this a few ways over the span of a few hours so I am pretty convinced I am just missing something here to make this work.

The crux of my issue is that:

chrome.runtime.onConnect.addListener(function(){...})

the listener here will never fire.

Here's my setup:

My extension uses a Content Script and a DevTools page. From both locations, the Content Script and DevTools page, I have tried to enabling messaging though chrome.runtime. My boilerplate initialization looks like this for starting the connection:

console.log('initializing connection');
var port = chrome.runtime.connect({name: 'My Extension'});
console.log('port', port.name);

and this for waiting for onConnect:

chrome.runtime.onConnect.addListener(function(port){
    console.log('got connection!!!!!!');
});

My onConnect handler will never be invoked. I have tried placing the connection code (chrome.runtime.connect({...})) in the Content Script and in the DevTools page JS while placing the handler initialization the opposite location to no avail.

In other words, if I place the connection code in the Content Script, I will place the handler initialization into the DevTools page JS. If I place the connection code into the DevTools page JS I will place the handler initialization into the Content Script.

In both cases, I receive no runtime errors, however, I also never see the console.log('got connection!!!!!!'); get called. Yes, I am looking at the DevTools page console when I have the handler initialization located in the DevTools page JS.

I simply must just be misunderstanding something or missing something in the docs. Can anyone point me in the right direction re: having DevTools Page JS communicate with a Content Script?

Community
  • 1
  • 1
AJ Venturella
  • 4,742
  • 4
  • 33
  • 62
  • There's plenty of bugs with messaging in DevTools extensions. You should try to use the background as a proxy and only initiate connections from DevTools. – Xan Sep 23 '14 at 17:49

1 Answers1

0

As per Xan comment, communication between devtools extension and content scripts should be done through the use of a background script. The process is basically:

  1. (devtools script) - create the connection ( and sends or listens to messages through the connection port opened)

  2. (background script) - listen for the connection to be created, receiving the port and using it to listen or broadcast messages

This is useful if you want to keep a long lived connection, so basically you will need a couple of messages to be passed back and forward for a single process. If you want simple messages to be passed from time to time, but don't need multiple messages being passed back and forth then you might implement a more simple communication:

  1. (devtools script) - sends a message using the chrome.runtime.sendMessage

  2. (background script) - listens for messages send by any extension associated with it using the chrome.runtime.onMessage.addListener()

Marcos Abreu
  • 2,832
  • 22
  • 18