, ,

A Traditional Extension Reborn: Tree Model Tab – Mozilla Hacks – the Net developer weblog

tree style tabs
tree style tabs

news image

Yuki “Piro” Hiroshi is a trailblazer and a sterling close-it-yourselfer. Whenever the Tokyo-essentially based programmer will get aggravated with any aspect of his browsing ride, he builds a workaround for himself and shares it with others. After authoring virtually A hundred browser extensions, Piro currently took on his ultimate notify but: migrating the legacy Tree Model Tab (TST) extension to work with the original WebExtensions API and Firefox Quantum.

TST on the legacy XUL platform became a truly advanced extension. So rebuilding it for the original WebExtensions API had a vogue of out of the ordinary challenges. Piro hit a quantity of snags and frustrations, including undocumented behaviors and bugs. What helped? A definite mind-location and a laser-tantalizing focal point on the capabilities of the original APIs. Working inner the context of the original platform, Piro became able to full the extension and bring a crowd well-liked to the fastest Firefox but.

Desire more technical detail? Like a maintain a examine Piro’s submit WebExtensions Migration Story of Tree Model Tab for his strategies, code snippets, and architectural diagrams of the XUL and WebExtensions platforms.

How You Bought Started

Q: What browser did you first perform an extension for?
I wrote my first extension for Mozilla Application Suite, sooner than Firefox became born.

Q: What extensions maintain you created for Firefox?
Tree Model Tab, A pair of Tab Handler, Textual allege Hyperlink, and loads of others. My extensions mainly purpose to alter Firefox’s behavior, pretty than providing fully original aspects.

Q: What number of extensions maintain you created for Firefox?
I’ve written virtually A hundred extensions for Firefox and Thunderbird. About half of of these are purely for my non-public use. I’ve printed around 40, mainly legacy XUL extensions, and most of them are no longer migrated to WebExtensions but.

Q: The save can we uncover your extensions?
My printed extensions are on addons.mozilla.org. You could presumably rep older extensions, including unlisted extensions, on my online page.

Tree Model Tab extension for Firefox
Dash and descend to neighborhood connected tabs.

More about Your Project

Q: Why did you perform your extensions? What notify were you seeking to resolve?
My motivation became to enable you browse the on-line. After I come across any dinky anxiousness or anxiousness, I perform a original extension as a workaround.

Q: How a few years maintain you been working with extensions?
Sixteen years. My first extension became launched in November 2001.

Q: How has the technology modified all over that time?
There had been changes to Firefox itself, love improvements within the Gecko rendering engine and JavaScript engine. And there had been original Net fashioned applied sciences love CSS3, ES6, and others. Nowadays, I learned the async-preserve up for syntax while constructing WebExtensions. Those original applied sciences abet me exquisite up “soiled” or “hacky” code and withhold it more without considerations.

Q: Did you migrate your extension from XUL to WebExtensions? How subtle became that course of?
I migrated Tree Model Tab, a mammoth XUL extension, to a WebExtension. It became very subtle, to be generous. The most subtle section became the characteristic triage. Due to boundaries of the WebExtensions APIs, some aspects were definitely no longer migratable. Making these choices became painful for me.

It became furthermore tough to detect the 2nd when my extension must execute and override Firefox’s default behavior. As I mentioned earlier, most of my extensions are created to alter Firefox’s behavior. However the WebExtensions API offers most fantastic restricted entry aspects, so I generally maintain to guess what’s occurring in Firefox at any given 2nd, in step with knowledge love the define of events.

Q: What sources were most priceless when enforcing Firefox extensions?
For researching how to implement extensions in XUL, I obsolete DXR, the safe search system for offer code of Mozilla products. For WebExtensions, I seemed at the provision code of diverse current WebExtensions and Google Chrome extensions.

Q: What web sites or tools helped you study about the WebExtensions API?
MDN Net Scientific doctors is gentle the first entry point. Additionally I mediate hyperlinks to the provision code of current extensions will abet original extension authors, love an inverted dictionary.

Your Journey with WebExtensions

Q: What original technology in Firefox Quantum helped you with migration?
Mozilla launched many original WebExtensions APIs in Firefox 57 [Quantum], such because the openerTabId property for tabs. The opener knowledge is highly connected for Tree Model Tab. If these APIs weren’t accessible, Tree Model Tab couldn’t be migrated successfully.

Q: On a scale of 1 to 10, with 1 being the most appealing, how subtle became it to write to the WebExtensions APIs?
In celebrated, it became a 2 or three. WebExtensions APIs are straightforward sufficient and clear for extensions that correct add a original button, sidebar, or diverse out of the ordinary characteristic to Firefox. Nonetheless, there are some undocumented behaviors on edge instances, they generally could presumably well be closely tied to a particular Firefox commence you’re engaged on. As soon as you happen to’re writing extensions that switch Firefox’s behavior, you will likely be succesful of maintain to dig into these undocumented behaviors.

Q: Now that you simply’ve moved to WebExtensions, what close you want about it?
I love the soundness of the APIs. In most cases, WebExtensions APIs are guaranteed to be appropriate with Firefox, now and within the lengthy scoot. So I’m able to keep lengthy-lived extensions and not utilizing a dread about breakage in future releases.

Q: How lengthy did it lift you to write this extension?
I started to keep the WebExtensions-essentially based model of Tree Model Tab in slack August 2017 and launched it in November 2017. Obviously, some substances of the tree management functionality were imported from the legacy XUL model, which I developed between 2007 and 2017.

Q: How subtle is it to debug Firefox extensions?
These days that is extremely straightforward to study. Most extension authors don’t maintain to change into consultants of Firefox-specific applied sciences, especially XUL and XPCOM. Furthermore, the about:debugging characteristic of Firefox itself is extremely priceless for debugging of extensions. A expose-line tool called web-ext is furthermore priceless for debugging and publishing.

Q: How is adoption of your Tree Model Tab extension?
Most folk appear to welcome the original WebExtension-essentially based model. Some insist that Tree Model Tab is the first cause they use Firefox. And so that they’re inflamed now that TST is accessible for Firefox 57 [Quantum] and future releases.

Q: What considerations, if any, did you ride while constructing a your extension? How were these considerations resolved?
For the reason that WebExtensions API is gentle beneath energetic building, I did rep some bugs while constructing the original Tree Model Tab extension, on edge instances. I reported these bugs in Bugzilla. With WebExtensions, considerations attributable to API boundaries are generally no longer doable to repair. Workarounds come in most fantastic in about a instances. So reporting to Bugzilla and looking ahead to the repair is the ultimate notify extension authors can close.

Nonetheless, that is sterling news when considered from any other standpoint. In legacy XUL extensions, authors could presumably well close anything else, including changing Firefox’s inner XPCOM substances. This capacity that, the boundaries of an extension and the author’s accountability could presumably well be widened infinitely, and authors would maintain to make choices on the total characteristic requests from users: to full them or no longer. That terrified me plenty. However, with WebExtensions, authors can correct insist, “It is no longer doable attributable to the API boundaries.” I mediate here’s a truly priceless and well-known switch in WebExtensions.

Q: What advice would you give to others porting to WebExtensions?
Are trying to simplify your building responsibilities. In define for you to port a multi-characteristic extension, mediate about hanging every characteristic correct into a separate extension, rather then seeking to set them all into one single extension. You could presumably well make these extensions interact with every diverse by the utilization of API strategies that are either implicit (in step with shared knowledge love properties tabs.Tab and openerTabId) or explicit (in step with custom messages for runtime.sendMessage()).

Cease centered on the outcomes you need, rather then caring how you will likely be succesful of get it done. You could presumably well no longer come up with the probability to totally reproduce the behavior of your XUL extension within the original WebExtensions model. As an illustration, historical design-essentially based synchronous (blocking off) APIs are no longer any longer accessible, and uncooked DOM events on Firefox UI are no longer any longer “listenable”. So you wish neglect how you obsolete to full issues, and study what’s the celebrated map within the WebExtensions world. You could presumably well likely rep an even bigger formula to shuffle about it, and gentle get to the identical outcomes. Then you definately’ll successfully dive into the original world, and you’ll maintain an kindly ride!

Connected Insist

WebExtensions Migration Story of Tree Model Tab
Why Firefox Had to Spoil Your Well-liked Extension
Q&A with Grammarly’s Sergey Yavnyi
Q&A with Add-on Developer Stefan Van Damme
Remaking Lightbeam as a Browser Extension
Injurious-browser extensions, accessible now in Firefox


Judy is a Technical Author for Mozilla with years of ride writing about start offer instrument initiatives, now centered on the start web platform.

More articles by Judy DeMocker…

Learn More

What do you think?

0 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%