feat: open in new tab on the link block

src/components/newtab/workflow/edit/EditLink.vue

@@ -0,0 +1,29 @@
+<template>
+  <edit-interaction-base v-bind="{ data }" @change="updateData">
+    <ui-checkbox
+      :model-value="data.openInNewTab"
+      class="mt-4"
+      @change="updateData({ openInNewTab: $event })"
+    >
+      {{ t('workflow.blocks.link.openInNewTab') }}
+    </ui-checkbox>
+  </edit-interaction-base>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import EditInteractionBase from './EditInteractionBase.vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const { t } = useI18n();
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+</script>

src/content/blocksHandler/handlerLink.js

@@ -6,11 +6,14 @@ async function link(block) {
   if (!element) {
     throw new Error('element-not-found');
   }
+  if (element.tagName !== 'A') {
+    throw new Error('Element is not a link');
+  }
 
   markElement(element, block);
 
   const url = element.href;
-  if (url) window.open(url, '_self');
+  if (url && !block.data.openInNewTab) window.open(url, '_self');
 
   return url;
 }

src/locales/en/blocks.json

@@ -557,7 +557,8 @@
       },
       "link": {
         "name": "Link",
-        "description": "Open link element"
+        "description": "Open link element",
+        "openInNewTab": "Open in new tab"
       },
       "attribute-value": {
         "name": "Attribute value",

src/utils/shared.js

@@ -414,7 +414,7 @@ export const tasks = {
     description: 'Open link element',
     icon: 'riLink',
     component: 'BlockBasic',
-    editComponent: 'EditInteractionBase',
+    editComponent: 'EditLink',
     category: 'interaction',
     inputs: 1,
     outputs: 1,
@@ -430,6 +430,7 @@ export const tasks = {
       selector: '',
       markEl: false,
       disableMultiple: true,
+      openInNewTab: false,
     },
   },
   'attribute-value': {

src/workflowEngine/blocksHandler/handlerLink.js

@@ -0,0 +1,25 @@
+import browser from 'webextension-polyfill';
+
+export default async function ({ data, id, label }) {
+  const url = await this._sendMessageToTab({
+    id,
+    data,
+    label,
+  });
+
+  if (data.openInNewTab) {
+    const tab = await browser.tabs.create({
+      url,
+      windowId: this.activeTab.windowId,
+    });
+
+    this.activeTab.url = url;
+    this.activeTab.frameId = 0;
+    this.activeTab.id = tab.id;
+  }
+
+  return {
+    data: url,
+    nextBlockId: this.getBlockConnections(id),
+  };
+}