clockify/browser-extension

Clockify Browser Extension

Clockify extension for Chrome and Firefox

Insert Clockify's "Start timer" button to any web page.

About Clockify →

List of integrations →

Add your own integration

Want to create an integration or improve an existing one? Awesome! Adding an integration is super easy. You need basic web programming skills (HTML, Javascript, Git) and can be done in a couple of hours.

Just fork the repo, make your changes, and send us a pull request.

Something needs fixing?

Create an issue here on Github and our team will take a look the first change we get (which may take a few days, depending on our workload).

If you need the fix quicker, feel free to update the integration yourself and send us a pull request. We typically take care of them within a few days.

Building and testing

Chrome extension

1. Make sure you have Node and NPM installed on your system (see setup instructions below)

2. Clone the repository

3. Run npm install --legacy-peer-deps

4. Build Chrome extension by running:
   npm run compile.dev.chrome
   

5. Navigate to chrome://extensions/

6. Enable "Developer mode" (located in the top right corner)

7. Click "Load unpacked" and select the www/chrome.dev/ folder that you've built

Firefox extension

BUILDING THE PRODUCTION VERSION

1. Make sure you have Node and NPM installed on your system (see setup instructions below)
2. Clone the repository
3. In project root run npm install --legacy-peer-deps
4. Build Firefox add-on by running: npm run compile.prod.firefox
   
5. Zip the contents of the /firefox folder
6. Navigate to about:debugging#/runtime/this-firefox
7. Click "Load Temporary Add-on"
8. Select the zipped file

   The extension is now built and loaded into firefox successfully

---

if you wish to play around with functionality:
9. Proceed to login/signup 10.You are either redirected to the clockify web to login or if you're already logged in to the web version, then extension will instantly log you in once you've pressed the login button. Open some website (eg. some random Gitlab issue https://gitlab.com/gitlab-org/gitlab/-/issues/220296) 12. "Start timer" will appear, which you can click and the add-on will pick up the issue name and start the timer 13. Stop timer to save the time entry

BUILDING THE DEVELOPMENT VERSION

1. Make sure you have Node and NPM installed on your system (see setup instructions below)

2. Clone the repository

3. Run npm install --legacy-peer-deps

4. Build Firefox add-on by running: npm run compile.dev.firefox
   

5. Navigate to about:debugging

6. Click "Load Temporary Add-on"

7. Select the www/firefox.dev/manifest.json file

How adding an integration works

Add the url of the new tool in /src/integrations/integrations.json. Then, create a /src/integrations/myapp.js file. It in, define where the button appears and from which element it needs to pick up the description field.

When the extension recognizes that you're on that url, it will load the necessary script.

If you need an example, you can see how Trello is implemented.

Use createButton() so both the icon and "Start timer" is displayed. If there's not enough space, you can use createSmallButton (so only the icon is displayed).

Before sending us a pull request, make sure you test the integration in both Chrome and Firefox.

Setup (Ubuntu)

sudo apt-get install nodejs
sudo npm install --legacy-peer-deps

Setup (Windows)

• Install/Update Node.js to Latest: https://nodejs.org/en/download/

> npm install --legacy-peer-deps

Setup (Mac)

sudo npm install --legacy-peer-deps
npm install @popperjs/core

Compile

npm run compile.dev.chrome
npm run compile.dev.firefox

browser-extension's Issues

Sentry integration "Start Timer" button missing

The Button to start tracking on a Sentry issue is missing:

It according to console the selector inside errType = $('h3 > span > span').textContent.trim(), is invalid:

VM77 button.js:1 Uncaught SyntaxError: Identifier 'aBrowser' has already been declared
    at VM77 button.js:1

VM78 sentry.js:5 Uncaught TypeError: Cannot read property 'textContent' of null
    at VM78 sentry.js:5
    at Object.renderTo (VM77 button.js:44)
    at MutationObserver.<anonymous> (VM77 button.js:32)

Using:
Clockify Browser Extension 1.7.8
Linux Chromium, Version 78.0.3904.70 (Official Build) snap (64-bit)
sentry.io free subscription

TickTick Start Timer not filling in description

Expected: When select a task and click 'Start Timer' a time entry is created with a description that matches the title of the task.

Actual: The timer is started but there is not description.

This was working fine then stopped all of a sudden. I verified the functionality in trello and it works as expected when starting a timer from a card.

Chrome (windows) Version 81.0.4044.138 (Official Build) (32-bit)
Extension version 1.8.18

Trello integration issue

Hi, I have some trouble with Clockify extension, But now its about Trello integration.
When I open a card in Trello board, The Start Timer button and time field under the actions section shown, But it has not any label and does not do anything when clicking on it.
Sometimes it takes a long time to prepare and get okay, but most of the times I should open Clockify extension popup to fix this issue.

Clockify Time Tracker 1.8.41
Browser: Mozilla Firefox Quantum 68.11.0esr (64bit)
OS: Debian 10

Search to single task, auto expand project?

Right now if I start a timer and search for the task I want to log it under, when it gets down to a single result it still requires you click on the Project to expand it then the task itself to select it. It'd be awesome if the project would auto-expand when it has only one (or some X number) of tasks that could apply to save the extra clicks.

Todoist integration does not work after tab is has been inactive

In the Todoist integration the buttons used to start timers disappear after you have changed tabs, and shows up again only after you have reloaded the page.

zammad.org / zammad.com integration not in chrome extension

Although the zammad.org / zammad.com integration is showing in the source it's never been available in the releases for chrome.

Can I have a custom integration with pipefy?

I was wondering if I could have a custom integration with pipefy.

For instance, I want to get the Project field from a custom field that I have in pipefy. I have html access to it, but I don't want to override your default pipefy integration. Because not everybody will have the same field mapped to the project. It would be something customized to my own integration. Is it possible?

Also, can I send the "Client" to the "createButton" function? There is another custom field in pipefy that I would like to use as the Client of the tracking.

Thank you!

Atlassian integration not working anymore

Hi Clockify,
Seems that the latest update broke the Atlassian integration. Trying to debug myself but got stuck. Integration was working before adding helprace to the mix. Not working on chrome and Firefox. Any idea what the issue could be?

Thanks

Upwork integration

If anyone has UpWork account with active jobs, feel free to create a simple integration.

New version with wekan integration?

When will they release a new version with Wekan integration?

Thanks

Integrations do not appear in Firefox container tabs

I was having an issue with the Clockify Firefox add-on where the integration links/buttons were not appearing at all. I was able to narrow it down to the Firefox Multi-Account Container add-on, and more specifically, tabs in containers.

Bug: Firefox container tabs result in Clockify integration links/buttons not showing up.
Replicable: Yes, I am able to replicate this across Firefox installs.
Workaround: Clockify integrations function as expected if services are opened in "normal" tabs not associated with a container.

security holding package

Hi,

it seems you have accidentally added fs but this is not a package on npmjs, fs is an internal NodeJS module.

https://github.com/clockify/browser-extension/blob/master/package.json#L30

See https://nodejs.org/api/fs.html

You might want to remove it using npm uninstall fs.

Feature request - Custom integration from GUI

The company I work for has a "Roll your own" issue tracker so creating a public extension for Clockify doesn't make sense for me. However, it did spark the idea - I would like to request a new feature to the Clockify browser extension to allow for custom integrations without having to extend the extension.

I would envision that the setup page would have an additional integration type called "Custom" And this would then show the following elements:

• Location Selection - The user would be able to enter JavaScript or DOM (user selectable would be preferred) to return a DOM object that would be the parent to add the Clock icon to.
• Icon size (Large or small)
• Description Selection - The user would be able to enter JavaScript or DOM (user selectable would be preferred) to return a STRING text value (or a DOM element, if DOM is selected) that would contain the text that is passed to Clockify for the entry message.
• Project Selection - The same as Description selection (This could be optional, or hidden as advanced)

The actual extension itself would reference the code the user has supplied above.

From a security perspective, I could see where just selecting the DOM might be a "safer" mode than allowing user-supplied javascript.

An advanced version of this selection could restrict the entries from user-entered text to object selection (I think of the Printliminator where you could select any element to remove in a special edit mode of the page - see: http://css-tricks.com/examples/ThePrintliminator/js/printliminator.js)

Unfortunately, I do not have the time resources allowed to pursue this sort of change at this time, so I'm making the request instead of coding it myself.

Thank you!

GitHub integration broken - new UI layout

Not possible to use clockify github integration - javascript error.
Maybe because of new GitHub UI layout?

VM240 github.js:23 Uncaught TypeError: Cannot read property 'textContent' of null
    at VM240 github.js:23
    at Object.renderTo (VM239 button.js:26)
    at MutationObserver.<anonymous> (VM239 button.js:16)

Zammad.com / .org integration change not merged with integrations.json

I previously submitted an integration for zammad.com / zammad.org. This got added but the required change to integrations.json was not merged. The following needs to be added to get this integration working:
"zammad.com": { "name": "Zammad", "link": "*://*.zammad.com/*", "script": "zammad.js", "clone": false },

Does not build in windows with cmd/powershell

Due to the way target is past it will not work properly with powershell/cmd. There are some older solutions like using cross-env but webpack now supports it natively. PR inbound.

Salesforce Integration broken

the clockify "start Timer' link is no longer available next to the object ID. The link used to appear next to the ID of any given object, but no longer does. I have tested this in multiple environments as well as tried to add the domain to the list of custom domain integrations. This behavior appears in the chrome extension on chromium edge, as well as chrome, so it does not appear to be browser specific.

Asana integration doesnt work in firefox

The buttons doesnt appear in asana with the firefox addon - it works sometimes, but couldnt find any workarounds ( tested browser restart, reload of asana with cache clear ).
Sometimes they appear after 1min or 2min of inactivity ( tab is in background / not focused )

Unable to continue after stop a timer

When I stop the timer for a while and then get back to it, the extension creates a new timer instead of continuing the old one.

Compile Chrome extension without Developer mode

Hello,

Some time ago I made a PR #49 and it was integrated into live version, but then Jira changed and you removed my updates. Unfortunately we're still on AUI 6.0.5 and newest updates do not work for me.

Because of that I removed live extension that I downloaded from Chrome's Play Store and compiled my own version but now each time I start Chrome, there's a popup notification about Developer mode being enabled. Is it possible for me to compile a "live" version and import it into Chrome without the Developer mode being active? If possible, would really appreciate steps required to do so.

In GitLab, get and use project name

When you click Start Timer, only the ticket number and name are shown, But Project field in Clockify remains empty, so it must be completed after manually. It could be great if it is automatically fulfilled from project name in Gitlab.

Project Rules

This may be more of a request than an issue so feel free to direct me to the correct place if needed.

The problem I'm having is when clicking start timer from Jira, it may be the same with all integrations as well, it always creates it in the same project. There is no way to dynamically put it in a different project.

I've been at a few places that treat time tracking workflows with tickets differently. Some have a single epic with lots of jiras and everything is tracked under the single epic project. Then there are ones that track every ticket in it's on project.

I would like to be able to click "Start Timer" and it create it in the project for the ticket rather than setting it's name to the ticket title and putting it in the previous or default project. I currently get around this with a simple cli tool that starts/stops timers and creates the project if it doesn't already exist. It would just be nice if this was an option in the chrome extension.

My Request

• Have option to define the default task name rather than the default project (coding, research, testing) and create the task in a project with the same name as the ticket.
• If the project does not exist create it.
• This should be an optional setting so existing behavior is not altered

Possible Issues

• Not everybody has permissions to create projects so may need a way to hide this option if the permission does not exist for the user. Or just error if the project doesn't already exists when a timer is started.

Github path to Project mapping

Hi,

Is it possible to add time to a specific project based on the url (repository) where the issue belongsTo.
Like github.com/intvent/eboekhouden-php => Select default project OpenSource in Clockify?

Actual version

Current master branch version is "1.8.9" (according to manifest.chrome.dev.json)
chrome://extensions/ shows me "1.8.13" (installed from the store)

Does the master branch contain latest release code?

Github Integration Enhancements

• Allow entry of hours and/or hours by date to a Github ticket. This could be a text box for hours worked

• Display time entries associated with a Github ticket in the Github ticket (below the "start timer" or hours entry link)

Clockify does not pull to-do names from Todoist

After the new "Todoist Foundations" version upgrade, specifically Todoist version 972 and above, clockify fails to pull the to-do name, it only pulls the project name.

With Todoist version 971, it worked fine.
I use chrome Version 78.0.3904.70 (Official Build) (64-bit)

Not compatible with old JIRA version & onPrem ManageEngine ServiceDesk Plus

Hi, tried the integration feature on my onPrem JIRA & ME SDP but it doesn't work. Please help.

Not available on addons.mozilla.org

Hi, I tried to download the extension to new machine, but it seems that the link on your page (https://addons.mozilla.org/en-US/firefox/addon/clockify-time-tracker/) is not working.
Did you pull the extension?
I really don't want to spend time compiling it.

Azure DevOps: On Timer Stop automatic Project Assignment

I have enabled Azure DevOps integration and everything is working fine. I have one feature suggestion that is valid for every plugin and not only azure DevOps. Would be possible to automatically assign a project on timer stop?

Basically if the Azure DevOps project match a clockify project name clockify can fill it and stop the timer otherwise the current warning message "Can't end entry without project/task/description or tags.Please edit your time entry." is displayed.
If you provide me some guidance I could develop on my own and in case give back as I want a solution that is still valid and do not make me lose compatibility with your future plugin updates.
Tnx in advance,
Luca

Change sound notification

Please add ability to change pomodoro sound notification to different sound. At this time I occasionally don't hear notification when music is playing.

I'd like to change default 'clink' sound for more noticeable.

Cannot use the addon on Firefox

I cannot use the addon on Firefox.

Screenshot:

Here is the version of the addon.

And Firefox version

Jira integration issues

A few months ago Jira updated and the button was gone. I did check other issues here and they all claim it has been resolved but not in my case. I was using Clockify 1.7.9 and in Jira a view where I have a list of issues on the left side with details on the right.

Yesterday I decided that I need Clockify again so looked into updating it myself so it would work for my case and have managed to do that, but the problem now is that the second time I view an issue, the "Start timer" button shows for a second and is then removed. Note that on first issue view, button is added and stays there.

Do you have any ideas why the button would be shown briefly and then removed when I view an issue the second time?

The code update I did in atlassian.js:

clockifyButton.render(
    'div[id="issue-content"]:not(.clockify)',
    { observe: true },
    (elem) => {
        if (document.getElementById('clockifyButton')) {
            console.log('clockify: button removed');
            document.getElementById('clockifyButton').remove();
        }

        const page = elem.closest('div[id="page"]');
        const container =
            $('div[class="aui-page-header-main"]', elem);
        const issueNumber = $('a[class="issue-link"]', container).textContent;
        const desc = $('h1[id="summary-val"]', elem).textContent;

        // Try to find the project
        let project = $('a[id="project-name-val"]', page);
        if (project) {
            project = project.textContent;
        } else {
            project = '';
        }

        const link = clockifyButton.createButton(issueNumber + ' ' + desc, project);
        link.style.position = "relative";
        link.style.padding = "2px 0 0 20px";

        container.appendChild(link);
        console.log('clockify: button added', container);
    }
);

Do note that I also removed all other integration options for Atlassian, but that didn't solve the problem with disappearing button.

Freshdesk update has integration stop working

Recently update on freshdesk has broken the integration, Clockfy button appear below description and when pushing it the timer starst just with ticket number without description [#00000].

In Gitlab integration use issue reference instead of issue number

When tracking time in Gitlab the clockify.me time entry description field is filled in as such:

#${ISSUE_NUMBER} ${ISSUE_TITLE}

So a typical entry could be:

#134 Review and test new plugin

When working with multiple groups or subgroups and thinking to automatically add tags on either the issue or the clockify.me time entry it would be much more useful to use the issue reference instead of the issue number.
References are shown in the right hand sidebar in Gitlab at the very bottom and look like this:

my_group/my_project#1

or

toplevel_group/first_subgroup/second_subgroup/project_name#issue_number

These references are unique for a given gitlab instance and would make it significantly easier to integrate or match work descriptions with Gitlab issue.

Integration hackathon?

So clockify's offering is awesome. Wouldn't mind putting in a weekend of work migrating all the integrations from toggl (and any others) if anyone else is interested in helping?

If we had 5+ people it would be a breeze.

Atlassian integration not getting Task-ID anymore

the selector for getting the Task-ID seeems to be wrong. I just got
I changed the selector in line 53 from
$('div > div > div > div > div > div:first-child > div > div:first-child > div', elem);

to

$('div > div > div > div > div > div:first-child > div > div:first-child > div > div:last-child', elem);

to make it work again.

I am using Jira-cloud

Feature Request Notion track project

It would be nice if this tracked the project name for notion like it does for Trello. I thought it did but it's not working now.

Allow to select task on JIRA task when starting the timer

We would like to force to use TASKS to all users but complicates the integration with JIRA as it does not work with that feature.

The JIRA integration and others should request a TASK (as project will be already matched) to select quickly before starting.

V1.6.2 removed Start Timer link from Jira

Before my browser updated with V1.6.2, I could see the Start Timer link in Jira but since the update have not been able. I have not changed my settings in the Chrome extension.

Tracking reminders and authentication not working on Firefox

I'm using Firefox 69.

The extension only detects that I'm authenticated when I open the site. Automatic tracking reminders are not working also.

Manage Engine integration removed

@aleksandar-olic your last release the manage engine integration was removed and it's working properly.

There was any reason for that?

quire.io integration

Quire is list on your site, but not integrate.
Could you please add it?

Chrome Gmail Issue: Uncaught SyntaxError: Identifier 'aBrowser' has already been declared

After installing the clockify Chrome extension the gmail web app became unusably slow with tens of thousands of

Uncaught SyntaxError: Identifier 'aBrowser' has already been declared

errors filling the console.

Disabling the gmail integration fixed this, but obviously at the expense of not being able to trigger a clockify task from the gmail web app. I wasn't using this feature, but wanted to note the issue here.

Start timer button fails to show on FireFox and Chrome

On either Firefox 79.0 or Chrome 84.0.4147.105 (Official Build) (64-bit), the start/stop button for the clockify-extension fails to render on either Gmail or Atlassian websites. I am running windows 10 latest. I have verified that the integrations are all on, and have attempted to reinstall the plugin on both browsers.

Please let me know what type of log files would be useful, and I'll provide upon request.

Reproduce:

1. Install Clockify-extension on either browser (clean install for Chrome in my case, Firefox is primary browser).
2. Login to clockify
3. Navigate to http://www.gmail.com or www.atlassian.net/
4. View that start/stop button is missing

Current behavior: The start/stop button integration fails to render on the front end.

Expected behavior: The start/stop button integration renders and is usable by an authenticated user on the front end.

UPDATE

Not sure why - but the Gmail integration started working. I guess we're back to Atlassian screwing us over with constant layout changes. Please close this ticket, and edit my Atlassian specific post.

I can however, force the Start timer to appear on JIRA.

Reproduce:

1. Navigate to Jira ticket.
2. Click open the Clockify Extension .
3. Refresh the page.

Todoist Updated UI

Todoist recently updated its UI and now the Clockify button is creating an extra row and a lot of white space in the tasks lists.

Asana fields mapping

(Feature request)

Projects created from Asana have no "client".

I'd like to add a line "Client: MyClient" in Asana's project description.

This way the extension could read it and create/assign the client.

Jira "start timer" missing

In Issue #8 it mentioned Jira "start timer" was missing and I have yet to see it return. Looking at console, I'm seeing an error when it's trying to render the Clockify button

Error handling response: TypeError: Cannot read property 'childNodes' of null

The stack trace starts at atlassian.js, line 14.

Screenshots

Why does the browser extension need access to "read and change all your data on the websites you visit"?

There is no description in the chrome web store of why this is needed and such a requirement screams "no go" for me and many others today.
After reading the help article linked in the web store I'm guessing it has to do with the feature "Track time from selected text"?

Clockify button doesn't show up in a new List layout in Asana

Asana is releasing a new list layout for project page. In this view, the clockify button doesn't show up. Is it possible to fix it?
Thanks.

Atlassian integration broken

In jira cloud there is no link to start timer any more in the ticket view.

JS-Console shows errors:
VM179 atlassian.js:85 Uncaught TypeError: Cannot read property '1' of null
at VM179 atlassian.js:85
at Object.renderTo (VM178 button.js:26)
at MutationObserver. (VM178 button.js:16)

Error handling response: TypeError: Cannot read property 'length' of undefined
at updateButtonState (chrome-extension://pmjeegjhjdlccodhacdgbgfagbpmccpe/integrations/button.js:227:54)
at chrome-extension://pmjeegjhjdlccodhacdgbgfagbpmccpe/integrations/button.js:297:18