Bexf - Framework for creating extensions

Recently, I had to drill one extension of the Opera for myself, I had never done them at all before. I open the code, oh horror! A bunch of incomprehensible namespace chains (window.opera.extension.tabs, window.opera.contexts.toolbar, window.opera.extension.broadcastMessage) which at a glance and don’t understand what it is (I didn’t expect an easy way). I had to open dev.opera.com for further study. I did the extension and decided to write a framework, which greatly simplifies the development of extensions for Opera.


Consider the code (index.html) that you have to write before Bexf:

window.addEventListener('load', function () { //   var button = opera.contexts.toolbar.createItem({ disabled: false, title: "Bexf Button Example", icon: "icon.png", popup: { href: "popup_1.html" }, badge: {} }); //    button.popup.href = "popup.html"; button.popup.width = 400; button.popup.height = 150; //    button.title = 'Bexf Button Example\nTitle Updated via attr' + widget.preferences.getItem('some_option'); //   "" button.addEventListener('click', function () { //   var tab = opera.extension.tabs.create({url: 'https://www.google.com/', focused: true}); //     button.badge.textContent = ~~(Math.random() * 10); //    // tab.close(); }, false); //   "   " button.addEventListener('remove', function () { //    opera.extension.tabs.create({url: 'http://www.ya.ru/', focused: true}); }, false); //    opera.contexts.toolbar.addItem(button); window.setTimeout(function () { //  10      opera.contexts.toolbar.removeItem(button); }, 10000); }, false); 

With comments, everything seems to be clear, and if you remove, then a bunch of incomprehensible namespaces, properties and methods appear:

• window.opera.extension.tabs
• window.opera.contexts.toolbar
• button.popup.href
• button.badge.textContent
• window.widget.preferences.setItem | .getItem

And bi-variant approaches: window.opera.extension.broadcastMessage or window.postMessage (although everything is correct here)
In general, at a glance with extensions without a bottle can not figure it out. Bexf comes to the rescue.
')
Consider the same code (index.html), after Bexf:

 $.ready(function () { //   var button = $.createButton({ disabled: false, title: "Bexf Button Example", icon: "icon.png", popup: { href: "popup_1.html" } }) //    .attr({ href: "popup.html", width: 400, height: 150 }) //    .attr('title', 'Bexf Button Example\nTitle Updated via attr' + $.opt('some_option')) //   "" .click(function () { //   var tab = $.createTab({url: 'https://www.google.com/', focused: true}); //     button.text(~~(Math.random() * 10)); //    // tab.close(); }) //   "   " .remove(function () { //    $.createTab({url: 'http://www.ya.ru/', focused: true}); }) //    .addToPanel(); window.setTimeout(function () { //  10      button.removeFromPanel(); }, 10000); }); 

Quite another thing, right?

We get rid of the heap of namespaces and bring everything to a readable form that is familiar to all jQuery developers (chains, method names, events and helpers, setter-getter). We get simple and clear methods and classes:

• Button
• Tab
• Window
• .attr ()
• .bind ()
• $ .createButton ()
• Button.addToPanel ()
• .click ()
• .remove ()
• $ .ajax ()
• $ .opt ()

And we exclude the dual-variant approach broadcastMessage / postMessage, now it is replaced by one method $ .postMessage which causes this or that option depending on the location of Bexf (popup or index).

Files and links

The project is available on guglokoda code.google.com/p/browser-extensions-framework
Comment code framework (16.2 Kb) browser-extensions-framework.googlecode.com/files/Bexf-1.0.js
Minimized code (4.9 Kb) browser-extensions-framework.googlecode.com/files/Bexf-1.0.min.js

Bexf extension (proof of concept) example : browser-extensions-framework.googlecode.com/files/bexf-example.oex
Immediately I will describe the non-explicit expansion behavior: creates a button on the panel and changes the value of the badge of the button by the timer, as soon as the value reaches 0 removes the button, opens the tab with google.com after 5 seconds closes this tab and opens a new one with ya.ru

PS In addition to the test extensions, one “live” Habra Meter extension was created (I think the name makes it clear what it does). It has not passed moderation yet. If someone is interested in Bexf or the process of writing extensions for Opera, I can write an article on the creation and publication of the Habra Meter from scratch (which is there: a beautiful extension architecture, bexf, dynamic icons on the button via canvas).