Desktop application in Javascript/CSS/HTML for Google Chrome - javascript

I have to make a Google Chrome based application solely for desktop purpose. By Desktop I meant that it would not be loaded from some URL rather would be invoked on the machine only. The data would be stored/fetched from HTML5 SQLite databases or some storage provided by CHrome(Is there any?) The application would be purely based on Javascript/CSS/HTML. I also have to make it secure so that nobody could "steal" the code and data.
Can you refer me some relevant documents?
Thanks

You might want to consider making a Chrome plugin instead. As rcapote already mentioned, you can't really make JS secure in the way you want (even with an obfuscator). However, IF you can lock down your environment sufficiently, a Chrome plunging will be a lot more secure.
To be really safe though, as much as I hate to say it, you should really switch to a compiled format instead. There are even JS compilers (that compile to other languages).

Related

Scan and access local file directory in Firefox and IE?

I'm doing some research on whether or not it's possible for a web app (meant to be used and distributed internally) to scan and read files from a local directory (on user machine). I came across a couple of terms as following:
NPAPI: no longer supported by majority of web browser
ActiveX: IE only
Sandbox: Chrome uses this kind of technology, plus it's not fitting to the requirement so I have to look elsewhere
I feel like ActiveX might be the only option even though I haven't actually written any ActiveX control before (not sure if it's possible).
Also the goal is to support more than one kind of web browser, so other than IE I thought Firefox might be capable of achieving the requirement, since no search result so far said otherwise.
Could someone please give me some pointer? I just need to know if it's at all possible to build a ActiveX control or Firefox extension to scan and read files from a local directory. If it is, then what is the downside other than security vulnerability.

How to test chat web app

I am developing chat application, using node.js socket.io module on a server, and javascript on a client. As it become more complex, I become tired to test different usage scenarios by clicking across browsers. At now I use different browsers in order to separate cookies. So in Firefox there is one chat participant, in Opera - second, etc.
Therefore my question is:
Can I automate this somehow?
I've heard about headless testing engines like Phantom JS, Selenium WebDriver, but I don't know how to write tests between different browsers. In fact, I indeed need to separate cookies, different browsers are here only for this task.
May be I cannot explain my problem to Google :) All answers on such question imply cross-browser development, and testing that aspect.
Any help will be appreciated a lot!
The answers shown at How to test two interacting browsers (e.g. chat app) might be of use if you try to go the Casper/Phantom/SlimerJS route. I'm not marking it as a duplicate as your question is more general, whereas that one is about exactly how to synchronize two CasperJS instances; it is also not specifically about socket.io.
Note: if using Phantom to test Web Sockets you will need to get Phantom 2.x (which is still experimental, and does not have an easily downloadable beta yet), as Phantom 1.x uses an old WebKit. SlimerJs always uses a recent Gecko (i.e. Firefox) engine, so is fine.
Each instance of PhantomJS can have its own cookies. This answer (and the other answer on that question) explains your choices well.
SlimerJS cookies are similar, but persistent cookies are stored in the Mozilla profile, so if you wanted to run multiple instances, you would want to specify an explicit profile for each instance. (Though your chat application may only be using session cookies, in which case this does not matter.)
Anyway, as cookies are used I would definitely run two instances of CasperJS, rather than try to use two tabs, or two frames.

Can I recognise (graphic tablet) Pen Pressure in Javascript?

Is there any way to recognise pen pressure using javascript.
Preferably I don't want to make any use of Flash and try get this done as pure JS.
EDIT: okay I realised that it is kind of possible for Wacom tablets as they come with software that can work with their javascript api to make it possible (demos). But it's no good for people with Trust tablets or any other brand... So no good really.
Any body know how to do it in C# if not JS?
Yes - if the user has a Wacom tablet installed, then their browser will have a plugin for it that you can access. http://www.wacomeng.com/web/index.html
edit from author: I wrote this a very long time ago. Please see the comments below
Microsoft implemented something called Pointer Events in IE 11. It allows you to access pressure property along with stuff like pen tilt and size of contact geometry.
So far it only works on IE11 (and IE10 with vendor prefixes) but there is a W3C candidate recommendation so maybe it will be standard in future.
Javascript as a programming language in itself has no more ability or lack of ability to read this kind of data than any other language.
The language isn't important. What is important are the APIs available to you from within the language.
Javascript can be run in a number of different environments, some of which may possibly have access to APIs for this kind of hardware. However most Javascript is run in a web browser environment, and this is clearly what you mean.
The web browser environment provides a number of APIs. The most obvious is the DOM, which gives you the ability to manipulate the page, etc. There are other APIs available in the browser as well though. For example, the Geolocation API.
All these are standard APIs which have been defined by the W3C (or in some cases are in the process of being defined by the W3C), meaning that all browsers that support them should make them work the same way.
Unfortunately for you there isn't a standard API for working with pressure pads, so the direct answer to your question is no, it can't be done.
Whether one will become available in the future remains to be seen, but I have my doubts.
There is one way that you can do it though: ActiveX.
ActiveX is an API provided by Microsoft in older versions of IE. It basically provides a way of accessing virtually any Windows DLL code from within the browser.
Since the pressure pen device driver for Windows will be provided as a DLL, this means you should theoretically be able to access it in the browser via an ActiveX control. So therefore yes, you would be able to program it using Javascript.
The bad news, though, is that this is not something I'd recommend. ActiveX as a browser-based technology has long since been abandoned, due to the massive security holes it caused. I don't think the latest versions of IE even support it (I hope not, anyway), which means you'd be forced to use old versions of IE (and only IE - no other browser ever supported it) in order to run your code. Not ideal.
No, that's not possible. Probably not even with Flash.
You can only do so in an Native app. Javascript does not have access to pen pressure information

Understanding browser plugins: creation, deployment, and use

Let's say I wanted to create a browser plug-in that would open someone's floppy drive for them whenever they click a button on my web page. (You remember that old gag? - Don't worry, I don't really want to do that.)
What are the steps necessary to create a browser plug-in that will work on most browsers and most operating systems?
How do I deploy the plug-in? For instance, how do I make it so that the plug-in can be easily downloaded and installed? Do I have to worry about digital certificates?
How do I check for and use the pluggin once it's installed? Is it available to javascript in the form of an API?
Take a look at a project called FireBreath: http://www.firebreath.org/display/documentation/FireBreath+Home
Firebreath abstracts many of the differences between the browser plugin frameworks and platform issues so you can easily write the code for a plugin once and just re-compile it for different platforms.
I have found it good for exposing existing C/C++ library API's to Javascript so I can write dynamic pages that use functionality from the C++ library which were otherwsie not available.
Most modern browsers have their own plugin frameworks for developers to utilize. So, for example, a Firefox plugin will not work in chrome or IE. Firefox and chrome do both utilize javascript and css but they are fundamentally different in their structure.
As far as deployment, Mozilla and Google provide hosting for their respective plugins. I do know that firefox extensions are basically zip files with the extension changed.
EDIT...
I had assumed you meant browser extensions so disregard my answer if that is not the case.
The easiest cross-browser solution is use Java Applets or maybe Flash (I am not sure how you do it in Flash).
With applets, you would need to sign the applet and also create a security policy file for accessing the disk. When the applet loads in the browser it would ask permission from the client user, he/she needs to click Allow to give permission for the applet to access the disk. This would allow you to access any disk in the system.

All frontend languages/solutions

Are these all the languages/solutions you could use in frontend?
javascript+html+css
flash
java
silverlight (c#, ruby, python etc)
And what is a plugin for Safari and Firefox written in? Is it low-level languages like C++?
FireFox plugins use XUL, https://developer.mozilla.org/En/XUL, HTML, JavaScript and CSS;they are called chrome applications. In fact the browser itself is a chrome application. It also uses XPCOM for some things, https://developer.mozilla.org/en/XPCOM. From that link "XPCOM components be used and implemented in JavaScript, Java, and Python in addition to C++".
And if your curious, Microsoft's XAML was pretty much taken from XUL.
As far as I know for plugins in Safari/Chrome and other non-IE, they just use HTML, JavaScript CSS. For IE plugins, check this out, http://discuss.joelonsoftware.com/default.asp?design.4.423268.5
firefox: How to create extensions for firefox
plugins for chrome, you can write those in simple Html, javascript
Simply put (and as you probably well aware), and to use the long-standing terminology, there are two sides to a (say, web) experience, the client and the server:
Any language that can run without a
call to the web server in the client
(i.e. the web browser) is
client-side (Javascript is the
obvious example);
a language that runs on the server,
but produces content that the client
can request, is server-side (Ruby,
Python, Perl, etc.)
Plugins like Flash or Silverlight are a separate case. Although themselves written in languages functioning at a lower-level than client-side scripts, they nevertheless operate in a client browser with the plugin, and - once loaded - Actionscript (say) will run in the browser, client-side.
To complicate matters, HTML and Javascript can be used to write (e.g.) OS X widgets and Browser plugins and - although they may call on server functions for (say) data - they're still client-side.
Further, the ability of HTML5 to store data, and the rise of NoSQL solutions, mean that the division is no longer as clear-cut as it once was.
Front end is never limited to what languages/platforms, frameworks, APIs etc. that you could use. However, you could say that HTML, JavaScript (and its frameworks), CSS are the main platforms you are going to use while front-end developing. But you should keep in mind that complex issues require specific knowledge therefore, it's good to know other languages/platforms as well.
Regarding your second question, even though most of them use HTML, CSS and Javacript.
To learn more about what language and platforms mozilla uses check out this link and click on specific documentation:
https://blog.mozilla.org/addons/2014/06/05/how-to-develop-firefox-extension/
Checkout this tutorial on how to make a chrome extension:
https://developer.chrome.com/extensions/getstarted
Check out this tutorial on how to make a Safari extension:
https://code.tutsplus.com/tutorials/how-to-create-a-safari-extension-from-scratch--net-15050

Categories

Resources