And now for something completely different!
Why?
BestOf Media is all about its communities and their participation to the forum. A user creates a topic, and members (or passers by) answer the question, or argue about the topic. To be able to see new contents on a topic where he contributed, one has to either refresh the topic page, refresh the contributions’ page or refresh the main site home page and then look up the status of the corresponding threads. That’s a lot of refresh, a lot of user voluntary actions. So came out the idea of a tool that would check the state of the user’s contributions and notify him of new activities.
What?
The challenge here is that our group has multiple sites, each with their own community. Each of those sites uses it own variations of a portal implementation (from two main frameworks) to display the site’s forum. The goal here was to give all our members the same user experience with a tool that will be slightly adapted to the targeted site. Hence we were trying to create, for a start, 5 extensions, all of them using the same code base. Each of the extensions is only different from an other by its name, its targeted site and its visual identity. We also need to cover 3 languages for those 5 extensions: English, German and French.
How?
Chrome (or Chromium) offer a simple but yet quite potent browser’s extensions framework. It uses HTML, CSS and JavaScript APIs, turning Chrome into a platform. The scheme of the tool would be to query a page on a regular basis, parse it for data (which threads have new content? does the user have the private messages? how many? and so on) and then notify the member of new things to be read. Now that we have set the stage up, let’s about the bowels of the tools.
Deep inside
The framework eases the development of localized extensions. It only a matter of putting the messages files in the correct directories, as stated in the official documentation. That was one problem solved. Now the point is to create a code base that could be replicated with minimal changes to fit every site specificity. Ant we be used to build the extensions (that is, copy the common code base to a target folder, along with site specific data and them zip that target folder). Here is the folder structure we used: 
Here, the src/template-drap4chrome folder is the common code base, and every other folder in src contain the specific part for the said site: some specific UI parts, the extension manifest file and the main script. The manifest file describes the extension, giving it a name, some description. It also declares which specific permissions are required. The permissions required are presented to the user upon extension installation, so he knows what the extension is up to. The manifest is also where the extension states which web site is to be accessed. The main script is the background page that set the correct run environment for the extension. Here, it creates the extensions badge (the icon appearing in the extensions bar) and it initializes the regular refresh process. It also declares which site specific implementation of the extension is to be used. Now we have separated resources, the business logic (mainly regular expressions used to parse the page and find useful data) is to be put in its own container. The way we did it is a hierarchy of JavaScript classes defining the way to handle the page.
Action!
You can see those extensions in action for Tom’s Hardware, Tom’s Hardware UK, Tom’s Hardware France and Tom’s Guide France, using either Chrome or its open source sibling Chromium.










