Develop add-ons for the Cliqz Browser

Sooner or later, the Cliqz browser will finally allow add-ons installation. As this web browser is built on top of Mozilla Firefox, you should follow the Mozilla documentation to know more how to build such an add-on.

This article will only focus on testing your add-on with Cliqz. Even if current cliqz build doesn't allow add-ons installation, the underlying Mozilla platform does allow local and in-dev add-on side loading. That is to say, you don't have to wait for the add-ons enabled build of cliqz to begin to play with this browser.

The first thing to do is to install the Mozilla web-ext tool. To install it, you need to have the node package manager installed on your machine. For Archlinux, you need to run sudo pacman -S npm, while on Debian/Ubuntu you'll need to run sudo apt-get install npm. Then, I recommend you to locally install web-ext. Here is a common package.json stub you can use for your add-ons. This file has to be placed in your add-on source root folder:

{
  "name": "addon_name",
  "version": "0.0.1",
  "scripts": {
    "dev": "web-ext run --bc --ignore-files node_modules web-ext-artifacts \"package*.json\"",
    "lint": "web-ext lint --ignore-files node_modules web-ext-artifacts \"package*.json\""
  },
  "devDependencies": {
    "web-ext": "^2.9"
  }
}

Finally, run npm install to retrieve web-ext and all its dependencies.

When it's done, enter npm run dev to test your add-on in a clean and isolated environment. As you can see, the previous command has launched Firefox. So what's up? By default, web-ext will start your local firefox installation. But you can select any other Mozilla platform software with the -f switch. In our case (a Linux environment), we just have to modify the previous command this way: npm run dev -- -f /usr/bin/cliqz and tadaa, cliqz starts with your add-on.

I let you discover all the other web-ext possibilities if you don't know them already.

One problem you may encounter for now, is that cliqz hides the about:addons page (the page, which lists all your installed add-ons). This may prevent you to find your add-on and access its preferences. One solution may be to expose a browserAction (a browser toolbar icon). Because browserActions embed a context menu item, which will open the add-on preference page, even if the add-ons list is hidden:

That's all, happy coding with Cliqz add-ons :)