Grunt [http://gruntjs.com/] is a great tool for automating boring tasks. Browserify [http://browserify.org/] is a magical bundler that allows you to requireyour modules, Node.js style, in your frontend code. One of the most useful plugins for grunt is grunt-contrib-watch [https://github.com/gruntjs/grunt-contrib-watch]. Simply put,…
The Chrome Extension Skeleton: Building Modular Extensions with Grunt and Browserify
At Salsita [https://www.salsitasoft.com/]we implement a lot of browser extensions. We create them for our clients, for our own purposes or just for fun. We therefore decided a couple of years about to write a Chrome extension skeleton [https://github.com/salsita/chrome-extension-skeleton] that provides boilerplate for…
Change Text Color Based on Background Color (and Much More!) Using CSS Clip
During the development of our company website [https://www.salsitasoft.com], we came across an interesting UX dilemma. The website uses full-width horizontal blocks of content with varying background colors. This caused problems with the fixed-position side navigation, since black text becomes hard to read when displayed over a non-white…
DOM Window Wrapper Update
A quick update to my previous post about creating a DOM window wrapper [https://blog.salsitasoft.com/2014/05/19/wrapping-the-dom-window-object/]. My colleague Tomas [https://github.com/realyze] pointed out that Browserify [http://browserify.org/] breaks if it is running inside the wrapper, due some code [https://github.com/defunctzombie/…
Wrapping the DOM Window Object
In order to enable Kitt [http://www.kitt.com], our iPhone web browser, to run browser extensions, we needed a way to run content scripts in a webpage. In Chrome, content scripts are run in a sandbox to prevent the two contexts from interfering with each other. They share only…