Chrome extensions communication with Arduino - json

My idea is to have an arduino board that will communicate with the browser.
I want the arduino board to react (eg. blink led) when user is connected to a certain website.
User inputs on the board ( eg. press button) will affect the browser (eg. close tab, switch tab).
I started learning and creating simple examples using chrome extensions tutorial.
However, since I am not myself a skilled programmer, I'd like to know if it is possible to achieve those things aforementioned.
How I imagine it right now it will be:
Chrome extension writes into a json. Arduino reads data from json -> blink led.
Arduino writes values in json. Chrome extension can automatically see changes in the file and react accordingly -> close tab( so, without having a user re-installing each time the extension).
Are this scenarios possible? Which would be the easiest way to achieve this?

I would recommend to take a look at firebase. That's a really easy real-time database with a lot of good tutorials (even some by Google).
Then you should use a library like this one on your Arduino.
(there are some examples to look at)
And in your chrome extension you can fetch the values from the database really easy again.

Related

Debugging binary websockets

I'm trying to debug a web app using websockets to pass binary data. Chrome DevTools has this handy network tab that can display websocket frames... except for binary frames it just says Binary Frame (Opcode 2), and that's it. I have no idea why they stopped at this, when it is so easy to provide more information. I even found a pull request for this feature from 2 years ago.
Anyhow, I'm looking for alternatives. I'd also like to add some custom parsing logic for the binary data.
So far the best solution I've found - undock devtools window, open another devtools for the devtools (press Ctrl+Shift+I in Elements tab), navigate to source file for network tab, place a breakpoint on the line that sets frame's text content, and add JS code to modify local variables in edit breakpoint menu. I get something like this, which is pretty much perfect, but it is quite a hassle to set up, and difficult to use with more complex parsing code.
Ideally something like this would be done by a chrome extension, but it seems that devtools extensions can only go as far as catch regular network requests.
Another alternative is to use Wireshark, but this requires SSL key log, and then there's no clear documentation on how to make a custom dissector parse the output of SSL decoder instead of raw TCP data (there's a question about it here with no answer). Besides, I have a large amount of JS code for parsing the binary data, and translating everything into LUA would be quite a pain.
Update: I managed to make an extension for this using debugger API. This requires making your own UI that lists frames, but in the end it's working just as I wanted it.
DevTools in Chrome 74 support binary view out of the box
updates/2019/03/devtools

Chrome Extension: How to get data out?

I appreciate this question may appear broad. But it is because I am looking anywhere and everywhere for a possible solution to do something very simple.
The goal is from a web page opened in Chrome, to scan the DOM, extract specific elements and save them silently in some way that I can then access.
There is no intention for any of this to be published as an app or extension, it is simply me wanting to access my own rendered browser data and extract and store this data on my own computer. For this reason, I am currently finding Chrome's exhaustive sandboxing security frustrating and irrelevant to say the least.
I have a working Chrome Extension which extracts all of the data I want, has a list of 5 strings that I want to save and that's as far as I have gotten.
I have looked into these areas:
Existing NPAPI Plugins (could not get npapi file io to work).
Creating my own NPAPI Plugin - seems like a huge overhead and learning exercise simply to get external access to 5 strings
Every aspect of Chrome extension (and even App) apis (particularly their localstorage which is not accessible from outside the extension)
Any other thoughts?
I realise there is a solution through creating my own NPAPI plugin but I would like to believe that there is another approach that allows me to link a constructed DOM with my local system. I am open to any other option? (I have considered a Linux purely bash approach but I need to generate the DOM as though it was in my browser).
I just want to be able to access specifically extracted parts of a DOM on my local system, not write an entirely new C++ plugin to facilitate this very basic feature.

windows tool to view website client content without browser

Per the title, I am looking for a tool or some sort of initiative that's already been undertaken by other developers to simply grab data off of websites so one can navigate them without looking at them in the browser. I am fully aware of how most pages work so what I would like to do is just look at the data that's being pulled from them per windows technology that's already (hopefully) been written. Does this make sense? Here is an example of what I would like to see in a tool:
a windows interface that gives me data about a webpage (menus, submenus,
button names/captions, etc...
be able to execute transactions on those pages by specifying what to do
through the tool's interface (click button, download image, etc..)
does anyone know of a tool out there to do such things?
The closest "program" that comes to mind is
WWW::Mechanize
Advertised as
Handy web browsing in a Perl object
This can in fact be used on Windows, however you
will need Perl.

Simple program to automate mouse and keyboard movements

Background:
I check my grades weekly online for school. I then use print-screen and ms paint to save images of the website with my grades. (I know this is really time consuming and inefficient, but my computer has connectivity problems with my printer and it doesn't recognize any PDF makers)
Possible Solution:
Write some program or something that automatically:
opens a browser
goes to the website
logs in
opens each individual subject
creates an image (idc what process it uses to do so)
Thanks E'rybody
Don't use a browser. send Http requests in perl or something like that.
You can simply parse the HTML instead of grabbing screenshots.
Alternatively ask the school to provide your grades via email or on bloddy paper?
Personally I'd go with curl from the command line and then parse the html you get back:
curl http://website.com/grades
However, if you need to do it through a web browser (they might have some funky javascript) then there's a framework called selenium which might be usable: http://seleniumhq.org/
It's generally used for testing but can be used for your scenario. It's got clients for lots of different languages too.

Best way to handle file uploads through HTTP

File uploads through web pages using the standard HTML input always seems clunky to me. If the user tries to upload a large file, it can go on forever and they get no queue that the file is actually being uploaded.
I have tried to do things like provide a gif graphic that is an animated graphic bar, but it doesn't give the user any indication of how much is uploaded. I have even tried to do a progress bar with AJAX, but those were always ugly and never seemed to work right.
This has been an issue with many of my clients, and often I'm asked if there is a better way. Sometimes I'll just provide them an FTP site so they can upload it there, but that's not a practical solution either.
What do you think the best way to handle HTTP file uploads from HTML is? What are some good ideas / examples you have seen around the internet?
There are several techniques for asynchronous file transfer with a progress bar over HTTP, most of which involve either Flash or XMLHttpRequest.
There are a number of client side controls that one can use.
You can
Build your own ActiveX control. Windows/IE only
Use Flash to queue up files and upload them one at a time to the server using the stanard file upload protocol.
Use a signed java applet to upload.
Write a browser plugin.
Some random links from google:
http://www.element-it.com/MultiPowUpload.aspx
http://www.codeproject.com/KB/aspnet/FlashUpload.aspx
http://www.dmxzone.com/forum/go/?36564
I'll add swfupload to this. It's an open source flash uploader that can degrade gracefully if the user doesn't have flash.
There's really only the one mechanism for uploading via a browser. You can, however, dress it up and make it more user friendly by providing a progress bar to show that the upload is progressing and at what speed.
This is typically done by targeting the upload form at a hidden iframe and using AJAX calls to find out how much of the file has reached the server.
Here's one example of this:
Megaupload
If you running a mod_perl2 apache there is the Apache2::UploadProgress module. This adds an id to the http upload request, you then query the server for the progress of that upload. Has built in support for creating an AJAX progress bar in a popup window or within the page doing the upload. If you want to build your own progress display you can get the info back as XML or JSON data.
The YUI Uploader utility uses a Flash-based uploader, is well documented, and has several examples for you to try. I've used it on several projects, and would recommend it.
I use this one for a fairly simple and complete tool. The base sourcecode is good and you can easily customize it if necessary.
AJAX File Upload
Interesting, no one has mentioned NeatUpload upload component by Dean Brettle, it has lots of interesting features and runs on MONO, too