0

I'm trying to develop a simple Chrome extension. It just have to access to an object myVar from my web page and print it into a panel as a table. (I'm using Yeoman generator, so basically everything is there)

background.js // to add a runTime.onMessage listener
contentscript.js // to inject custom.js, add a listener to a custom event and fire the runTime.sendMessage
custom.js // to retrieve myVar and dispatch the custom event.
devtools.js // to create the extension Panel

devtools.html // contains just devtools.js
panel.html // basic html structure of my panel, no js.

So, what I was able to do is to inject a custom script into the web page and use event listeners and chrome messaging to pass MyVar.

What I'm missing is how to interact with the panel, I'm kind of lost.

Once it's initialized I don't know how to debug, access its DOM, communicate with background.js or contentscript.js.

Any ideas?

thank you!

Daniele
  • 829
  • 1
  • 13
  • 23

1 Answers1

1

Once it's [the panel] initialized I don't know how to debug, access its DOM, communicate with background.js or contentscript.js.

  • To debug it, you can detach the Dev Tools panel into a window and then invoke Dev Tools for that with Ctrl/Cmd + Shift + I.

  • It's a frame, so it's a self-contained document; to access its DOM you'll need a script in there.

  • To communicate, a devtools panel has access to chrome.runtime messaging functions to initiate communication with the background, even though it seems that the other way is impossible. It's usual to open a port with chrome.runtime.connect, with corresponding chrome.runtime.onConnect in the background script, and use it for two-way communication. Bonus, the sender object will contain the tab ID that DevTools is attached to.

  • Direct communication with a content script is impossible; you need to use the background as a proxy. Here's an old but thorough answer.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206