The title is very self-explanatory, but I'll get into a deeper explanation here. I have a Firefox extension for my image hosting site (which is currently down).
It currently has two features:
- Right click on image and remote upload
- Right click on image, get a Javascript popup to enter new width and upload
What the extension still needs is a feature (or two) which allows the user to upload the current visible things on the browser or a full capture of the browser (including what's under the scrollbar).
What I have tried:
I have tried copying various pieces of code from other extensions and combine them with my own. They included stuff such as canvas which I did not really understand. I was able to get a base64 image string somehow (I don't exactly remember how). With that string, I thought the best way to achieve my goal is send it to my image host via XMLHttpRequest and create the image in my host. The ResponseText would be a link to the image.
As you can see, I was doing too much here - I obviously don't need to do extra handling in my server side for this issue. I think there are ways to handle everything from the extension only, without extra coding in my server-side (correct me if I am wrong).
Actual issue
This is the add-on: https://addons.mozilla.org/en-US/firefox/addon/imgit/
As you can see the two context menus that get added by the extension, I need a third context menu, which has an arrow to the right to open another menu with the two new options I need:
- Capture visible screen and upload
- Capture full screen and upload
The first option should capture and upload what's visible in the browser, excluding what's under the scrollbar. The second option should capture everything and upload it to my website, including what's under the scrollbar.
Adding the context menus is not a big deal, but making them behave the way I want is the problem I have. I have no idea how to start and my research around the web couldn't get me further. Creating the image via Javascript somehow (using canvas which I don't know how) and sending a base64 encoded string to my website could actually work, but taking the snapshot and making it base64 encoded is the problem. I'm also unsure if Firefox extensions actually let me use Ajax to send/receive data.
What I need from you
I need a logical approach to this issue. If you have an idea, please answer and showing code snippets would be really appreciated. I'm not a Javascript guru, but with some information on how to start, I could get myself out of this mess.
What is the best way to achieve what I want?
