How to modify a Firefox extension and create the .xpi?

What I show you below I learned how to do yesterday and I want to share it with you because maybe you are in the same situation as me.

The point is that I installed a Extension call Screengrab, which allows us to capture the websites we visit and so on. The problem was very simple, the icon that appeared in the toolbar Firefox it broke with the design of the rest, that is, it just looked very ugly.

What does not enter my eyes ... well, that does not enter me and with that type of detail I am a bit fussy. But hey, let's get to the initial topic. I opened Inkscape and I made myself a new icon, which although it is not the best in the world, looks better than the original. But how to add it to the extension?

Firefox has some extensions that simply unzip into folders within /home/ /.mozilla/firefox/ .default / extensions /, but there is another that remain as a .xpi as the case of Screengrab.

The first thing I did was unzip the .xpi using Ark el File Manager de KDE, riding a GNOME they can do it with File Roller. Inside the folder that was unzipped, I looked for the icons that I needed to modify, which were in the folder-screengrab / chrome / skin /, and I replaced them with the exact same size, but using my own.

Ready .. and now comes the magic. What we have to do is select all the folders and files that are inside the unzipped folder (not the folder itself), and once they are all selected, we compress them into a .zip. (It has to be .zip)

To the file that was generated, we changed the name and the extension. In my case I put screengrab.xpi

All that remains is to install the extension from the add-ons manager Firefox and voila .. Here is the result 😛

If you want to know how to create an extension from scratch, with everything you need and more, you can consult this link.