Chrome Extension build does not work

[jpv-at-work]

Hello,

I am trying to fix an integration bug but am stuck on building and installing the Chrome extension. So far I have tried the following:

1. Clone repository
2. Follow the README instructions for building
3. Install the locally built version

I have encountered several errors and problems:

README

I followed the instructions for Building and Testing => Chrome extension. The guide says that the generated build output will be found under www/chrome.dev (see: https://github.com/clockify/browser-extension/blob/master/README.md?plain=1#L33). However, for me it generated the build output under chrome.dev in the repository root (i.e. not in a www folder like the README suggests). Is the README outdated or did I make a mistake?

Installation Errors

After installing the locally built extension, I see two errors in Chrome:

I am able to work around the first error by adding the following line to the manifest.chrome.dev.json:

	"externally_connectable": {
		"ids": ["*"],
		"accepts_tls_channel_id": false,
		"matches": ["*://*/*"] <--------
	}

I was not able to find a quick fix for the second error and am stuck at installing the extension for testing my bugfix.

Now I am wondering, am I doing something fundamentally wrong while building the application or is the current master version broken in some way? My steps were quite simple, just to reiterate: npm i --legacy-peer-deps, npm run compile.dev.chrome and then installing it in Chrome on a Mac.

[SupportTeamCAKEcom]

Hi @jpv-at-work

Thank you for reporting this.

We might not be able to advise you on extension building, but we'd be happy to look into a bug that you identified. Please reach out to our Support team using the https://clockify.me/help/contact so we can troubleshoot this issue further.

Wishing you a great day ahead!

[jpv-at-work]

The Clockify team has asked me to clarify and document my steps so far. Also, I was advised to try again but to ignore the errors.

My steps so far

1. clone git repository
   • master branch, commit 6fbd185d9091467e594f00144800e91c50df3bfa
2. find out how to build and run the extension
   • npm install --legacy-peer-deps
   • npm run compile.dev.chrome

After this, I have a chrome.dev folder in my repository. However, the README says that it should be called www/chrome.dev, however, in my case the folder is just called chrome.dev without a www parent folder.

Next, I open the Chrome browser with a fresh profile, open the chrome://extensions/ path, enable developer mode and install the extension via the "Load unpacked" button. The extension installs and opens the Clockify login page in a new browser tab. However, the Extensions page reveals that there are two errors.

• 'externally_connectable' specifies 'accepts_tls_channel_id' but not 'matches'; 'accepts_tls_channel_id' has no efect
• Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

This is where I first stopped, because I didn't try if the extension will work even when there are errors. Now I tried using the extension anyway and it actually worked. This is why I would propose to document these expected errors in the README.

Also, it is an accepted best practice to include the package-lock.json file in the code repository, but you have it excluded in the .gitignore file. I would recommend to stop excluding it unless there is a good and well-documented reason for doing so.

Summary and change request

Please consider making these changes:

• fix path to chrome build folder in the README
• document expected errors when installing the extension
• don't exclude the package-lock.json