Aug 30 2011

experimental work in progress : Kynetx KBX augmented

Category: kynetx,technology

These days I should have been working on polishing SuiteFramework API which I promised to release on june ( this will teach me to announce release dates… ) but my procrastinating mind always finds a good reason to believe there are other things that deserve all my attention, RIGHT NOW.

About a month ago I was dreaming out loudly about a crossbrowser javascript library that would make it possible to access browser’s internals  . Last time I dived into Firefox I didn’t enjoy the journey so much in XUL-manifesto-xml-XPCOM-land . Recently I was lucky to stumble on good Firefox Add-on SDK docs (previously calledJetpack SDK) which showed that there were reasons to be much more optimistic. I also found an online addon builder which acts as a code repository so developers can understand the architecture of FF addons through working examples and share their code through libraries and that made me feel that Mozilla had become a sweeter monster.  I was positively suprised that chrome and firefox shared similar terminology in their addon architecture like “content scripts” ( FF , Chrome) .

In order to make a proof of concept I focused on how to modify the behavior of the Firefox Location Bar / Chrome omnibox so a KRL ruleset could inject code to augment the browser itself instead of pages.   This meant finding an entry point in the KBX were native api functions could be injected and executed on the fly. The way KBX emulates the Greasemonkey API by exposing javascript functions in a content script and communicating with the “addon context” ( main.js on FF and background.html on Chrome) helped me to pass this first obstacle.

One problem that raised while trying to run the injected code is that both Firefox and Chrome expects an addon to explicitely declare which API packages it will run. Thoses permissions are declared in manifest.json for Chrome. On Firefox both the online add-on builder and the command line SDK ( which I recommend for working locally ; check “Get the SDK” at the bottom of this page ) create a harness-options.json manifest file automatically during xpi build time (the whole process is explained here). On Chrome you have to declare what you use manually in manifest.json.
So if we want developers to be able to inject any method available by the APIs then it is necessary to give permission to all of them inside KBX.

What do we have?

A fork of the original KBX  extension that allows a KRL webhook or an external js file to feed the KBX extension with javascript code that runs inside the extension ( as opposed to javascript code that runs inside a page and only has access to the DOM ).
A Kynetx browser app that adds  github search (inspired by “Github address bar search” ) in the Location Bar (Firefox) or  Omnibox ( Chrome) . As all Kynetx browser apps this app is cross-browser.

On Chrome the github search engine gets invoked by first pressing the ‘k’ letter when the cursor is in the omnibox. Then you can type : github mysearch_terms to search for “mysearch_terms” on github or  type github @someuser to get “someuser” profile page.

On Firefox you don’t need to press ‘k’ first .

Get the modified KBX for Chrome and KBX for Firefox .
Install Kynetx “Github Search Engine” app .

 

 

 

 

 

 

 

 

 

 

Why use it ?

For now this modified KBX extension is experimental. If the concept reaches maturity then we can expect richer Kynetx browser apps that go beyond the scope of webpages because they can interact with location bar/search bar, take screenshots , make desktop notifications, modify context menus, make cross-Origin XMLHttpRequest … and do all the things browser addons/extensions you find on Mozilla Addons and Chrome Web Store do.

For developers:

The extensions exposes the javascript function remote_url_eval_in_addon(urls_array) which takes an array of urls pointing to js files ( js files on the remote server should end with _chrome.js or _firefox.js but in remote_url_eval_in_addon you will call :

remote_url_eval_in_addon([“http://lolo.asia/kynetx_remote_eval/omnibox_lib.js”,”http://lolo.asia/kynetx_remote_eval/github_search.js”]) and the KBX extension will add the missing _chrome or _firefox part .

Another method you can use is webhook_eval_in_addon(webhook_array) that can be used inside an emit << js_code >> . It takes an array of objects as unique paramenter. Each object has the field ‘appid’ which targets a ruleset and ‘eventname’ which targets a webhook in that ruleset.

Ex: webhook_eval_in_addon([{appid:”a1135x118″,eventname:”omnibox_lib”},{appid:”a1135x116″,eventname:”omnibox_github”}]) will request two webhooks from inside KBX :

http://webhooks.kynetxapps.net/h/a1135x118/omnibox_lib?browser=Firefox ( or browser=Chrome)

http://webhooks.kynetxapps.net/h/a1135x116/omnibox_github?browser=Firefox ( or browser=Chrome)

Those webhooks should return javascript which gets evaluated inside KBX in main.js (FF) or background.html ( Chrome) in sequence.

The omnibox_lib webhook returns a browser specific library of plumbery code for adding search engines to the Location Bar/Omnibox with the add_search(options) function.

The omnibox_github webhook returns javascript code that calls add_search(github_options) where github_options is an object that specifies the behavior of the github search engine :



rule omnibox_github_webhook is active {
       select when webhook omnibox_github
       pre {
           browser=event:param("browser") ;
           
           js_FF = <<
           //add github search
           add_search({
           keyword: 'github',
           icon: "github_16.png",
           matches: /^github\s/i,
           getSuggestions: function(query) {
               var suggest;
             
             query = query.replace(/^github\s/i, "");
             
             if (/^@([\w\d_-]+)/.test(query)) {
                   var username = query.match(/^@([\w\d_-]+)/)[1];
                   suggest=[
                                {
                                      title: 'Github user: ' + username,
                                      label: "View user profile for @" + username,
                                      favicon: self.data.url("github_16.png"),
                                      url: 'https://github.com/' + username
                                  }
                              ];
                   
                 } else {
                   suggest=[{
                         title: 'Search Github for: ' + query,
                         favicon: self.data.url("github_16.png"),
                         url: 'https://github.com/search?q=' + encodeURIComponent(query)
                         }
                            ];
                 }
                 
              
             
             return suggest;
           }
           });
           >>;
           
           js_Chrome = <<
           add_search({
           keyword: 'github',
           icon: '',
           matches: /^github\s/i,
           getSuggestions: function(query) {
               var suggest;
             
             query = query.replace(/^github\s/i, "");
             
             if (/^@([\w\d_-]+)/.test(query)) {
                   var username = query.match(/^@([\w\d_-]+)/)[1];
                   suggest=[
                                {content: 'https://github.com/' + username, description: '<match>View github user profile</match> : https://github.com/<match>' + username+ '</match>'}
                              ];
                   
                 } else {
                   suggest=[{content: 'https://github.com/search?q=' + encodeURIComponent(query) , description: '<match>Search github</match> : https://github.com/search?q=<match>' + encodeURIComponent(query)+ '</match>'}
                            ];
                 }
                 
              
             
             return suggest;
           }
           });
           >>;
            js = browser eq 'Firefox' => js_FF  | js_Chrome;
       }
       {
           send_directive("text") with body = js;
       }
     }

 

You can create your own custom and more elaborated search engine with dynamic suggestions by writing a new webhook that returns js code that calls add_search(custom_options) .

Firefox 4 runs javascript 1.8.5 code so this is the opportunity to improve your javascript knowledge using the new available functions and syntax like forEach for arrays. On Chrome we can use at least javascript 1.5 ( http://stackoverflow.com/questions/300185/google-chrome-javascript-version )

What’s next ?

– evaluate impact on browser security ( what’s the worst that could happen and how to avoid it)

– specify a cross-browser API that aims to provide access to installed extensions/addons as if they were services using things like code modules on Firefox or cross-extension messaging on Chrome .  KRL rulesets could then mashup data/features provided by installed extensions/addons .

– create more cross-browser KRL modules that act like abstraction layers to common browser features available in Firefox Add-on SDK and Google Chrome Extensions API

 

 

Related Posts:

  • No Related Posts


May 30 2011

SuiteFramework API, a Kynetx KRL development module to create Kynetx app collections, easily

Category: kynetx,technology

SuiteFramework tries to resolve the following problems:

  • how to create richer applications with Kynetx KRL without compromising readability , extensibility , reusability and maintenance of code
  • given the existing tools ( appbuilder.kynetx.com ) and KRL language constraints , how do we get to create apps in team work
  • how to add persistent settings to an Kynetx app so users can activate/desactivate features they like/dislike

Modularity with KRL is achieved with KRL modules . A module is a ruleset that exposes functions and defactions so they can be used in other rulesets. Rules inside rulesets can’t be reused (yet?) in other rulesets so this makes it complicated to import complete app features. That’s where SuiteFramwork helps.

Let’s say developers have made independant apps for Facebook like  SendAnywhere, Privatebook, Unfriend Finder , MyNewsFeed , Foul Facebook Filter. All those apps are great and each one creates a nice experience for users but who are the users who know all of them ?  Who are the users who want to go through five different installations? Who are the users who want to manually check if there are Facebook apps ?

Wouldn’t it be great if users could install all Kynetx Facebook apps with one click and run new Kynetx Facebook apps as soon as they are released without the need to install them ?

This is what SuiteFramework does, it allows developers to create “app suites” or “meta-apps” that launch sets of apps no matter how they were developed initially. Because some users might not be interested by one app or another, SuiteFramework allows the user to disable an app of the collection on the fly. Those user specific settings are persistent and follow the user during his daily use of the app collection.

SuiteFramework  alerts the user when a new app has been added to the collection so he can decided to have it running along the others or disabled it.

SuiteFramework also gives the users the ability to receive a notifications when an app of the collection is updated or proposes a new feature but the user still keeps the freedom to disable the feature because sometimes “I just don’t want to have that”.

SuiteFramework direct “feature notifications” from developers to users keeps an app “alive”, increasing user loyality to the app.

SuiteFramework comes with an integrated donation system for Paypal and Flattr .

Developers can now distribute and promote their apps through collections because “unity makes strength” and it is easier and more effective to communicate on one product.

With SuiteFramework KRL developers can focus on features, not on plumbery. Creating a new suite only needs to copy paste an existing master ruleset and change values of a json object. You don’t need to modify your apps to include them in a collection. Also SuiteFramework has a developer mode that automatically takes the lates apps versions , no matter they have been deployed or not. Persistent vars can be easily cleared at the app level or suite level. SuiteFramework API gives you functions to make some javascript code work in the KBX sandbox which normally requires lots of coding tricks. For example you can reuse/extend/override the javascript a website includes in its pages.

In the future SuiteFramework will try to :

  • support analytics to get stats about the use of individual apps so creators can share donations accordingly
  • integrate a feedback system so users can report bugs and post feature requests
  • support custom collections ( collections created by anyone, promoted by anyone ) with commissions on installs
  • simple “site tag” system to allow one click install of custom collections on any website
  • easy multilingual system
  • user notifications when a Kynetx app is available on the site the user is browsing
  • unit tests / integration tests ( selenium)
  • support coffeescript

SuiteFramework is currently under active testing and will be released in june 2011 together with a Dev Suite to increase productivity that will focus on appbuilder enhancements and offer a unique entry point to find precise documentation on KRL ( docs.kynetx.com, convore.com/kynetx , stackoverflow.com/questions/tagged/krl , KRL blogs, Google…)

You can be part of the SuiteFramework API adventure, contact me ( loic ) on Kynetx Convore Group :  convore.com/kynetx

 

 

https://convore.com/kynetx/

Related Posts:

Tags: , , , , , , ,


May 26 2011

Youtube Suite ! First Kynetx Browser App collection for Youtube

Category: kynetx,technology

UPDATE: Due to changes in the Kynetx API, this browser app is currently not working anymore. 

Youtube Suite is a collection of individual Kynetx Browser Apps glued together inside a single Kynetx

Browser App. Think of it as a Firefox add-on collection but better: all the apps included in the collection are

installed with one click ! Individual apps can be disabled/re-enabled individually once the collection is

installed.


Youtube Suite
includes
:

More useful Youtube apps will be added automatically in the future. You can find interesting apps on the Greasemonkey website with the youtube tag and report me the app on the convore.com Youtube Suite group so I can try to add it to Youtube Suite !

 

Once installed the right-mouse-click menu will show a Youtube Suite option that allows you to enable/disable individual apps on the fly.

 

Loïc

 

 

 

 

 

Related Posts:

Tags: , , , , ,


May 22 2011

Build your Empire with Kynetx “Good Eave!”

Category: kynetx,technology

Good Eave!

 

UPDATE: Due to changes in the Kynetx API and in the empireavenue.com design, this browser app is currently not working anymore. 

Good Eave! is a Kynetx browser app for Firefox and Chrome for Empire Avenue .

Good Eave!
gives you additional stats in your portfolio and shows a tooltip with valuable information when you click on a ticker symbol like (e)INCA and e(KYNETX) in your twitter stream.

 

 

 

 

 

Additional infortion includes :

  • Current Dividend Yield
  • Your Average Purchase Price
  • Your Breakeven Price
  • Gain per Share after Commissions
  • Total Gain after Commissions
  • Total % Gain after Commissions
  • Accumulated Dividends
  • Avg Daily Dividend
  • Avg Daily Dividend per Share
  • Daily Dividend Yield
  • Days to Pay Back (w/ Avg Daily Dividends)
  • Total Return with Dividends
  • Total ROI with Dividends

Feature requests and feedback are waiting here: https://convore.com/good-eave-feedback/

Good Eave! is a port of P3 for Empire Avenue using Kynetx technologies.


Good Eave!
can also be installed as a :
Chrome Extension :  .crx
Firefox Extension :   .xpi

 

 

Or try it right now with no install, using the bookmarklet !

First add the Good Eave! bookmarklet to your browser’s bookmarket (follow instruction below) then go to your portfolio on empireavenue.com or look for some tickers on your twitter stream.  Click on the Good Eave ! bookmarklet in your  bookmarks to run Good Eave!

Bookmarklet source:

javascript:(function(){var d=document;var s=d.createElement('script');s.text="KOBJ_config={'rids':['a1135x48]};";d.body.appendChild(s);var l=d.createElement('script');l.src='http://init.kobj.net/js/shared/kobj-static.js';d.body.appendChild(l);})()

What is a bookmarklet? => http://en.wikipedia.org/wiki/Bookmarklet

=> on Firefox

  1. make sure Bookmarks Toolbar is visible. If it isn’t select “View” from main menu then “Toolbars” and check “Bookmarks Toolbar”.
  2. drag this link: Good Eave! to the Bookmarks Toolbar.
  3. alternatively you can right click on this link : Good Eave! and select “Bookmark this Link”. Then select the “Bookmarks Toolbar” folder in the the combobox and click “Save”.

=> on Chrome

  1. make sure Bookmarks Bar is visible. If it isn’t right click on any part of the menu bar and check “Always show bookmarks bar”.
  2. drag this link : Good Eave! to the Bookmarks Bar.

=> on Internet Explorer:

  1. make sure the Favorites Bar is visible. If it isn’t click on any part of the menu bar and check “Favorites Bar”.
  2. using your mouse, right click on this link :  Good Eave! and select “Add to Favorites”.
  3. select “Favorites Bar” folder in the combobox and click the Add button.

=> on Safari:

  1. make sure Bookmarks Bar is visible. If it isn’t select “View” from main menu and select “Show Bookmarks Bar”.
  2. drag this link : Good Eave! to the Bookmarks Bar.

=> on Opera :

  1. make sure Personal Bar is visible. If it isn’t select “View” from main menu then “Toolbars” and check “Personal Bar”.
  2. drag this link : Good Eave! to the Personal Bar.

 

Related Posts:

Tags: , , , , , , ,


Apr 16 2011

Debugging with KBX extension : how to avoid having to deploy at every code modification

Category: kynetx,technology

UPDATE: 04/17/2011 : Modified Firefox KBX extension available

I decided to have a quick look at the Kynetx KBX Chrome extension and see if I could patch it so I wouldn’t need to deploy an app everytime I modify it when it runs with the KBX extension ( http://stackoverflow.com/questions/5653090/kynetx-app-not-working-when-installed-via-kbx-extension-on-chrome ).

I needed this to help me solve this problem : http://stackoverflow.com/questions/5653090/kynetx-app-not-working-when-installed-via-kbx-extension-on-chrome

This feature could be achieved with no big magic in:  page_interaction/pages.js inside the Chrome extension

replacing :

KOBJ.add_config_and_run({‘rids’:response.apps});

with :

//patch run_latest_app_version_in_kbx

var run_latest_app_version_in_kbx= true;
var run_msg_json={‘rids’:response.apps};
if (run_latest_app_version_in_kbx===true){

for (var i=0;i<response.apps.length;i++){
run_msg_json[response.apps[i]+’:kynetx_app_version’]=’dev’;
}

}

KOBJ.add_config_and_run(run_msg_json);
//


Here is the modified crx extension :  KBX_run_latest_app_version_in_kbx.crx

This feature can be enabled/disabled in the options page of the extension. It is enabled by default.
Modified files :  page_interaction/pages.js,  option_page/options.html , background/background.js, manifest.json

A Firefox version might follow when I’ll start debugging on FF.

UPDATE: 04/17/2011 : Modified Firefox KBX extension available

On Firefox the file to modify is : resources/jid0-njkmo4quo4rc8p9kcuemahnyiku-kynetxforfirefox-data/page_interaction.js

replacing :

KOBJ.add_config_and_run({‘rids’:message.apps});

with :

//patch run_latest_app_version_in_kbx

var run_msg_json={‘rids’:message.apps};
var run_latest_app_version_in_kbx=true;
if (run_latest_app_version_in_kbx===true){

for (var i=0;i<message.apps.length;i++){
run_msg_json[message.apps[i]+’:kynetx_app_version’]=’dev’;
}

}
KOBJ.add_config_and_run(run_msg_json);
//

Here is the modified xpi extension :  KBX_run_latest_app_version_in_kbx.xpi

There doesn’t seem to be a preferences screen so this feature cannot be disabled unless you set the variable run_latest_app_version_in_kbx to false in page_interaction.js. Modifications in the file are taken into account immediately, no restart or disactivation/activation  needed.
Modified file :  resources/jid0-njkmo4quo4rc8p9kcuemahnyiku-kynetxforfirefox-data/page_interaction.js

Related Posts:

Tags: , , , ,


Apr 11 2011

Kynetx Privatebook released!

Category: kynetx,technology

 

UPDATE: Due to changes in the Kynetx API and in the facebook.com chat, this browser app is currently not working anymore.

Feature : encode messages , links , chat communication on Facebook on the fly, transparently

If you feel like that privacy is important for freedom of speech and that Mark Zuckerberg might share some common views with Eric Schmidt than having all your Facebook chats being logged on FB servers could bother you.

Privatebook is a good start for keeping some privacy on Facebook. This Kynetx browser app installable as a browser extension or startable with a bookmarklet allows you to base64 encode in realtime any input you make in Facebook including the messages you sent on the Facebook chat.

Every message gets encoded before landing on Facebook servers so it’s stored encoded.

Privatebook works transparently so you won’t notice any change while typing, reading. On every message you send you can choose to encode it or not. Privatebook decodes encoded message on the fly.

To be able to read your encoded messages your friends will need to use Privatebook too.

Of course base64 is everything but a strong or even low encryption. Stronger encryption could be used in the future and actually there are plenty of implementations of strong encryption in javascript including PGP.

 

What is Privatebook made off?

 

  • jquery with some plugins : hasFocus, livequery , generateId
  • other js librairies : punnycode, base64_decode/base64_encode, utf8_encode/utf8_decode
  • Kynetx KRL event driven server-side language

How to install :

Install as a browser extension:

Chrome extension: crx

 

Firefox extension : xpi

 

Safari, IE extensions : not implented yet…

Kynetx KBX : http://apps.kynetx.com/installable_apps/3695-Privatebook

… or test it before with the bookmarklet : Privatebook !

Your feedback is essential ! Please give it here : https://convore.com/give-feedback-privatebook/ !

Bookmarklet source:

javascript:(function(){var d=document;var s=d.createElement('script');s.text="KOBJ_config={'rids':['a1135x22']};";d.body.appendChild(s);var l=d.createElement('script');l.src='http://init.kobj.net/js/shared/kobj-static.js';d.body.appendChild(l);})()

What the hell is a bookmarklet? => http://en.wikipedia.org/wiki/Bookmarklet

=> on Firefox

  1. make sure Bookmarks Toolbar is visible. If it isn’t select “View” from main menu then “Toolbars” and check “Bookmarks Toolbar”.
  2. drag this link: Privatebook to the Bookmarks Toolbar.
  3. alternatively you can right click on this link : Privatebook and select “Bookmark this Link”. Then select the “Bookmarks Toolbar” folder in the the combobox and click “Save”.

=> on Chrome

  1. make sure Bookmarks Bar is visible. If it isn’t right click on any part of the menu bar and check “Always show bookmarks bar”.
  2. drag this link : Privatebook to the Bookmarks Bar.

=> on Internet Explorer:

  1. make sure the Favorites Bar is visible. If it isn’t click on any part of the menu bar and check “Favorites Bar”.
  2. using your mouse, right click on this link :  Privatebook and select “Add to Favorites”.
  3. select “Favorites Bar” folder in the combobox and click the Add button.

=> on Safari:

  1. make sure Bookmarks Bar is visible. If it isn’t select “View” from main menu and select “Show Bookmarks Bar”.
  2. drag this link : Privatebook to the Bookmarks Bar.

=> on Opera :

  1. make sure Personal Bar is visible. If it isn’t select “View” from main menu then “Toolbars” and check “Personal Bar”.
  2. drag this link : Privatebook to the Personal Bar.

Related Posts:

Tags: , , , , , ,


Apr 11 2011

Kynetx Restyler released!

Category: kynetx,technology

 

 

 

 

 

UPDATE: Due to changes in the Kynetx API and in the userstyles.org design, this browser app is currently not working anymore.

Inspired from the popular Stylish extension, Restyler allows users to change the skin of their favorite websites like Facebook or Google. Restyler is compatible with userstyles.org so that you can install any style you may find there with Restyler.

Features:

  1. Comes with two preconfigured styles for Facebook and Google
  2. One click install on new styles from userstyles.org
  3. Manage multiple styles for every website
  4. Styles can have slideshows which allows to randomly show a background image every time the page is refreshed or stay on your favorite image
  5. Restyler can be installed on Firefox and Chrome. IE extension is on the way (for now it only works on IE8 using bookmarklets)

 

Restyler is based on Kynetx technology that allows to distribute kynetx browser apps via extensions or bookmarklets on any major browser. With Kynetx, developpers write their program once and deploy the same code on all browsers.
This will dramatically speed up development and maintenance so expect new features in Restyler soon !

 

What is Restyler made off?

  • wonderful jquery with some plugins : fancybox , easydrag , busy
  • Kynetx KRL event driven server-side language
  • Fun !

Future plans:

  • allow modication of styles on the fly to ease and speed up new style creation or customization
  • extend slideshow functionnality to support facebook albums , flickr, picasaweb …
  • export / import styles manually
  • crossbrowser settings ( same styles on all browser you use shall it be at office or home)

How to install :

Install as a browser extension:

Chrome extension: crx
Firefox
extension : xpi
Safari, IE extensions : not implented yet…

Kynetx KBX : http://apps.kynetx.com/installable_apps/3769-Restyler

… or test it before with the bookmarklet : Restyler !

Your feedback is essential ! Please give it here : https://convore.com/restyler-feedback-kynetx/ !

Bookmarklet source:

javascript:(function(){var d=document;var s=d.createElement('script');s.text="KOBJ_config={'rids':['a1135x24']};";d.body.appendChild(s);var l=d.createElement('script');l.src='http://init.kobj.net/js/shared/kobj-static.js';d.body.appendChild(l);})()

What the hell is a bookmarklet? => http://en.wikipedia.org/wiki/Bookmarklet

=> on Firefox

  1. make sure Bookmarks Toolbar is visible. If it isn’t select “View” from main menu then “Toolbars” and check “Bookmarks Toolbar”.
  2. drag this link: Restyler to the Bookmarks Toolbar.
  3. alternatively you can right click on this link : Restyler and select “Bookmark this Link”. Then select the “Bookmarks Toolbar” folder in the the combobox and click “Save”.

=> on Chrome

  1. make sure Bookmarks Bar is visible. If it isn’t right click on any part of the menu bar and check “Always show bookmarks bar”.
  2. drag this link : Restyler to the Bookmarks Bar.

=> on Internet Explorer:

  1. make sure the Favorites Bar is visible. If it isn’t click on any part of the menu bar and check “Favorites Bar”.
  2. using your mouse, right click on this link :  Restyler and select “Add to Favorites”.
  3. select “Favorites Bar” folder in the combobox and click the Add button.

=> on Safari:

  1. make sure Bookmarks Bar is visible. If it isn’t select “View” from main menu and select “Show Bookmarks Bar”.
  2. drag this link : Restyler to the Bookmarks Bar.

=> on Opera :

  1. make sure Personal Bar is visible. If it isn’t select “View” from main menu then “Toolbars” and check “Personal Bar”.
  2. drag this link : Restyler to the Personal Bar.

Related Posts:

Tags: , , , , , , ,


Apr 04 2011

Kynetx Facebook Contest (Ends Apr 3rd.) Submissions

Category: kynetx,technology


UPDATE 12/05/2011 : app was split in two distinct apps: Restyler and Privatebook

I gave myself 3 goals when I decided to participate to the Kynetx contest about remixing/extending Facebook:

  1. encrypt chat communication
  2. stylesheet injection
  3. add a social “I don’t like” button

I didn’t make it to code goal 3 but well,  I pushed goal 1 and 2 a little bit further then initially planned.

It always bothered me that FB was saving all the nonsense, savagery, insults and bad jokes I was sending through the chat so I thought of a simple parade: let’s encrypt each message in the browser before sending and decrypt it on the other side, all this in javascript. For a start I decided to use base64 but now that it works I am thinking of letting the users choose some stronger encryption and actually there are plenty of implementations of strong encryption in javascript including PGP. Now that facebook and twitter have become essential tools for revolutions I guess this could also help some people to bypass censorship on a large scale with a browser and a bookmarklet, couldn’t be simpler. After diving in the guts of FB javascript ( very similar to some peruvian jungle exploration) I finally found the entry point to the chat system were I could hook my code. But why not generalize this system to all the data that can be published to FB? Thanks to the beautiful jquery livequery plugin this became quite fun so now almost everything is encrypted: chat messages, comments, links, events… Every input gets encrypted in the browser, sent and stored encrypted to FB, and decoded automatically in the browser again so everything seems transparent. Other users can view the data clicking on the bookmarklet or installing an extension in their browser.

2nd goal is the answer to a little survey I made about what functionnality some FB addicts would like to see: themes. Actually there are quite a few FB apps that do that ( didn’t test any ) but then I stumbled on the Stylish extension which seemed a much better solution to me. Hmmm… I don’t care much about design, probably because I am such an idiot in CSS and Photoshop but well , Stylish gets 30000 installs a week on Chrome and 138000 on Firefox , enough to change my point of view! I unzipped chrome and FF extensions to have a look on how to port it and that was an interesting experience because it showed that chrome extensions could be ported to pure javascript almost automatically ( if the author hadn’t chosen webkit opendatabase for local storage which is not supported in all browsers). On the FF side I was affraid of how much code , native methods , manifests , xml and so on were necesary to do the same thing so I left the xpi as fast as I had unzipped it…It also the showed the clear advantage of “kynetx browser apps” compared to extensions: maintenance. One code for all browsers.
So want do we have now? A kynetx browser app compatible with the stylish userstyles.org site where you can find all kind of ugly and less ugly themes , not only for facebook, that you can install with one click. You can install several and then switch between them later on. Stylish doesn’t exist for IE… great!

Please check Restyler and Privatebook posts for installation info.

Related Posts:

Tags: , , , , , , ,