Creating a chrome extension with web application features - google-chrome

I just started learning how to build a basic chrome extension. I see many chrome extensions which have extensive functionality like a full fledged web app. For example, when I click on a particular chrome extension, it opens a new tab with a URL chrome-extension://gibberish/filename.html. This page functions like a complete web app. Here is an example chrome extension which does image compression:
From my research, it looks like a combination of chrome extension development bundled with NodeJs. But, I am unable to find enough information about this to find a course to learn myself. If I had to develop a similar application, where do I start? Can any web application be transformed into a chrome extension or is there a specific way to go about it?
Any guidance will be much appreciated. Thanks in advance.

Related

Using Google Chrome as bundled runtime for HTML app?

I have an HTML application that run offline, and I want to end up with a way to open the app from an exe file on Windows. I have tried Visual Studio, but the app does not run in the WebBrowser component.
I am pretty sure I have read that I can use Chrome (or some kind of Chrome version of Chrome) as a "bundled runtime", but I have a really hard time finding anything about it. Does it exist?
Using chrome as an engine (instead of "web views" based on Internet Explorer) would also make sure that the application would run nice on computers which has not updated Windows or browsers for a while.
You must be thinking of CEF: the Chromium Embedded Framework.

Why does developing a firefox extension involve installing an sdk?

I'm currently trying to port a Chrome extension into a Firefox add-on, but the development process is incredibly different, and the part in particular that I find confusing is why I should have to install an SDK.
How are these two so different? Do Firefox add-ons run faster because they're precompiled? Why aren't firefox add-ons just HTML and javascript like (some) Chrome ones?
What's going on behind the scenes here that involves using so much command line just to get a firefox addon started?
The SDK exists to help developers build their extentions, but if you don't want to use it there is also a way.
You can use web extensions which as the wiki says have their benefits:
Porting add-ons to and from other browsers should be easier.
Reviewing add-ons for addons.mozilla.org should be easier.
WebExtensions must be compatible with multiprocess Firefox (Electrolysis).
Changes to Firefox's internal code should be less likely to break add-ons.
WebExtensions should be easier to use than the existing Firefox XPCOM/XUL APIs.
I don't have personal experience with web extension but it seems to be promising for someone who does not want to use SDK and the benefits ofthe web extensions are that they support an enrich manifest document and you only need to zip your extension and run it.
There are some examples on github to get started.

Running HTML5 code in android app without internet connectivity?

Is it possible to have HTML5 files stored inside the .apk file of an android app and run the files on the android app without requiring internet connectivity?
Yes. If your a native Android programmer look at the WebView. http://developer.android.com/reference/android/webkit/WebView.html
If your not, you could look at things like http://cordova.apache.org/ and http://www.appcelerator.com/platform/titanium-sdk/ and others. But honestly I've never meet a dev who has a good thing to say about these for any kind of complex app.

Possible to mirror iOS Safari Debug Console on a Mac, PC, or other device?

All,
I'm working on an HTML-based web app (i.e., not native app) targeted for iPhones.
I typically use Safari's Debug Console to track down JavaScript errors; it's pretty handy.
However, when I'm working on some complex JavaScript function - it's incredibly tedious to switch back and forth between the web app and the console window. Also, there are times when I'd like to see BOTH the window and the app at the same time, so I could see console messages WHILE I'm interacting with the app.
So - is it possible to "mirror" the Debug Console to another device, or too a Mac or PC?
In other words - I'd like to be able to use a web app (or web page) on my iPhone, and have the output from console.log() (or .warn() or .error() or .info()) show up in a window on my development machine.
Adobe has something called Shadow (http://labs.adobe.com/technologies/shadow/) that looks like it does something close:
AdobeĀ® Shadow is a new inspection and preview tool that allows
front-end web developers and designers to work faster and more
efficiently by streamlining the preview process, making it easier to
customize websites for mobile devices.
... but it's not quite what I'm looking for. (At least, it doesn't sound like it from the description).
Sorry in advance - I'm pretty new to this type of development, so I'm probably unaware of some tool that everyone else knows.
Either way - thanks for any pointers.
jsconsole.com can do this. Read http://jsconsole.com/remote-debugging.html for more info.
http://youtu.be/Y219Ziuipvc shows you how to do it.
weinre does exactly what you're wanting. Their docs are reasonably thorough so I'll let them tell what you need to do to get it running.
PhoneGap actually offer a mobile web app debugging tool that is powered by weinre and is a cinch to set up so you might want to check that out first.

How can I develop a Google Chrome extension without constantly repacking it?

I remember reading about a way to develop a Google Chrome extension without constantly repacking it. In Firefox this is done by creating a soft link between the extensions directory and where your development directory is. I've forgotten the method to do this with Google Chrome and can't seem to find it when searching.
Also, if you know the answer to this question you've probably done some Chrome extension development, so I'll ask (as a bonus), what are the most valuable tools for developing a chrome extension - the ones that just make your life so much easier?
ps: The developer tools look nice. How can I log things inside a script (console.log?) and where do I see that output? Doesn't seem to be showing up here:
Enable developer mode on chrome://settings/extensions and hit load unpacked extension.
The most valuable tool for me is the build in developer tools.