feat: integrate with marketplace

.gitignore

@@ -21,6 +21,7 @@
 *.log
 
 # secrets
-secrets.*.js
+secrets.production.js
+secrets.development.js
 
 .idea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {

src/assets/css/tailwind.css

@@ -47,6 +47,16 @@ select:focus,
 .tippy-box[data-theme~='tooltip-theme'] {
   @apply px-2 py-1 bg-gray-900 text-sm text-gray-200 rounded-md;
 }
+.ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+.ProseMirror img {
+  max-width: 100%;
+  height: auto;
+}
+.ProseMirror img.ProseMirror-selectednode {
+  outline: 3px solid #68CEF8;
+}
 
 @layer utilities {
   .hoverable {

src/components/newtab/shared/SharedCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <ui-card class="hover:ring-2 group hover:ring-accent">
+  <ui-card class="hover:ring-2 flex flex-col group hover:ring-accent">
     <slot name="header">
       <div class="flex items-center mb-4">
         <ui-img
@@ -40,7 +40,7 @@
         </ui-popover>
       </div>
     </slot>
-    <div class="cursor-pointer" @click="$emit('click', data)">
+    <div class="cursor-pointer flex-1" @click="$emit('click', data)">
       <p class="line-clamp font-semibold leading-tight">
         {{ data.name }}
       </p>
@@ -50,8 +50,8 @@
       >
         {{ data.description }}
       </p>
-      <p class="text-gray-600 dark:text-gray-200">{{ formatDate() }}</p>
     </div>
+    <p class="text-gray-600 dark:text-gray-200">{{ formatDate() }}</p>
   </ui-card>
 </template>
 <script setup>

src/content/shortcut.js

@@ -1,7 +1,9 @@
 import { openDB } from 'idb';
+import { nanoid } from 'nanoid';
 import Mousetrap from 'mousetrap';
 import browser from 'webextension-polyfill';
 import secrets from 'secrets';
+import { objectHasKey } from '@/utils/helper';
 import { sendMessage } from '@/utils/message';
 
 Mousetrap.prototype.stopCallback = function () {
@@ -19,6 +21,23 @@ function getTriggerBlock(workflow) {
   return trigger;
 }
 
+function initWebListener() {
+  const listeners = {};
+
+  function on(name, callback) {
+    (listeners[name] = listeners[name] || []).push(callback);
+  }
+
+  window.addEventListener('__automa-ext__', ({ detail }) => {
+    if (!detail || !objectHasKey(listeners, detail.type)) return;
+
+    listeners[detail.type].forEach((listener) => {
+      listener(detail.data);
+    });
+  });
+
+  return { on };
+}
 async function listenWindowMessage(workflows) {
   try {
     if (secrets?.webOrigin !== window.location.origin) return;
@@ -31,15 +50,28 @@ async function listenWindowMessage(workflows) {
 
     db.put('store', workflows, 'workflows');
 
-    window.addEventListener('__automa-ext__', async ({ detail }) => {
-      if (detail.type === 'open-workflow') {
-        if (!detail.workflowId) return;
+    const webListener = initWebListener();
+
+    webListener.on('open-workflow', ({ workflowId }) => {
+      if (!workflowId) return;
 
-        sendMessage(
-          'open:dashboard',
-          `/workflows/${detail.workflowId}`,
-          'background'
+      sendMessage('open:dashboard', `/workflows/${workflowId}`, 'background');
+    });
+    webListener.on('add-workflow', async ({ workflow }) => {
+      try {
+        const { workflows: workflowsStorage } = await browser.storage.local.get(
+          'workflows'
         );
+
+        workflowsStorage.push({
+          ...workflow,
+          id: nanoid(),
+          createdAt: Date.now(),
+        });
+
+        await browser.storage.local.set({ workflows: workflowsStorage });
+      } catch (error) {
+        console.error(error);
       }
     });
   } catch (error) {
@@ -57,7 +89,10 @@ async function listenWindowMessage(workflows) {
 
     listenWindowMessage(workflows);
 
-    document.body.setAttribute('data-atm-ext-installed', '');
+    document.body.setAttribute(
+      'data-atm-ext-installed',
+      browser.runtime.getManifest().version
+    );
 
     if (shortcutsArr.length === 0) return;
 

src/locales/en/blocks.json

@@ -41,7 +41,7 @@
         ],
         "useRegex": "Use regex",
         "shortcut": {
-          "tootlip": "Record shortcut",
+          "tooltip": "Record shortcut",
           "checkboxTitle": "Execute shortcut even when you're in an input element",
           "checkbox": "Active while in input",
           "note": "Note: keyboard shortcut only working when you're on a webpage"
@@ -333,4 +333,4 @@
       }
     }
   }
-}
+}

src/locales/fr/blocks.json

@@ -41,7 +41,7 @@
         ],
         "useRegex": "Utiliser une Regex",
         "shortcut": {
-          "tootlip": "Enregistrer un raccourci",
+          "tooltip": "Enregistrer un raccourci",
           "checkboxTitle": "Exécuter le raccourci même lorsque vous êtes dans un élément de saisie",
           "checkbox": "Actif dans un élément de saisie",
           "note": "Note: le raccourci clavier ne fonctionne que lorsque vous êtes sur une page web"
@@ -332,4 +332,4 @@
       }
     }
   }
-}
+}

src/locales/vi/blocks.json

@@ -41,7 +41,7 @@
         ],
         "useRegex": "Dùng regex",
         "shortcut": {
-          "tootlip": "Ghi lại lối tắt",
+          "tooltip": "Ghi lại lối tắt",
           "checkboxTitle": "Execute shortcut even when you're in an input element",
           "checkbox": "Hoạt động khi nhập liệu",
           "note": "Lưu ý: phím tắt chỉ hoạt động khi bạn đang truy cập một trang web"

src/locales/zh-TW/blocks.json

@@ -34,7 +34,7 @@
         ],
         "useRegex": "使用正則表達式",
         "shortcut": {
-          "tootlip": "設定快捷鍵",
+          "tooltip": "設定快捷鍵",
           "checkboxTitle": "允許快捷鍵在文字輸入框內執行",
           "checkbox": "啟用輸入框內執行快捷鍵",
           "note": "Note: 鍵盤快捷鍵只在當前網頁有效"

src/locales/zh/blocks.json

@@ -34,7 +34,7 @@
         ],
         "useRegex": "使用正则表达式",
         "shortcut": {
-          "tootlip": "录制快捷键",
+          "tooltip": "录制快捷键",
           "checkboxTitle": "即使在输入框中也执行快捷键",
           "checkbox": "在输入框中执行快捷键",
           "note": "提示: 键盘快捷键仅在你访问网页时有效"

src/utils/shared.js

@@ -1,4 +1,5 @@
 /* to-do screenshot, looping, cookies, assets, tab loaded, opened tab, and run workflow block? */
+import { nanoid } from 'nanoid';
 
 export const tasks = {
   trigger: {
@@ -570,13 +571,13 @@ export const dataExportTypes = [
 
 export const firstWorkflows = [
   {
-    id: 'google-search',
+    id: nanoid(),
     name: 'Google search',
     createdAt: Date.now(),
     drawflow: `{"drawflow":{"Home":{"data":{"d634ff22-5dfe-44dc-83d2-842412bd9fbf":{"id":"d634ff22-5dfe-44dc-83d2-842412bd9fbf","name":"trigger","data":{"type":"manual","interval":10},"class":"trigger","html":"BlockBasic","typenode":"vue","inputs":{},"outputs":{"output_1":{"connections":[{"node":"b9e7e0d4-e86a-4635-a352-31c63723fef4","output":"input_1"}]}},"pos_x":50,"pos_y":300},"b9e7e0d4-e86a-4635-a352-31c63723fef4":{"id":"b9e7e0d4-e86a-4635-a352-31c63723fef4","name":"new-tab","data":{"url":"https://google.com","active":true},"class":"new-tab","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"d634ff22-5dfe-44dc-83d2-842412bd9fbf","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"09f3a14c-0514-4287-93b0-aa92b0064fba","output":"input_1"}]}},"pos_x":278,"pos_y":268},"09f3a14c-0514-4287-93b0-aa92b0064fba":{"id":"09f3a14c-0514-4287-93b0-aa92b0064fba","name":"forms","data":{"description":"Type query","selector":"[name='q']","markEl":false,"multiple":false,"selected":true,"type":"text-field","value":"Stackoverflow","delay":"120","events":[]},"class":"forms","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"b9e7e0d4-e86a-4635-a352-31c63723fef4","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"5f76370d-aa3d-4258-8319-230fcfc49a3a","output":"input_1"}]}},"pos_x":551,"pos_y":290},"5f76370d-aa3d-4258-8319-230fcfc49a3a":{"id":"5f76370d-aa3d-4258-8319-230fcfc49a3a","name":"event-click","data":{"description":"Click search","selector":"center:nth-child(1) > .gNO89b","markEl":false,"multiple":false},"class":"event-click","html":"BlockBasic","typenode":"vue","inputs":{"input_1":{"connections":[{"node":"09f3a14c-0514-4287-93b0-aa92b0064fba","input":"output_1"}]}},"outputs":{"output_1":{"connections":[]}},"pos_x":794,"pos_y":308}}}}}`,
   },
   {
-    id: 'lorem-ipsum',
+    id: nanoid(),
     name: 'Generate lorem ipsum',
     createdAt: Date.now(),
     drawflow:

webpack.config.js

@@ -13,6 +13,7 @@ const ASSET_PATH = process.env.ASSET_PATH || '/';
 
 const alias = {
   '@': path.resolve(__dirname, 'src/'),
+  secrets: path.join(__dirname, 'secrets.blank.js'),
 };
 
 // load the secrets