Firefox Addon Development - firefox

I am getting started with Firefox addon development and have got myself acquainted with the Add-on Builder. Is this wizard all I need to get deep into Firefox addon development (if so, where would I create the XUL files and how would I create a custom toolbar?). Or is it that one cannot implement all features using this Add-on Builder? Also are there any good tutorials which explain how to get started with Firefox addon development using the Add-on Builder (because it seems so much easier).
Tutorials which I already have referred to:
https://developer.mozilla.org/en/Extensions
http://blog.mozilla.org/addons/2009/
But these are not specific to using the Add-on Builder. I would please like someone to point me to where I can find help to develop using the Add-on Builder.
Also if I am developing the addon locally using the SDK is there any good editor which I can use which will show me the list of commands that I can execute (like Eclipse in Java).
The red line is where i want my icon to appear. Is it possible to do it using the addon builder.

There are currently two kinds of Firefox extensions:
Classic extensions use a XUL-based user interface. They can do almost anything but it might take a bit until you see some results with your extension. For documentation on classic add-ons see How do I write a Firefox Addon?
Extensions based on Add-on SDK use HTML for user interface. The SDK provides a simple but limited API. In particular, it explicitly won't let you create toolbars, only single toolbar icons (which makes sense, extensions shouldn't be wasting so much screen space). It won't let you determine the icon placement either - as of Firefox 4 all extension icons are supposed to appear in the add-on bar (the user can customize the toolbars and change the placement however). You can get low-level platform access with chrome authority however. The official Add-on SDK documentation is pretty much all you've got here I think.Edit: Ok, the information on limitations of the Add-on SDK is somewhat outdated. As of Firefox 30, adding toolbars is possible. Also, as of Firefox 29 the icons are placed in the main toolbar by default - the add-on bar is no more. So the only real limitation remaining is the icon placement.
The Add-on Builder is merely a web interface to the SDK - it allows you to edit the extensions conveniently but otherwise it uses Add-on SDK to generate the extensions.

To put an icon directly in the toolbar currently, your best bet is to use Erik Vold's toolbar module ( available in Builder as a package ). here is an example that does that:
https://builder.addons.mozilla.org/addon/1044724/latest/

Related

Need to convert a legacy safari extension into Safari App Extension. Searching for documentation, starting steps and tutorials on Xcode

I have a legacy safari extension which I need to convert into Safari App Extension to submit into Extension Gallery. I am new to Xcode therefore, not familiar with it's build and run process. I tried looking into official documentation from developer.apple.com but it is so abstract.
Why do we need to create a parent app in Xcode before creating a
safari extension target?
If so what parent app template should I
choose? Cocoa App?
Where I can find starter tutorials on Xcode?
What is the submission process to Extension Gallery?
How can add the extension under development to my safari through xcode for testing?
I heard they need the URL for extension to approval, when we are submitting extension through developer account why to host it on URL?
Any documentation or answers to the above questions would be very helpful. Thank you.
On 2. and 3, I had the same struggles - I wrote up a tutorial on basic style sheet injection in Safari App Extensions here: https://ulyngs.github.io/blog/posts/2018-11-02-how-to-build-safari-app-extensions/
I'm converting the legacy safari extension to safari app extension too and have some answers for your questions:
Because app extension is more as functional extension then safari browser extension and could bring more features to you. And as per Apple says: safari app extension gives more communication and data exchange between Safari and your native app, docs.
But I have no more ideas if you only want an extension for safari why this is only way to do extensions.
Yes, you should use the Cocoa App template. If you don't need the window for your app, you can remove it simply in Main.storyboard or make app as a "service".
A lot of docs from Apple I've read but understood a bit then expected. So I found some youtube channels (they are 2 or more years old but some things seems don't changed) Some vieos here and the Osx Dev Daily playlist on this channel. And of course official swift docs if you select swift for your app as PL.
I haven't read about this, but think it must be submitted with your Cocoa App.
First of all you should to run your app target and only after this you should run your extension target and choose "Safari" in showed window to run in. If you have no the signing at the moment so ensure to enable "Allow unsigned extensions" in Development > Allow unsigned extensions in Safari app.
Don't meet this info, could you share it, pls? (sry, don't have enough knowledges)
Hope, it helps to you!
P.S. also recomend to see the converting docs, but it may be insufficient for converting :)
EDIT: it's seems to be incorrect to remove app window or change the default menus created by Cocoa App template for app submit for App Store. Some people got negative decision of app submit because of menus changes of redundant items or app have poor functionality or has not it at all. So consider to read the submit docs.
Please, share your experience when you'll have success app submit!
EDIT 2: Today I found template in Xcode 10.1 that can be used for Safari Extensions directly. It is as previous workflow (template Cocoa App + add extension target) but there is safari extension target already included
The app window and menu is simplified for developers:
So you don't need work with your app and you can concentrate on extension only.

How to best author a Apple Helpbook for a macOS app?

macOS apps, e.g. Photos.app, provide a help panel to the user
Is there a way to author such a Help Book in your own macOS app?
Is there a way to at least provide a toolbar to be used for a table of contents?
I am asking specifically about the UI and all the user interactions. Not how to generally create and register a helpbook.
Update
Here is what I’ve been able to find/gather/learn from others. A Help Book appears to run on a separate app/process called “HelpViewer”. Any Apple macOS app displaying a help makes use of a DDMViewerController that isn’t public.
There is an “app.css” and an “app.js” being used by the Apple macOS app “index.html” of the Apple Help Book. The Javascript one manipulates the DOM to create the “show-hide” link that toggles the Sidebar. Haven’t been able to find how to instruct HelpViewer to use a sidebar.
There is a WWDC talk from back in 2014, “Introducing the Modern WebKit API” that talks about “User Scripts” and “Script Messages” which allow communication between a Webview and Cocoa. https://developer.apple.com/videos/play/wwdc2014/206/
AFAICS, there is no way to have HelpViewer display a custom view or have a sidebar. My guess is that you would have to implement everything yourself. That is an NSSplitViewController, NSToolbar, NSOutlineView, any Javascript alongside the “app.css” to get the look and feel.
Currently it's not possible to implement the sidebar as shown in the Maps and other built-in macOS applications from 10.13 onward.
Versions of macOS from 10.10 (built-in applications) implement sidebar navigation with HTML and JavaScript, and Apple Help Viewer itself offers a window.HelpViewer object with some hooks that enable/disable the Help Viewer's table of contents button. Once enabled, it will callback into your own JavaScript where you can show/hide TOC via CSS or JS.
From approximately 10.10, Apple's non-built-in applications have also been using this technique. For example, iTunes and Xcode help both do this.
From 10.13, macOS has a newer version of Help Viewer that provides an actual Cocoa-native table of contents and windows splitter, as well as some new properties on window.HelpViewer; presumably these can be used to enable/disable the Cocoa sidebar and populate the TOC, but these are undocumented and I'm not sure anyone outside of Apple has been able to reverse-engineer this functionality yet.
And in any case, it wouldn't work if you offer Help Books to pre-10.13 users, and the use of undocumented API's restricts applications from the App Store (although, I'm not certain that Apple scans Help Book JavaScripts for API usage as part of their review).
(There are also a lot of other changes to how Apple's built-in application Help works now, too, but that's another topic entirely.)
Thus the answer for now is we can't, or shouldn't, or just don't know how. Alternatives include using something like using jekyll-apple-help (no affiliation) or Middlemac 3 (my project), or just rolling your own.
For those interested in knowing how Apple does it, I've documented a lot of it here (disclosure: link to my own website).
I'm not sure whether Apple's current applications still use it, but there is a very old API on macOS for Help Books. Apple has documentation on how to create them and some introduction. In short: Help books are standard HTML files with additional proprietary anchors. Those anchors are accessible via the class NSHelpManager, e.g. to open the help book at a specific page.
See also this question.

Can I use Firefox developer toolbar commands in my addon?

I am developing a Firefox addon for making fullpage screenshots of web pages. I know that several good addons that do this are already available, but we have some specific needs so I thought I would try to make my own.
I read that I can do screenshot --fullpage in the Firefox Developer Toolbar. This seems to works well. Can I also call this command from within my addon? If so, how would I go about that?

How exactly do I get the following GUI in a Firefox extension?

I am new to Firefox development and am using the Add-on SDK. I would like to know how to get the following user interface in an extension:
Is this interface a panel? If not, what is it and how do I go about getting this interface in a Firefox addon?
No, this isn't a panel. Your screenshot shows a XUL-based dialog window which is why it looks like a native dialog.
The Add-on SDK uses HTML for its needs however, creating a native-looking dialog is hard there. There is a fork of the Add-on SDK with XUL support but it is outdated and very experimental.
The other option would be building a classic extension. It can simply have a XUL file for the dialog (using <dialog> as root tag) and call window.openDialog() at some point to show it.

Do XUL applications work only on Firefox

I've seen an XUL-based application recently that supposedly works on the desktop. Isn't XUL the Firefox language? I thought it wouldn't work on anything other that Firefox and certainly wouldn't work as a desktop application.
Can someone who knows more about XUL confirm its compatibility with other browsers (IE, Chrome, etc.) and if it runs as a desktop application, its compatibility with operating systems (Windows, Mac, Linux)
check out http://en.wikipedia.org/wiki/XULRunner. it was created to run xul applications like firefox. songbird is also based in XUL. for more detail see this SO question.
to actually answer the real question, yes, desktop apps can be built in xul, as firefox is. the wiki page i linked to even points to a video game being built using it. at its core its just another application framework.
XUL is a descriptive language for UI used in Firefox but also used in other mozilla apps, like Thunderbird for example
There is a projet named Xul Runner which allow using XUL for desktop apps (see Pencil for example).
AFAIK, all Mozilla apps are compatible with Windows, Mac, Linux and other system for some.
XUL is a user interface language. It was created originally for mozilla/firefox, but is also used by thunderbird.
The Gecko layout engine is what renders XUL and any application that uses this engine can be built with it. See XUL Runner.
The layout engine has been written with cross platform concerns, so it runs on Windows, Linux and Macs.
XUL only works on xulrunner, and Firefox is built on top of xulrunner. Other applications are built on xulrunner (e.g. Thunderbird). You can also build applications on top of xulrunner.

Resources