Google Chrome extension communicate with Panel - google-chrome-extension

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

Should I use electron's webview to emulate a browser?

I want to write a browser for some purpose using electron and I choose the <webview> tag to emulate the browser page.
It has a toolbar which contains back forward refresh buttons.
I bind the new window event, in the handler I just create a new <webview> tag for that url.
However, I found that there are some limits.
1. window.opener in new <webview> is null
2. <form> with method="POST" can't be handled correctly, because there are no solutions to get postData from new-window event.(But there is probably a PR for this: https://github.com/electron/electron/pull/19703)
Perhaps I'm wrong from the start. I shouldn't use electron for this purpose? But I don't know much about c#/c++...
I do not recommend to use <webview> at the moment as its usage is strongly discouraged by the Electron team. The recommendation is to use a BrowserView instead (see documentation).
Using Electron to build a web browser should work fine, there is actually a similar project called Wexond. You could check it out as a starting point for your own browser.

Devtools chrome extension: Run script at start of every frame/page load?

I'm writing a devtools Chrome extension with a dev panel. The devtools script can use chrome.devtools.inspectedWindow.reload to reload the page and run a script before other scripts run (in every frame in the inspected window). However, the injected script is no longer run for subsequent page reloads and newly created frames.
How can I inject a script into the inspected window that is run at the start of every subsequent page load in the inspected window?
I know I can use a content script that runs at document_start, but that would run the script at the start of each page load regardless of whether the dev panel is open - and the script is intensive, so I'd like to avoid running the script when it's not needed.
Could the devtools script somehow listen for the beginning of page loads in the inspected window and respond by running a script in the page's context?
One option that you can use to avoid running the script when it's not needed, as you have said, is programmatic injection. As discussed:
Inserting code into a page programmatically is useful when your JavaScript or CSS code shouldn't be injected into every single page that matches the pattern — for example, if you want a script to run only when the user clicks a browser action's icon.
To insert code into a page, you must have the following:
your extension must have cross-origin permissions for the page.
It also must be able to use the chrome.tabs module.
You can get both kinds of permission using the manifest file's permissions field.
Once you have permissions set up, you can inject JavaScript into a page by calling tabs.executeScript.
As also discussed in chrome.devtools.inspectedWindow in executing code in the inspected window, use the tabs.executeScript method unless you need the specific functionality that the eval method provides.
However in Communicating Between Extension Components, please note that:
The DevTools page can't call tabs.executeScript directly. To inject a content script from the DevTools page, you must retrieve the ID of the inspected window's tab using the inspectedWindow.tabId property and send a message to the background page. From the background page, call tabs.executeScript to inject the script.
You may go through the given documentations for more information and examples.

How to use dropbox API from chrome extension content script?

If I write a chrome extension, it normally consist of multiple parts:
One is the devtools page which is a normal HTML page with origin set to
"chrome-extension://<guid>/filename". On that page I can use
the Dropbox API to get user confirmation via HTML popup and then use
the saved auth info and do all work via the Dropbox javascript library.
Another part of extension is the content script which is executed
in the context of specified third-party web pages ("injected") and have
origin cookies and web storage shared with them.
Is it possible to also use the Dropbox JavaScript library in that content script?
I can't call authenticate in interactive mode since it will re-ask for confirmation for each different webpage I'm injected into. And calling authenticate without interactive will fail since the content script doesn't share the origin, cookies and web storage with the devtools extension page :(. Maybe there's some way to "pass" the Dropbox auth info from the part of the extension that offers GUI and where user successfully confirms dropbox usage to the parts of the extension that are GUI-less, like content script or background page?
I have managed to get Facebook working from code injected into a web app via a content script. I suspect there are multiple ways, but what I did was take advantage of the chrome.identity API to do the OAuth work for me, specifically the launchWebAuthFlow().
This can only be done in the background page (in my case an event page), but I send messages to the event page which replies with the access_token, which can then be used in URLs in the same was as the 'web' technique - i.e. in HTTP requests with XHR.
You can send/receive messages via the content script (using events on document), but I decided to do it directly using "external" messages with the chrome.runtime.sendMessage() API in the web app context, and chrome.runtime.onMessageExternal() in the background script. This requires adding "matches" for the URLs you're injecting code into in an "externally_connectable" section of the manifest.json.
I believe this can be adapted to make it work with Dropbox.

Method(s) used to pass data to and from WebKit based browser

I'm using WebKitGTK+ ( WebKit ) application that will be a very simple web browser running in a Linux environment as a separate executable that will need to exchange data between another application. The system is described in the following image:
Example scenario:
Event such as smart card insertion detected in Backend processing Application
smart card data is read and passed to the WebKitGTK+ GUI Application
User interacts with "web page" displayed in WebKitGTK+ Application
Data is passed from WebKitGTK+ Application back to the Backend processing Application
What are the common methods of passing data between the WebKitGTK+ Application and the Backend processing Application?
Does `WebKitGTK+ provide some hooks to do this sort of thing? Any help at all would be appreciated.
I know this is a old question, but will try to answer it to best of my abilities so that it can be useful to someone else.
Webkit is basically rendering a html page. You can connect to various signals that webkit provides and act on these signals. More details at http://webkitgtk.org/reference/webkitgtk/stable/webkitgtk-webkitwebview.html
For your back end application, if something interesting happens, you can update page either by navigating to a new url, new page contents or just by setting text of desired element. Webkit provides DOM api functions and all of these are possible.
It becomes interesting when getting data from webkit and sending it to your back end system. Again, this depends upon your specific design, but generally you can hook up signals such as navigation signals when user clicks on a button and get contents. Another alternative is to use alert handler and simply use javascript alert and process the alert data on backend side.
Shameless plug for example : https://github.com/nhrdl/notesMD. It uses a simple database backend, probably can be good use case as it sends data back and forth between database and webpage. Even manipulates the links so that desired actions take place.

How can I pass a message from outside URL to my Chrome Extension?

I know there's a way for extensions and pages to communicate locally, but I need to send a message from an outside URL, have my Chrome Extension listen for it.
I have tried easyXDM in the background page, but it seems to stop listening after awhile, as if Google "turns off" the Javascript in the background page after awhile.
I think you may try some walk around and build a site with some specific data structure, and then implement a content script which will look for this specific that specific data structure, and when i finds one it can fetch the data you want to be passed to your extension.
Yes, you need a content script that communicates with the page using DOM Events.. Instructions on how to do that are here:
http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication

Resources