-
Notifications
You must be signed in to change notification settings - Fork 570
Adding new integrations
This is a by example type of tutorial about how to add integration of a new tool to Toggl Button extension.
As an example I'm going to go through the process of adding an integration named SuperCoolTool (with url https://www.supercooltool.com) to Toggl Button extension.
git clone [email protected]:toggl/toggl-button.git
Add url permission:
"permissions": [
"tabs",
"*://*.toggl.com/*",
"*://*.teamweek.com/*",
"*://*.supercooltool.com/*",
...
Add common content script matching:
"content_scripts": [
{
"matches": [
"*://*.teamweek.com/*",
...
"*://*.supercooltool.com/*"
]
},
Add service specific content script matching:
{
"matches": ["*://*.supercooltool.com/*",],
"js": ["scripts/content/supercooltool.js"]
},
Create the file that you referenced in the manifest file. In our case it is named supercooltool.js
We create it into the path:
src/scripts/content/supercooltool.js
This is the script that determines where the Toggl button is displayed on the page and how it functions.
The script should look something like this:
/*jslint indent: 2 */ /global $: false, document: false, togglbutton: false/ 'use strict';
togglbutton.render('#task:not(.toggl)', {observe: true}, function (elem) {
var link,
description =
link = togglbutton.createTimerLink({
className: 'supercooltool',
description: description,
projectName: project
});
$('.link-list').appendChild(link);
});
Let's go through it step by step:
/*jslint indent: 2 */ /global $: false, document: false, togglbutton: false/ 'use strict';
#task:not(.toggl) - is the container that must be visible when adding toggl button link. From this part of the page all the relevant information is fetched.
$('.title', elem).textContent - We get the description of the time entry from element with a classname ".title" that is inside the before set elem variable (in our case it is #task:not(.toggl))
$('.project', elem).textContent - We get the project name of the time entry from element with a classname ".project" that is inside the before set elem variable (in our case it is #task:not(.toggl))
togglbutton.render('#task:not(.toggl)', {observe: true}, function (elem) {
var link,
description =
className - this should be same as the tools name description - this is the description value that was set in the previous point project - this is the project value that was set in the previous point
link = togglbutton.createTimerLink({
className: 'supercooltool',
description: description,
projectName: project
});
The '.link-list' class is a container to which we append the Toggl Button link. $('.link-list').appendChild(link); });
(optional) After completing the script it is advised you run make lint int the root directory of the program. This shows all the linting errors that appear in the script.
There's three places you have to add your tool here. Right at the bottom there is list of url-s. Add you tool url after the last tool. If the last tool is:
[27]: https://www.toodledo.com/
add your tool to the next line
[28]: https://www.supercooltool.com/
Now there are two more places where all the tools are listed add your tool name there like this:
- [SuperCoolTool][27]
If you have done all that you are ready to submit a pull request. Toggl Button developers will review what you have done and if all is good it will be merged shortly.