What is the easiest way to develop Firefox extension? - javascript

I'm planning to develop a simple Firefox extension that will shorten URL of a currently active tab, display a popup with the shortened URL, and place it into the clipboard.
In Google Chrome, this would be pretty easy (according to http://developer.chrome.com/extensions/getstarted.html) -- pure JavaScript plus a few calls to JavaScript API-s of interacting with the browser's UI.
However, after searching around for a good Firefox extensions tutorial, the most officially-looking links I found are:
https://developer.mozilla.org/en-US/docs/Extensions
https://developer.mozilla.org/en-US/docs/Building_an_Extension
How do I write a Firefox Addon?
According to them, it looks like I will have to learn the XUL language for even the simplest interactions with the browser's UI. On top of that, I will have to set up custom Firefox profile so as not to hose my default profile during development, create complicated directory structure, write manifest in obscure XML, figure out how to package and test whatever I implement, etc.
It's 2013, isn't there an easier way of building Firefox extensions?

It's 2013, isn't there an easier way of building Firefox extensions?
Yes there is!
The links you provided in the question are unbelievably outdated. There is a new, much better way of developing Firefox extensions -- Firefox Add-on SDK.
However it's pretty hard to stumble upon it by just googling along the lines of 'firefox addon tutorial'. I'm amazed Mozilla doesn't advertise it more aggressively, or at least mention it on those pages you found.
Steps to get started (Mac/Linux, but should be pretty similar for PC):
Download the SDK from https://addons.mozilla.org/en-US/developers/builder, unpack it.
Quickly glance over the README file (always useful).
Execute source bin/activate from the SDK dir (the same dir the README file is in).
Execute cfx docs -- this bootstraps local copy of SDK docs and opens it in your browser.
Leave the SDK dir, create an empty dir for your extension.
Execute cfx init inside the extensions dir -- this generates all the necessary files/directories.
Follow the rest of getting-started-with-cfx page:
Update lib/main.js with just a few lines of JS to place a custom widget onto add-on bar.
Execute cfx run -- this opens fresh Firefox instance with your new shiny extension in it.
All in all, it took me just a few hours to read the documentation, get familiar with the SDK API-s, find SDK module to place a widget onto a navigation bar instead of add-on bar, and develop fully-functional extension in just about 50 lines of JavaScript.
HTH!
Update
There is a new standard, called WebExtensions
From MDN
There are currently several toolsets for developing Firefox add-ons, but WebExtensions will become the standard by the end of 2017.
If you are writing a new add-on, we recommend that you write a WebExtension.

As of https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/, the only way going forward will be to use WebExtensions. The last SDK extensions will be accepted for Firefox 52, while Firefox 57 will end all other extension support, supporting only WebExtensions.
Firefox copied Google Chrome's extension API. So you could just use your Chrome extension and see if all the APIs are already supported in Firefox (they should be as of now).
Programmers such as NoScript's Giorgio Maone actively support the change to WebExtensions.
To develop a WebExtension, you need
either the web-ext-tool that can be installed via
npm install --global web-ext
or simply use Firefox's about:debugging or Chromium's chrome:extensions to temporarily load the webextension.
Either way, you need a manifest.json file in a directory created by you, which glues all functionality together. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension for a first example. Or the Google docs at https://developer.chrome.com/getstarted.

Yes there are three different techniques you can use to build extensions:
Add-on SDK-based extensions
manually bootstrapped restartless extensions
overlay extensions
You can read comparison between here
If you can, it's advisable to use the Add-on SDK, which uses the
restartless extension mechanism but simplifies certain tasks and
cleans up after itself. If the Add-on SDK isn't sufficient for your
needs, implement a manual restartless extension instead.
Steps to get started with Add-on SDK-based extensions
Installation
Installation on OS X, FreeBSD, Linux
Installation on OS X using Homebrew
Installation on Windows
Create user interfaces
Interact with the browser

There are two official ways for developing add-ons, each of them has pros and cons:
1- WebExtensions (newer method):
WebExtensions are the future of Firefox add-ons. If you can use the WebExtensions API, it's the best choice. You can develop and publish WebExtensions right now, but they're still in an early state.
2- Add-on SDK (older method):
The Add-on SDK provides APIs for developing Firefox add-ons, and a tool for developing, testing, and packaging them.

I made a tutorial on developing extensions using the Firefox addon SDK:
How to develop a Firefox extension with the addon SDK

Related

How can I link to a chrome extension in Chrome Web Store when I'm not the developer?

I've seen the "How to link to chrome extension like Chrome Web Store?" question from Oct. 2011, and I tried to implement it.
However, I realized after some testing that the approach described in answer to that question regarding Inline Installation only works in situations where the original developer of the extension links to his own creation in the Chrome Web Store.
I have a daily podcast that I post to my website, and I want to provide a one-click link for Chrome users to click in order to install The RSS Aggregator extension (which I did NOT develop) directly, so that desktop visitors using Chrome can view my podcast feed in a formatted page rather than just seeing XML code.
Since I'm not the original creator of The RSS Aggregator extension, I don't see a way for me to accomplish this.
For the moment, I'm sending visitors to the Chrome Web Store to install it there, but I've been getting feedback from tech-averse visitors that they can't figure out how to install it without step-by-step installation instructions. Sadly, there are still a lot of people out there who have trouble handling something as simple as adding an extension to their Chrome browsers.
Hence my desire to provide a one-click solution on my site.
Is there a way I can implement a solution on my site?
Never used it before, but maybe this helps you:
https://developer.chrome.com/webstore/inline_installation#cws-link

Call GnuPG from Firefox add-on

I'm writing an add-on for Firefox. I want to know what is the best way to use GnuPG from the add-on.
I have tried several Node.js modules and does not work either within the add-on because it can not find its dependencies
I solved the issue developing a webextension.
Webstaensions can access to the Window object, i was talkig with a developer of the Mailvelope add-on and he suggest the switch to a webextension, they are planning that switch for they add-on

firefox add-on develop | rewrite browser.xul

I want to develop a Firefox add-on that change the whole UI,
something like write new chrome://browser/content/browser.xul file.
I'm js developer, have no experience with add-ons development
I didn't find something like that at add-on sdk documentaion
AFAIK, such functionality is available through XUL overlays in plain old non-bootstrapped Firefox add-ons (those, that need restart of web browsers to install). If it is OK for you, you may just create such add-on. It is as easy as writing ordinary HTML (XML in fact). Look for Chrome Registration and for XUL Overlays on MDN for details.
If you are required to create bootstrapped (restartless) Firefox extension or you must use Addon SDK, then your only option will be to watch newly created browser windows and modify them manually. In that case you are not able to modify the source of chrome://browser/content/browser.xul file.

Windows 8 Metro and Google Analytics

Will it be possible to use the Google Analytics JavaScript library (https://developers.google.com/analytics/devguides/collection/gajs/) for the Windows Metro JavaScript based application to trace views accessed by user?
In general, if a JavaScript library you want to use is on a CDN or a server external to your app, the answer is no, as Windows apps written with HTML/JavaScript cannot load external JavaScript libraries...if you try, a security exception will occur.
Many libraries will work fine if you copy the JS file into your project and run it locally. For example, jQuery works just fine this way. I have not tried the Google Analytics library, so you might just want to test it out and see if it will work with a local copy.
Something else to consider, however, is that unlike a web site, a Windows app written in HTML/JavaScript may occasionally be offline, in which case, a library written with the assumption of network connectivity would likely not work. So in this particular case, you might not get the data that you're hoping for.
Hope that helps.
we tried http://w8ga.codeplex.com/ (w8ga) to work with GA in our win8 js app.
Currently W8GA seems doesn't support html/js. Also I have no idea why developer didn't mension it( it's supports only c#/xaml metro app )
So, we found another way to do it; Look for cobra Tab 's answer at the bottom of this page: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f81ebbb9-d711-40f1-8a82-9aed44e2d8fe/
And finally, we are waiting Adobe's Omniture sdk:
http://microsite.omniture.com/t2/help/en_US/sc/appmeasurement/winrt/index.html#Developer_Quick_Start
Hope these answers helps...
We're using the free version of markedup in our applications with great success. In addition to simple page views it shows you some app specific numbers like number of installs, exception details, etc.
I'd recommend using the Google Analytics SDK for Windows 8 and Windows Phone. It is built as a WinRT component and therefore supports both JS & Xaml Win8 apps.
Full disclosure: I am the author of this SDK; I built it for my own app and decided to open source it. There are other frameworks out there but AFAIK, none of them support the new GA universal analytics protocol so they only work with older GA properties and don't support all the cool new features GA recently added just for apps.

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.

Categories

Resources