Add hostname option to extension

src/components/Options.tsx

@@ -11,6 +11,7 @@ interface State {
   apiKey: string;
   blacklist: string;
   displayAlert: boolean;
+  hostname: string;
   loading: boolean;
   loggingStyle: string;
   loggingType: string;
@@ -26,6 +27,7 @@ export default function Options(): JSX.Element {
     apiKey: '',
     blacklist: '',
     displayAlert: false,
+    hostname: '',
     loading: false,
     loggingStyle: config.loggingStyle,
     loggingType: config.loggingType,
@@ -41,6 +43,7 @@ export default function Options(): JSX.Element {
     const items = await browser.storage.sync.get({
       apiKey: config.apiKey,
       blacklist: '',
+      hostname: config.hostname,
       loggingStyle: config.loggingStyle,
       loggingType: config.loggingType,
       socialMediaSites: config.socialMediaSites,
@@ -52,6 +55,7 @@ export default function Options(): JSX.Element {
       ...state,
       apiKey: items.apiKey as string,
       blacklist: items.blacklist as string,
+      hostname: items.hostname as string,
       loggingStyle: items.loggingStyle as string,
       loggingType: items.loggingType as string,
       socialMediaSites: items.socialMediaSites as string,
@@ -79,6 +83,7 @@ export default function Options(): JSX.Element {
 
     const apiKey = state.apiKey;
     const theme = state.theme;
+    const hostname = state.hostname;
     const loggingType = state.loggingType;
     const loggingStyle = state.loggingStyle;
     const trackSocialMedia = state.trackSocialMedia;
@@ -91,6 +96,7 @@ export default function Options(): JSX.Element {
     await browser.storage.sync.set({
       apiKey,
       blacklist,
+      hostname,
       loggingStyle,
       loggingType,
       socialMediaSites,
@@ -105,6 +111,7 @@ export default function Options(): JSX.Element {
       apiKey,
       blacklist,
       displayAlert: true,
+      hostname,
       loggingStyle,
       loggingType,
       socialMediaSites,
@@ -248,6 +255,24 @@ export default function Options(): JSX.Element {
               </div>
             </div>
 
+            <div className="form-group">
+              <label htmlFor="theme" className="col-lg-2 control-label">
+                Hostname
+              </label>
+
+              <div className="col-lg-10">
+                <input
+                  type="text"
+                  className="form-control"
+                  value={state.hostname}
+                  onChange={(e) => setState({ ...state, hostname: e.target.value })}
+                />
+                <span className="help-block">
+                  Optional name of local machine. By default &apos;Unknown Hostname&apos;.
+                </span>
+              </div>
+            </div>
+
             <div className="form-group row">
               <div className="col-lg-10 col-lg-offset-2 space-between align-items-center">
                 <div

src/config/config.test.ts

@@ -44,6 +44,7 @@ describe('wakatime config', () => {
       https://www.udemy.com/
       https://www.w3schools.com/",
         "heartbeatApiUrl": "https://wakatime.com/api/v1/users/current/heartbeats",
+        "hostname": "",
         "loggingEnabled": true,
         "loggingStyle": "blacklist",
         "loggingType": "domain",

src/config/config.ts

@@ -70,6 +70,8 @@ export interface Config {
    * Url to which to send the heartbeat
    */
   heartbeatApiUrl: string;
+
+  hostname: string;
   /**
    * Is logging enabled
    */
@@ -134,6 +136,8 @@ const config: Config = {
   heartbeatApiUrl:
     process.env.HEART_BEAT_API_URL ?? 'https://wakatime.com/api/v1/users/current/heartbeats',
 
+  hostname: '',
+
   loggingEnabled: true,
 
   loggingStyle: 'blacklist',

src/core/WakaTimeCore.ts

@@ -111,6 +111,7 @@ class WakaTimeCore {
     }
     const items = await browser.storage.sync.get({
       blacklist: '',
+      hostname: config.hostname,
       loggingEnabled: config.loggingEnabled,
       loggingStyle: config.loggingStyle,
       socialMediaSites: config.socialMediaSites,
@@ -142,6 +143,7 @@ class WakaTimeCore {
           if (!contains(currentActiveTab.url as string, items.blacklist as string)) {
             await this.sendHeartbeat(
               {
+                hostname: items.hostname as string,
                 project,
                 url: currentActiveTab.url as string,
               },
@@ -160,7 +162,11 @@ class WakaTimeCore {
           );
           if (heartbeat.url) {
             await this.sendHeartbeat(
-              { ...heartbeat, project: heartbeat.project ?? project },
+              {
+                ...heartbeat,
+                hostname: items.hostname as string,
+                project: heartbeat.project ?? project,
+              },
               apiKey,
             );
           } else {
@@ -260,12 +266,12 @@ class WakaTimeCore {
     if (loggingType == 'domain') {
       heartbeat.url = getDomainFromUrl(heartbeat.url);
       payload = this.preparePayload(heartbeat, 'domain');
-      await this.sendPostRequestToApi(payload, apiKey);
+      await this.sendPostRequestToApi(payload, apiKey, heartbeat.hostname);
     }
     // Send entity in heartbeat
     else if (loggingType == 'url') {
       payload = this.preparePayload(heartbeat, 'url');
-      await this.sendPostRequestToApi(payload, apiKey);
+      await this.sendPostRequestToApi(payload, apiKey, heartbeat.hostname);
     }
   }
 
@@ -333,13 +339,23 @@ class WakaTimeCore {
    * @param method
    * @returns {*}
    */
-  async sendPostRequestToApi(payload: Record<string, unknown>, apiKey = ''): Promise<void> {
+  async sendPostRequestToApi(
+    payload: Record<string, unknown>,
+    apiKey = '',
+    hostname = '',
+  ): Promise<void> {
     try {
-      const response = await fetch(`${config.heartbeatApiUrl}?api_key=${apiKey}`, {
+      const request: RequestInit = {
         body: JSON.stringify(payload),
         credentials: 'omit',
         method: 'POST',
-      });
+      };
+      if (hostname) {
+        request.headers = {
+          'X-Machine-Name': hostname,
+        };
+      }
+      const response = await fetch(`${config.heartbeatApiUrl}?api_key=${apiKey}`, request);
       await response.json();
     } catch (err: unknown) {
       if (this.db) {

src/manifests/chrome.json

@@ -26,5 +26,5 @@
     "page": "options.html"
   },
   "permissions": ["alarms", "tabs", "storage", "idle"],
-  "version": "3.0.6"
+  "version": "3.0.7"
 }

src/manifests/firefox.json

@@ -39,5 +39,5 @@
     "storage",
     "idle"
   ],
-  "version": "3.0.6"
+  "version": "3.0.7"
 }

src/types/heartbeats.ts

@@ -28,6 +28,7 @@ export interface Datum {
 }
 
 export interface SendHeartbeat {
+  hostname: string;
   project: string | null;
   url: string;
 }