google-chrome-extension


Google Chrome extension communicate with Panel


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!
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.

Related Links

Extension reload seems to lose content script's CSS
Chrome Page Action click not working
Can a chrome extension content script detect if it is running in iframe or top-level?
Google Chrome Extension Store tester accounts-but how?
Is there a limit on number of requests to Chrome history API from an extension?
when URL does not exists it shows the alert twice? Chrome Extension Developing
how to popup my google chrome extension
Upload stuck on Chrome Extension
how do i set the browseraction popup width and height?
Using a remote script in a Google Chrome extension
Chrome extension and history.onVisited event
jQuery in Google Chrome Content Script?
Can a Chrome extension monitor XHR events (or other events) from the page it's running against?
Getting current window on a popup (google chrome extension)
Accessing browser events in chrome extension - DOM events in chrome extension
Chrome extension: Attaching current tab to popup and then going through its DOM

Categories

HOME
client
variables
gitlab
openmp
xmpp
google-docs
amortized-analysis
win32gui
baqend
ebean
ios-charts
pheatmap
cross-validation
vault
offline
event-handling
finite-automata
interop
code-review
nhibernate-envers
swingx
accessor
language-agnostic
jndi
lcd
firebase-crash-reporting
vlsi
facet
django-storage
internet-explorer-9
bootstrap-material-design
rst2pdf
applozic
log4js-node
gitignore
overriding
revolution-slider
serve
jquery-bootgrid
libvpx
jna
unoconv
android-tabhost
janrain
jvm-languages
isbn
sas-jmp
user-accounts
youcompleteme
jedis
tizen-native-app
font-size
flutterwave
titanium-android
angular-strap
vmware-tools
log4c
fody
skobbler-maps
transmitfile
clang-static-analyzer
react-native-listview
ubuntu-10.04
make-install
vhd
maven-tomcat-plugin
jms2
intel-fortran
wordml
kcachegrind
angular-leaflet-directive
generic-programming
oberon
website-monitoring
tween
qpainter
gadt
wordpress-theme-customize
zend-route
terminfo
yorick
valuechangelistener
imdbpy
oam
access-rights
flash-builder4.5
html4
dataadapter
yui-compressor
random-seed
mhtml
getmessage
appconkit
window-management
coredump
tomcat-valve
locationlistener
mirah
perfect-hash
simpletest

Resources

Encrypt Message