ToolKit Swiss - Chrome Extension

Hello there!

Recently I have been working on a chrome extension that helps me on internet researching and navigation. So I coded in a way that makes easy to write new tools and I have only spend time on the tool itself, no needing to write the whole extension again for new tools that I may need.

The extension is still in developing, but only do it in my free time. I think it can be useful for someone that want the same functionality or want to code chrome extensions, there is a plenty of examples that can be useful.

This post I tried to cover the steps that I use to code a new tool, showing how my "ToolKit Swiss" works. I posted the version 0.1 that was pretty rustic and "boilerplating". The version 0.2 it is more easier to implement and have new functionalities. Soon as I work on it will be better and more flexible. If you have any ideas you can contact me I would like to help if needed.

Well, let's do it!

Design Overview

So in this diagram you can see how the classes interact with each other. ToolKit runs on background intercepting all actions with the context menus created and the rest is injected on page. ToolKit provide all the resource the tool need. Each tool have it's own JSON with the html creation logic that is provided to the FrontEnd that passes it to the ElementBuilder to build the html.

In the next example I will try to demonstrate the flowchart of the ToolKit Swiss. From the start to the tool execution. The tool inside the ToolKit has freedom with all DOM elements since it was injected on the page.

By the way the source is commented and I will export to better JSDOC documentation soon as I could. I will try to discuss about it in general through the new tool creation.

Some parts of the tool creation is still hard coded in some classes. My goal is to make it more flexible soon as I can, until there it's needed to hard code inside the class.

Base64 Encode-Decode

I will discuss about the hard coded part first, where it's needed to add code for make it functional on the ToolKit Swiss.

First of all lets make the hard coded part on the classes. First we need the ID for the new tool let's add it on the types.js:

• https://github.com/bernardopadua/toolkit-swiss/blob/master/js/types.js#L33

Now we have to create the Context menu at toolkit.js toolContextCreate_:

• https://github.com/bernardopadua/toolkit-swiss/blob/master/toolkit.js#L87

And the function event to handle the context click:

• https://github.com/bernardopadua/toolkit-swiss/blob/master/toolkit.js#L314

Well, that's it. Now let's to the tool itself. First I begin with the element JSON (html logic). There are elements that need to be fixed on the JSON elements of the tool, I will improve it soon as I can.

Let's copy the template.json and alter to our purpose since the layout is what I need. Important thing is that all components used in the tool construction must be at class property of the component-html tag.

• https://github.com/bernardopadua/toolkit-swiss/blob/master/elements/base64encodedecode.json

It's important to change the "toolkit-block-base64" (Line 12) for each new tool. I forget to comment in this line on the template.json.

To start a tool the code we need is:

• https://github.com/bernardopadua/toolkit-swiss/blob/master/js/tools/base64encodedecode.js

I will just pass through the key parts of the Tool. Since I fully commented the Tool class you can have a very good base of what is capable of. And all my tools are commented as well. Any question just send it to me I would be glad to help.

Any doubts just see at the tool.js. Everything is there.

• Line 11: 
• init must be set in every tool. FrontEnd call this constructor when it loads the tool;
• Lines 14-15:
• This property is mandatory for internal purposes;
• Line 26:
• Like a said before, your components must be in the class property of the html TAG;
• Line 31:
• To have this functionally you must set a DIV on the JSON element with class 'error-raise';
• Line 43:
• Every new tool must to do this to inherit the properties of the Tool;
• Line 50-51:
• This is mandatory tool. ctxFront is a instance of FrontEnd;
• initTool_ initializes the tool on FrontEnd for interaction;
• getElements_ make the FrontEnd call for the elements of the tool invoked;

For a better view of all functionalities I recommend to see the translate tool. Translate tool it's more complete over the functionalities available. Anything just contact me.

• https://github.com/bernardopadua/toolkit-swiss/blob/master/js/tools/translateit.js

Thanks!