Chrome Extensions accessing header information - google-chrome

I am on a mission to expand my knowledge and create an extension for chrome similar to how firephp works. I want to integrate with my existing logging and debugging api within my framework and I want to be able to send these messages to the console. Nothing really robust to start with just a way to send debug messages to the chrome console from php.
The plan is to send the messages via the headers and have the extension read those headers and interpret them. I've been trying to find information on accessing the response headers and can't find any examples. Some of the research has led me to possibly having to develop an NPAPI plugin to be able to accomplish this.
Before traveling down a dead end path I wanted to get the communities opinion here on which path I should be taking to find a solution.

Chrome cannot currently do this, but Google is working on it. A preliminary and incomplete implementation is in the development version of Chrome, or in Chrome Canary.
http://code.google.com/chrome/extensions/experimental.webRequest.html
onHeadersReceived
http://dev.chromium.org/developers/design-documents/extensions/notifications-of-web-request-and-navigation
You can track progress here.
http://crbug.com/50943

The web request api is now in stable and can be used to access header events.
https://developer.chrome.com/extensions/webRequest.html

Here is an extension that does what you are trying to do. It uses cookies to communicate, from what I can tell.

Related

Program/tool for reading/logging http requests and responses?

I'm trying to log autocomplete responses from a gmail "people" server, and I'm trying to find a program or tool to do this, like the network section in chrome dev tools. I tried using a web crawler script, but authentication would be a mess. I also tried Wireshark, but it was all garble to me and probably the wrong way to go. Is this even possible? Can somebody help me, I'm totally out of my comfort zone here. please see attached image
It would be best to find an API that google makes public for the data that you need and use that to query the data. For people, google does have an API. Have a look here: https://developers.google.com/people
Tools commonly used to make HTTP queries are https://www.postman.com/ and https://curl.haxx.se/

Tail like logging window for my web app?

I am developing an app using Phalcon and would like to create a popup logging window that displays any logging type information when I am logged in (such as DB calls and exceptions).
Alot of my app is driven by Ajax calls. Is it going to be possible to have a window that I can popup on my main app that uses a tail like method of displaying this information?
How would I go about this? I'm not entirely sure that what I want is possible with the Ajax calls as they are done in a different request. I can't find anything on the internet as to how I would go about this so any help would be great.
Well, you didn't said that explicitly, but I imagine that you want this just for development purposes. If so, you can log useful info to a method that checks if it should send that log to the browser based on some criteria (e.g. logged in user is you, the app is in a dev enviroment, etc) and then use Phalcon's FirePHP log adapter to send to log the information to the browser.
You'll just need to have some FirePHP extension in your Firefox or Chrome to be able to see the information under your JavaScript console. And yes, it works well with Ajax calls too.
Let me know if you need further explanations on this...
I think you are looking for a debug toolkit.. There are lot of toolkit available on packagist.org and phalconist.com. I personally like this phalcon-debug-widget toolkit that you may try.

Sending POST request via HTTP using Safari on Mac

I need to call a webservice with Safari on Mac. Since the methods are in POST I can't paste the url in the address bar of Safari (like with GET methods).
So, I'm looking for a plug-in or similar that allows me to send the request and then receive the response inside the browser. The response is JSON so with the JSON plug in I can see all the response with his formatting.
Solutions ? Thanks !
Safari is my browser of choice, so I can empathize with you for wanting a native plugin. Fortunately, while there aren't any extensions available, there are quite a few native OSX clients for HTTP/REST end-point testing. I have been using CocoaRestClient, which includes auto-formatting and syntax highlighting for JSON, as you requested. It's open source, lightweight, and is at least actively supported by its developers:
http://mmattozzi.github.io/cocoa-rest-client
Another great tool is Postman, an application inside Google Chrome.
I don't know why you care whether the client is in Safari or not. A restful POST should be able to be executed from any sort of client. You might want to look at RESTClient extension for Firefox http://restclient.net/
Also just Google 'REST client' you should see plenty of other tools available to generate POST's against your service. If you are really would about Safari-specific responses, most good REST tools, should allow you to set the User-Agent header so as to make the request look like it is coming from Safari.

Automatize HAR files generation from Google Chrome

Basically what I need is a way to automatize the result of the following operations:
open a new tab;
open the Network tab in the developer tools;
load an URL;
select "Save All as HAR".
Often, proposed solutions involves the use of PhantomJS, browsermob-proxy, or pcap2har; those won't fit my case since I need to work with SPDY traffic.
I tried to dive into the Google Chrome Extensions API and indeed I managed to automatize some tasks, but still no luck for what concerns the HAR files generation. Now this method is particularly promising but I still can't figure out how would I use it.
In other words, I need something like this experiment from the Google guys. Note the following:
We used Chrome's remote debugging interface with a custom client that starts up the browser on the phone, clears its cache and other state, initiates a web page load, and receives the Chrome developer tools messages to determine the page load times and other performance metrics.
Any ideas?
Solution
For the curious, I ended up with a Node.js module that automates such kind of tests: chrome-har-capturer. This also gave me the opportunity to dig deeper into the Remote Debugging Protocol and to write a lower-level Node.js interface for general-purpose Chrome automation: chrome-remote-interface.
The short answer is, there is no way to get at the data you are after directly. The getHAR method is only applicable to extensions meant to extend DevTools itself. The good news is, you can construct the HAR file yourself without too much trouble - this is exactly what phantom.js does.
Start Chrome with remote debugging
Connect to Chrome on the debugging port with a websocket connection
Enable "Network" debugging, you can also clear cache, etc - see Network API.
Tell the browser to navigate to the page you want to capture, and Chrome will stream all the request meta-data back to you.
Massage the network data into HAR format, ala phantom.js
...
Profit.
For a head start, I have a post that with sample Ruby code that should you get started with steps 1-4: http://www.igvita.com/2012/04/09/driving-google-chrome-via-websocket-api/
By now there's a browser plugin to do that: https://github.com/devtools-html/har-export-trigger
It uses the WebExtensions DevTools API and I got it to work with both Firefox and Chrome.
See my code for Chrome here: https://github.com/theri/web-measurement-tools/blob/master/load/load_url_using_chrome.py#L175
Automatically installing the plugin in Chrome is a bit more complicated than in Firefox, but feasible - I extracted the plugin archive locally and then link to it in chrome_prefs.json (see same repository).
Not sure if it helps, HAR Recorder uses chrome debug protocol to record HAR and generate a har file (without opening devtools). If you want a variation, you can fork and make changes on it.

Chrome Extension: log in in options page

i'm trying to make a chrome extension and I need the have an options page where the user is able to login. this way the extension knows who he is and can retrieve specific data from a server.
I'm not sure how to do this. Any one has a tutorial page or, better yet, a sample code?
thank you all!
A number of extensions use OAuth or OpenID for authentication. There is a tutorial for OAuth on code.google.com. You could also just use a username/password and make a XHR request to validate them. It really depends on the site and what authentication methods it offers.
You need an authentication engine... In other words you need to have a backend for your chrome extension which handles logging in and logging out. This is extremely easy to do. You can use a backend as a service if it's a small project (look at Parse or Firebase) or write your own backend using a framework like Ruby on Rails.
http://rubyonrails.org/; https://www.parse.com/; https://www.firebase.com/
Options pages are well documented on the official docs, including sample code.