Save Dynamic Tilemap Layer Locally - phaser-framework

I’m trying to make a game that has a map editor, and I would like to save layers locally to the file system. Can somebody help me to add this feature? And I also don’t have anything because I don’t know where to start, so I don’t have any code to show.

In JavaScript/HTML5 you cannot save to a file without a user action. You can present the user with a save-file dialog and then save whatever data you have to a file, see this question.
Alternatively, you can just save your layers objects to the local storage, which is storage within the browser cache. The only downside is that if you open the same page in a different browser (for example switch from FireFox to Chrome) then the save is not available. For more information, see this question.

Related

Pass variable to chrome extension script when installing it from chrome webstore

I am making an extension that should include in its background script some variable that should be unique for every user and that must not be altered. I was able to soolve this in Firefox since it is possible to generate the extension package inline and install it with not problems.
As far as chrome is concerned, I cannot rely on cookies, session or localstorage since the can be erased if the user deletes his browsing history.
Then my question is very simple, is it possible to pass the variable when installing the extension from chrome webstore using a link lik this for example :
https://chrome.google.com/webstore/detail/search-by-image-by-google/dajedkncpodkggklbegccjpmnglmnflm?id=somevar
YOu may use Sync Storage in Chrome: https://developer.chrome.com/extensions/storage
It use Google Drive in background to store data. Even if the user clear browser data it will remain intact.
The user will not see this data on Drive because they are not visible in the drive's UI (files are hidden) so probably he will not be able to delete it.
However you must consider a situation when the user is not logged in to Chrome or the user disabled sync options. In this scenario storage.sync will behave like storage.local.
Even when the user clear browsing data, the data stored in storage.local will remain. They will be deleted only on uninstall.
Edit:
Data are stored on Google Drive using syncFileSystem API - not storage.sync. However it doesn't change the solution I wrote.

Reading and writing files in chrome extensions

I am trying to write a chrome extension that initialize some parameters from a config file.
I would like to allow the extension to change those parameters and save them to the file so that the next time the extension was loaded it uses the new configuration.
I have been reading the chrome.filesystem api but it needs the interaction of the user to choose the file. However in this case the process must be done automatically without any action of the user.
Since this configuration file will be only accessed by the extension it could be sand-boxed but It must be persistent even if chrome is closed.
I manage to read the file using an XMLHttpRequest but I could not find a way to modify the file.
Is it possible to do this from a chrome extension?
This is an old question but unfortunately the only response it got was wrong.
It's definitely possible to read and write files using HTML5 in Chrome, without the vague "security" issues mentioned. The HTML5 Filesystem creates a protected sandbox in which you write and read virtual files: you can think of it as files being written in file based database managed by Chrome and not accessible by either other Chrome apps & extensions or other OS based applications. The user won't be able to copy or move these files using his OS file explorer since they reside inside the web browser's file DB.
You can't read (or write) arbitrary files from (to) disk based on any given file path.
If you need a file from disk you can only let the user select it himself by using chrome.fileSystem.chooseEntry()
You can however read (and write) your own files from (to) the HTML5 Filesystem.
So to answer your question: no you don't need user interaction to write your config file to the browser's file system.
An alternative to files could be chrome storage, localstorage or even indexedDB to store your (persisted) config key-value pairs.
Here are a couple of useful links to start reading about it:
Toying with the HTML5 filesystem
HTML5 Rocks
HTML5 demos
I imagine allowing a chrome extension to write to config files without the user knowing could be a bit of a security problem. You're probably hitting up against a security feature. A potential work around is to build a desktop application that is always on, and your chrome application communicates with it. Heck, you might able to do what you need to (without knowing all the details) with something like autohotkey.

Show balloon notification with latest change log entries on update

I would like to display the latest top 3-5 entries of my extension change log (TXT file) when it's auto-updated and ideally in a balloon-type event like the one when you have successfully installed an extension. It should show/popup near the wrench-icon area. Like a replacement for #history that GM scripts have.
There are already a few SO questions about how to get extension version like here.
There are also one here to detect if it's an install or update based on version.
It is not desktop notifications I want.
My question is how to make the balloon and populate it with the lines.
An alternative is open my options.html page in a new tab and show the change log entries there somehow. Requires tabs permission in the manifest.json file.
chrome.tabs.create({url:chrome.extension.getURL('options.html')});
Any ideas how to do this?
Or is this impossible to do?
There's neither a mechanism to create a "balloon" notification (that's reserved for native Chrome code), nor to pop out the popup without user interaction. Your automatic notification methods are fairly limited: creating a new tab with a changelog is certainly possible, but not particularly user-friendly (since it will simply open at some arbitrary time, completely remote from the user's intent).
If possible, I'd suggest waiting to notify the user until she interacts in some way with the extension. Clicking on a page-action, for instance, could have some sort of infobar-like note at the top of the popup's UI inviting the user to read more about the update.

How to detect in advance if a browser will download a file instead of viewing it?

Sometimes when you view a file on a page on its own, the browser has some default way of viewing it, like to place it in an image or video tag, or invoke some plugin. Other times, it just downloads the file.
Sometimes this is because of headers set by the server, but lets ignore that for now. For some file types, it doesn't matter what headers were set -- the browser will try to download them regardless.
Some of the types that the browser will view are listed in navigator.mimeTypes. However, this is not authoritative. The iPad can view Microsoft Office files but it does not report this.
Is there any simple way to figure out what the browser is going to do with a file before it does it?

Adding an 'paste screenshot' option to Mantis bugtracker

We're using the Mantis bugtracker (version 1.1.8), which is based on PHP. To ease the workflow of adding bugs we'd like to add an option to paste screenshots from the clipboard directly into the 'new bug form'.
Screenshots make bugreports much more valuable for developers, so I'd like to make adding them as easy as possible. Preferably without using an external application, but right in the browser.
I've looked all over for a way to add this, but no luck. How do other people do this? Am I missing something obvious?
edit: The bugtracker is a private one, in a small company, so I'd be willing to accept the security risks that for example Java applets present.
There isn't really a way to do this short of using ActiveX, applet or Flash-type technology on the client. Even then, there are numerous security roadblocks. A browser has no easy way to convert stuff from the clipboard into a suitable format for upload to a website, and even if it did there would be security concerns. For example, malicious code in a page could copy sensitive information from your clipboard and send it to the page's site without you even knowing it was happening.
Update: There is a standalone screen capture utility which claims to work with Mantis (and a whole bunch of other bug-trackers). This is probably your best option.
There is a drag n drop image attacher Java applet for Atlassian Confluence which has the functionality you need. It only supports Confluence but as the sourcecode is freely available under BSD you should be able to customize it to your needs.
Forgot the link:
http://confluence.atlassian.com/display/CONFEXT/Drag+and+Drop+Image+Attacher+Plugin
I've managed to build my own solution that works quite well. It places a Java file upload applet on the pages where you'd want to attach a screenshot. The applet has two buttons:
'paste screenshot', which pastes an image from the clipboard into the applet
'upload screenshot', which uploads the pasted image to the /tmp dir on the Mantis server and uses a javascript callback to place the autogenerated filename of the uploaded image into a form field.
Once the form is submitted, a new function in Mantis uses the filename in the form field to move the image from /tmp to the final location and processes the image just like other attachments. If the form is never submitted the uploaded file remains in /tmp and will eventually be purged by the server.
It works well, but has one drawback that I cannot avoid: I'm using Java to get access to the client's clipboard, but that requires breaking the JVM sandbox. Apparently, this can be done if you digitally sign the applet, which requires a rather expensive yearly payment (something like $500) to a company like Verisign (currently free options like cacert.org are still limited in their usefulness).
Another way to allow Java applets access to the clipboard is to create a file called .java.policy in your home or profile directory. This file should contain the following (Replace the domain with the domain that hosts your Java applet):
grant codeBase "http://bugs.example.com/-" {
permission java.awt.AWTPermission "accessClipboard";
};
Thankfully the solution is cross-browser compatible since the JVM always checks the same file regardless of the browser used. Since my solution requires having this .java.policy file on each client computer I don't consider it ideal, but workable in a controlled company environment.
I looked in to this also. No real easy way, so instead I allowed them to upload an unlimited number of files and those files would then be "attached" to that bug. It actually turned out to be better because they can upload screenshot, spreadsheets, word docs, etc.
Like yours, this is an internal only site so security is light. I did this in ASP.Net, but the general idea is that when they are looking at a page for a bug they have an upload box. When they upload something I pre-append it with the bug id. So ScreenShot.jpg becomes 233_ScreenShot.jpg.
Also on that page is a grid (GridView) that is bound to all of the filenames in my upload directory that start with that bug id.
To see what this looks like click here.
For tech-oriented users, there's always to possibility of using Eclipse + Mylyn + Mylyn-Mantis connector.
Then uploading screeshots is very easy:
Screenshot upload http://img216.imageshack.us/img216/246/screenshotattachments1.png

Resources