LocalStorage in Firefox extension - javascript

Has Firefox extension personal LocalStorage? And how can I get access to it?
I know about window.content.localStorage, but it the specific localStorage of the current page, not like in Google Chrome, where each extension has personal background page.

You can use the simple-storage module for storing content specifically for your addon that is not bound to a specific page like localStorage, and you also can use the indexed-db module, which is a bit more robust, and we are kind of moving away from simple-storage.

simple-storage would be an ideal solution, but if you're using the Add-on Builder Helper it's not ideal because the storage gets flushed every time you make a change to the code and reload the app. Thus, it's impossible to test that your code works properly without actually building the extension and going to test it in another browser profile, making it hard to tweak the code and make minor changes.
Instead, I used the simple-prefs module, which did actually persist across restarts:
var prefs = require("simple-prefs").prefs;
The downside is everything has to be serialized as a string, so the development overhead is a little bit more complicated, but once you get it setup you can then test your code more easily without having to build the XPI for each minor change, something the Add-on Builder is supposed to help you avoid.

Related

How to do Testing on JavaScript changes

In an Assignment it was asked what is the first thing to do before testing changes done in JavaScript, after deploying an application. My answer was to clean the browser cache because the cached content may affect the new changes. I want to know whether it is a valid and a good answer or are there some things to do prior to that? Thank you
A word of advice, not all users understand the principle of clearing the browser cache to obtain changes. I suggest you to increment you'r javascript file instead of taking into consideration that users will clear their cache.
But before deploying a modification, I advise you to do some tests. Several types of test exist, you can look for example at unit tests.
What a vague question to be asked, however I personally think about how a real user would use the system when I test it. Therefore, would I trust the user to clear the cache / cookies etc everytime they used the system? No. I would expect to be able to either close the browser and open (or simply refresh the screen). As mentioned in another answer, 'cache busting' should be handled by the developer during the build process, for example by hashing the javascript bundle.
I used to get into a habit of opening dev tools all of the time and relying on the 'disable cache' toggle, however after a few times of getting caught out by real users seeing different behaviour that what i was seeing during development, I moved to ensure that the bundles weren't cached in both dev and prod.

Persistent copy&paste for jstree nodes

The default way to set up copy&paste with jstree as described in the documentation is easy enough and works well, but only within the scope of JavaScript variables context of the loaded page.
Specifically, if I select copy and then paste that will work. However, if I select copy, then reload the page, paste will not work since the data about copy is lost now.
How can I make this work? I guess something will need to be stored and retrieved from a cookie. Where do I find that? Also, is there an existing option in the plugin for this use case?
Depending on your audience, I would try to implement a copy/paste through html5 local storage. For some simple text copying and such it should be fairly easy to implement.
Html 5 local storage is just a key:value pair that is stored on the users local web browser memory. Therefore it'll be maintained through a web browser reload. Heck it even should be able to be saved if they accidentally close out of the browser completely!
I think with a little javascript, and if you use a library like JQuery, it shouldn't be too hard to implement. You could even have the added benefit of multiple copies enabled as you could just have multiple key:value pairs.
Take a look at a tutorial I found that I think is pretty good to get an idea of how to start with it:
http://paperkilledrock.com/2010/05/html5-localstorage-part-one/
As far as I understand you can write a new plugin for jstree to get this done.
Take a look here to see how the current CRRM Plugin is implemented.(CRRM plugin is included by default with jstree. Serach for CRRM in the above linked file if you find it difficult to locate the place).
I guess you can take a look how it is implemented and implement the methods in a similar way but with persistence.

Are client-only web applications possible?

I want to create an internally used web app that can be run with just a copy of the web app and the DB (anything from a text file to MS Access/Excel would work fine). Is this possible? I don't want users to have to setup a SQL server to get the app to work. Having the files necessary to run the web app stored on a shared network drive would be ideal, for example. The problem is that JS can't write to a DB. Is there anything that can use to do this?
Like mentioned, I can assume that Access/Excel are installed, if there's anything that might help there.
It's most certainly possible. W3 has put up the specs for a client side database that can be accessed by JavaScript. The modern browsers have good support for it, and since this is for an internal application, you would have some level of control I believe.
Checkout this slide that shows a live demo of Indexed Database. The full spec can be found here. See this link for browsers that currently support IndexedDB. Here's another set of slides showcasing how to use IndexedDB.
However, with this approach, each user's browser has its own DB locally. If you want a centralized DB, then you will need a server.
You can perform database transactions with JavaScript. This is generally discouraged, because it has terrible security implications. However, in a completely local environment, you are probably not causing any additional security risks. (Because, your database is already on the user's machine.) You can see an example of how to use ADO in JavaScript at How to connect to SQL Server database from JavaScript in the browser? .
Possible, yes, Like Making cars that can float in the sea but could not work on dry roads.
Use winforms or something similar. Use the right tool.
If you insists, Firefox plugins can behave in the way you mentioned, and there is a way to bundle a web application with it's server (check the beginner tutorials for RoR to have an example for something similar with webrick).
If I understand your requirements, you might look into ColdFusion.
For example, you can run a DB query pretty simply, check here, in Adobe

Can you write files in Chrome 8?

I'm wondering if, with the new File API exposed in Chrome (I'm not concerned with cross-browser support at this time), it would be possible to write back to files opened via a file input.
You can see an example of what I'm trying to accomplish here: http://www.grehz.com/ide.
I know I can use server side scripts to dynamically create the files and allow the user to download them normally. I'm hoping that there's a way to accomplish this purely client side. I had read somewhere that you can write to files opened via a file input. I haven't been able to find any examples of this, though I have seen passing references to a FileWriter class.
I would be completely not surprised if this wasn't possible though (it seems likely that there are security issues with this). Just looking for some guidance or resources.
UPDATE:
I was reading here: http://dev.w3.org/2009/dap/file-system/file-writer.html
As I was playing around in Chrome, it looks like FileSaver and FileWriter are not implemented, but BlobBuilder is. I can call getBlob() on the BB object, is there any way I can then save that without FileSaver or FileWriter?
UPDATE2:
I found this issue in the Chromium project: http://code.google.com/p/chromium/issues/detail?id=65615&q=FileSaver&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
So it's clear that it hasn't been implemented in any version yet (however, no mention of FileWriter - although I believe FileWriter depends on FileSaver).
Moving away from that, I'm considering a server-side solution. When a user clicks save, the contents of the textarea is posted to a script that then writes to a page and is sent back as plaintext or whatever mime-type would be appropriate for the user to download. Any other suggestions? This solution is fine for a "save as" but it's a little clunky as a general purpose save button.
From:
http://code.google.com/p/chromium/issues/detail?id=58985#c7
FileSystem is really the right place
to store big files (which is what it
sounds like you're doing) and is
available in Chrome 9. I suggest you
look at these alternatives.
Note the not-extensions label at the top left. It sounds like this may just be for Chromium OS. I emailed Jeremy, the developer who made this comment for clarification.
Update:
Jeremy replied that extensions actually will get access to File API including writes, but that it will be confined to a sandbox. He also linked to some undeployed docs on the matter:
http://code.google.com/p/html5rocks/source/browse/www.html5rocks.com/content/tutorials/file/filesystem/index.html?spec=svn1cbb2aab2d6954a56f3067d2d3b9e997215be441&r=1cbb2aab2d6954a56f3067d2d3b9e997215be441
No way that I know of to save until those apis are implemented - which may be some time off.

Automated browsing with javascript?

I'm trying to do some browser automation, but I'm having some problems. Basically, what I'd like to do is load a set pages, set some forms options, click a button and view the results for each page that I open. Originally, I tried to do this by placing the pages I wanted to automate in iframes and then using javascript to drive the interactions I want in each, but that results in a Permissions Error, since the sites I want to automate are not on my server. Is there any way around this? The other possibility I've thought of is to use QT's webkit class and the evaluateJavaScript method to accomplish what I'd like to do, but this seems a bit more heavy weight for something that is, conceptually, pretty simple.
The tasks that I wanted to accomplish weren't really test related, so a lot of the test-frameworks don't fit the use case that I had in mind (I did try to use Selenium, but ran into problems). I ended up doing what I mentioned in original question and injecting javascript into pages through QT. This ended up working pretty well, although it was a pain to debug, since the javascript had to be passed in as a string and the base environment provided by QT's webkit class doesn't reveal a whole lot.
Check out Selenium: http://seleniumhq.org/. It lets you automate Firefox and is probably the easiest to get start with.
Are you trying to do test automation? If so, there are plenty frameworks for that, like Selenium, WatiN, WebAii and even that built in Visual Studio.
Some of them (WebAii is my favorite) allow you to launch test in a real browser like FireFox.
If a peace of software you searching for is more like form filler, than take a look at iMacros, thay have a complete browser-side scriptable solution.
An easier way of doing this would be to use a web debugging proxy and injecting javascript that way. This should allow you to debug the code you wrote within the browser.
I haven't personally used web debugging proxies, But I wrote my own proxy and did this a while ago just for fun and it worked great.

Categories