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.

Adding new integration tool to Toggl Button extension can be done as follows.

Clone the Toggl Button repo

git clone [email protected]:toggl/toggl-button.git

Add your new tool to manifest.json file permissions

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 contents script for adding button to the service's page

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 an how the toggl button is displayed on the page.

Update README.md with your tool information

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.

Some user created service integration examples

• Toodledo
• Zendesk
• YouTrack