feat: display running workflows

src/newtab/App.vue

@@ -375,8 +375,12 @@ watch(
     if (isRecording) {
       router.push('/recording');
 
-      await browser.action.setBadgeBackgroundColor({ color: '#ef4444' });
-      await browser.action.setBadgeText({ text: 'rec' });
+      await (browser.action || browser.browserAction).setBadgeBackgroundColor({
+        color: '#ef4444',
+      });
+      await (browser.action || browser.browserAction).setBadgeText({
+        text: 'rec',
+      });
     }
 
     autoDeleteLogs();

src/workflowEngine/WorkflowState.js

@@ -1,4 +1,5 @@
 /* eslint-disable  no-param-reassign */
+import browser from 'webextension-polyfill';
 
 class WorkflowState {
   constructor({ storage, key = 'workflowState' }) {
@@ -9,6 +10,11 @@ class WorkflowState {
     this.eventListeners = {};
   }
 
+  _updateBadge() {
+    const browserAction = browser.action || browser.browserAction;
+    browserAction.setBadgeText({ text: (this.states.size || '').toString() });
+  }
+
   _saveToStorage() {
     const states = Object.fromEntries(this.states);
     return this.storage.set(this.key, states);
@@ -58,6 +64,7 @@ class WorkflowState {
 
   async add(id, data = {}) {
     this.states.set(id, data);
+    this._updateBadge();
     await this._saveToStorage(this.key);
   }
 
@@ -84,6 +91,7 @@ class WorkflowState {
   async delete(id) {
     this.states.delete(id);
     this.dispatchEvent('delete', id);
+    this._updateBadge();
     await this._saveToStorage();
   }
 }