Convert chrome extension into cordova mobile app - javascript

Is possible to convert a chrome extension into an apache cordova app? I want to reuse my chrome extension vue.js code to create a mobile app and avoid to rewrite all the code but I'm not sure if this is possible.

Depends on the code. If you are using a lot of the Chrome APIs that do not have direct support in the Cordova infrastructure, then you may need to rewrite those functionalities. I googled your scenario and the first thing showed up was this. I am not sure if this is relevant but you might want to take a look.
If you can integrate Vue to the Cordova codebase in such a way that you'd done in your Chrome plugin, then I think most of your Vue components can be reused with a very minimum to no modifications. However, from what I understand, codes related to the Chrome extension API will not work for Cordova. You need to redo them in Cordova way. Specially if those involve any system/OS/storage APIs.

Related

Can cordova app invoke android specific actions

I know that you can open system apps, such as the browser, or share dialog, through cordova applications, but I was wondering if it is possible to interact with android actions, such as answering phone call, etc, through a cordova/phonegap app.
EDIT:
So, there wasn't any plugin that can do exactly what I wanted. But I wrote a small plugin https://github.com/KIvanow/installedApps which, in combination with http://plugins.cordova.io/#/package/com.hutchind.cordova.plugins.launcher can actually list and start every app on the device.
I think that Córdova is limited for whats on the API + plugins developed by users, if you can't find a plugin for the behavior you'r looking, you need to develop your own Córdova plugin on the respective native languages.

Check if a URL scheme is registered on iOS or Android in Cordova

I want to check if a particular app is installed and if it is installed, invoke it.
AFAIK, the way to do it is to check if the custom url scheme of the app is registered and use that url to launch the app.
Is there a way for me to do this in my Cordova app?
To be very specific I want to check if the Google Maps application is installed on iOS and if it is, launch it with its custom url else show the default Apple maps.
This url : https://developers.google.com/maps/documentation/ios/urlscheme : shows how to do it in Objective-C, but how do I do it in Javascript in my Cordova app?
I could not find any plugin to achieve the same. Other questions on SO deal with either doing this from a native app or JS on a regular website (in the browser). The most common work-around is to try launching and use a timeout to see if the app launch failed and still my app is running. This is pretty unclean. Access to the iOS API canOpenURL through JS would be best.
Hints?
Cordova does not ship with this feature. There is a plugin which implements it for iOS, though.
https://github.com/philbot5000/CanOpen
I did not find anything for Android yet, but I do not think this would be hard to do in native Android Code. Even if you are not proficient with Objective-C or Java and never intend to write fully native apps, you should learn some basics if you want to build apps with Cordova.
Small and simple plugins are really easy to do. Read the docs and have a look at the code of some simple plugins to see how it is done. For example the source code of the one above or of the one below is really simple and straightforward to understand:
https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin

How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).
As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.
I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.
So how does one go about this? Exactly what do I need/need to know?
You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.
It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.
It also allows you to create functions that can be called directly from JavaScript.
It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.
You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)
Also, as pointed out by #Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
NW.js
(Previously known as node-webkit)
I would suggest NW.js if you are familiar with Node or experienced with JavaScript.
NW.js is an app runtime based on Chromium and node.js.
Features
Apps written in modern HTML5, CSS3, JS and WebGL
Complete support for Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other
Easy to package and distribute apps
Available on Linux, Mac OS X and Windows
You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.
Awesomium makes it easy to use HTML UI in your C++ or .NET app
Update
My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.
NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.
It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.
One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.
You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.
Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.
What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.
I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)
I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.
In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:
Google Chrome Frame is a plug-in designed for Internet Explorer based
on the open-source Chromium project; it brings Google Chrome's open
web technologies to Internet Explorer.
You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.
I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.
You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html
CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.
If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.

How to manually install Phonegap libraries without Xcode?

Do I need to install Phonegap libraries or is it enough to copy them to a place where the app scripts stay?
I am developing an app in javascript,html,jquery,css php ect using Dreamweaver on Windows. I want to use cordova-2.0.0 which is the last version of Phonegap for uploading pictures from an album or from capturing them. I have grabbed the full example from http://docs.phonegap.com/en/2.0.0/cordova_camera_camera.md.html#Camera This code requires src="cordova-2.0.0.js" and the problem is I do not know if I should install Phonegap or copy its libraries to a place that the sample script can see them.
I haven't done it without xcode so maybe not the best answer however you could try IBM Worklight which is an eclipse based IDE that has PhoneGap or alternatively would be to look at something like Sencha Touch which has native development capabilities in HTML5 as well.
You copy the PhoneGap libraries to a suitable location and then you import the files into your application project. PhoneGap homepage provide details on how to do this.
Since you don't want to use Xcode, I'm assuming it is because you are using Windows. Have you seen this guide about creating Phonegap iOS apps?
Detailed Guide for setting up building iOS apps without a Mac
EDIT: If you are trying to create a web app that is accessed from Safari, and you are trying to upload photos, then you should probably read this question

iphone web page transitions

I am developing a web page for iPhones and iPod Touch's. I am using the Universal iPhone UI framework. I need to have silding page transitions, but can't seem to get it working. Is there a good javascript framework I could use that would make this easier? I've done a lot of normal web dev with jquery, but it doesn't seem to like the iPhone.
Try http://code.google.com/p/iui/
It's a nice little JS framework, among other things, that will help you with the transition aspect. Have a flick through the documentation too, as it'll give you quite a few additional options as well.
Regardless of what framework you're using, the WebKit CSS trasitions are extensions of CSS and were developed with the iPhone and iPhone web-based apps in mind. You can do some very clever, complex animations with no JavaScript and only a few lines of CSS.
Here's what Google finds on the subject.
Try the following frameworks.
Jo
Sencha Touch
jQuery Mobile
These are for serving Web based mobile sites, they can then in turn be made into Apps for Android or iOS using PhoneGap
Of the 3, Sencha is the more mature project and has the most things out of the box. Jo looks very promising and would probably directly compete with Sencha. jQuery mobile is very interesting but just far to early to do any production code with it, too rough around the edges. jQuery mobile takes a different approach to the others as it is html based and it interperates the attributes on tags to turn things into tableviews or menus.
jQuery mobile is quicker to hack together and get your head around, where the other two take a little bit more thinking. But once you figure them out its easy enough.
If you don't want to serve the site via a url at all and want to just build an app then Appcelerator is the way to go. You write code in JS and it makes native Android or iOS apps for you. You will get access to pretty much the full Android/iOS api.
I have coded with appcelerator, however I am no longer going to use it and use one of the above frameworks, probably Sencha for just now. I can get access to the device native apis via PhoneGap and for simpler apps give a great experience cross device via a url.
Reference
Apple's Dashcode IDE has an extensive set of page transition templates for the iPhone. You should be able to fire up a quick project, get the look you want, then export the resulting HTML/CSS/Javascript into your favorite IDE.
The only catch is that it's OSX only.
I've been deep into an iPhone web app project lately. We evaluated iUI, but decided against it for various reasons. Consequently, I've developed most of the same functionality from scratch. While I can't share the code from the actual product (as I'm under NDA), I have been documenting many of the techniques I've used to do certain things. Check out the links below:
http://segdeha.com/e/css-transitions/
http://segdeha.com/blog/2009/07/19/stupid-webkit-tricks

Categories