feat: add new window block

src/background/index.js

@@ -98,7 +98,7 @@ chrome.runtime.onInstalled.addListener((details) => {
       });
   }
 });
-console.log(browser.tabs);
+
 const message = new MessageListener('background');
 
 message.on('get:sender', (_, sender) => {

src/background/workflow-engine/blocks-handler.js

@@ -222,6 +222,29 @@ export function forwardPage(block) {
   });
 }
 
+export async function newWindow(block) {
+  const nextBlockId = getBlockConnection(block);
+
+  try {
+    const { incognito, windowState } = block.data;
+    const { id } = await browser.windows.create({
+      incognito,
+      state: windowState,
+    });
+    console.log('windowId', id);
+    this.windowId = id;
+
+    return {
+      data: id,
+      nextBlockId,
+    };
+  } catch (error) {
+    error.nextBlockId = nextBlockId;
+
+    throw error;
+  }
+}
+
 function tabUpdatedListener(tab) {
   return new Promise((resolve, reject) => {
     this._listener({
@@ -238,16 +261,28 @@ function tabUpdatedListener(tab) {
   });
 }
 export async function newTab(block) {
+  if (this.windowId) {
+    try {
+      await browser.windows.get(this.windowId);
+    } catch (error) {
+      this.windowId = null;
+    }
+  }
+
   try {
     const { updatePrevTab, url, active } = block.data;
 
     if (updatePrevTab && this.tabId) {
       await browser.tabs.update(this.tabId, { url, active });
     } else {
-      const { id, windowId } = await browser.tabs.create({ url, active });
+      const tab = await browser.tabs.create({
+        url,
+        active,
+        windowId: this.windowId,
+      });
 
-      this.tabId = id;
-      this.windowId = windowId;
+      this.tabId = tab.id;
+      this.windowId = tab.windowId;
     }
 
     this.frameId = 0;

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

@@ -1,9 +1,8 @@
-<!-- use the current active tab optoin?  -->
 <template>
-  <div class="mb-2 mt-4">
+  <div class="mb-2 mt-4 space-y-2">
     <ui-textarea
       :model-value="data.description"
-      class="w-full mb-2"
+      class="w-full"
       placeholder="Description"
       @change="updateData({ description: $event })"
     />
@@ -18,14 +17,15 @@
     <a
       href="https://github.com/Kholid060/automa/wiki/Features#reference-data"
       rel="noopener"
-      class="text-primary inline-block mb-2 text-sm"
+      class="text-primary inline-block text-sm"
       target="_blank"
+      style="margin-top: 0"
     >
       Learn how to add dynamic data
     </a>
     <ui-checkbox
       :model-value="data.updatePrevTab"
-      class="mb-2 leading-tight"
+      class="leading-tight"
       title="Use the previously opened new tab instead of creating a new one"
       @change="updateData({ updatePrevTab: $event })"
     >
@@ -37,6 +37,12 @@
     >
       Set as active tab
     </ui-checkbox>
+    <ui-checkbox
+      :model-value="data.inGroup"
+      @change="updateData({ inGroup: $event })"
+    >
+      Add tab to group
+    </ui-checkbox>
   </div>
 </template>
 <script setup>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="mb-2 mt-4 space-y-2">
+    <ui-textarea
+      :model-value="data.description"
+      class="w-full"
+      placeholder="Description"
+      @change="updateData({ description: $event })"
+    />
+    <ui-select
+      :model-value="data.windowState"
+      class="w-full"
+      placeholder="Window state"
+      @change="updateData({ windowState: $event })"
+    >
+      <option v-for="state in windowStates" :key="state" :value="state">
+        {{ state }}
+      </option>
+    </ui-select>
+    <ui-checkbox
+      :model-value="data.incognito"
+      :disabled="!allowInIncognito"
+      @change="updateData({ incognito: $event })"
+    >
+      Set as incognito window
+      <span
+        title="You must enable 'Allow in incognito' for this extension to use the option"
+      >
+        &#128712;
+      </span>
+    </ui-checkbox>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import browser from 'webextension-polyfill';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const windowStates = ['normal', 'minimized', 'maximized', 'fullscreen'];
+const allowInIncognito = ref(false);
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+
+onMounted(async () => {
+  allowInIncognito.value = await browser.extension.isAllowedIncognitoAccess();
+
+  if (!allowInIncognito.value) {
+    updateData({ incognito: false });
+  }
+});
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="grid gap-2 grid-cols-2">
+    <ui-input v-model="defaultParams.data" label="Data" />
+    <ui-input v-model="defaultParams.inputType" label="Input type" />
+  </div>
+</template>
+<script setup>
+import { shallowReactive, watch, onMounted } from 'vue';
+import { objectHasKey } from '@/utils/helper';
+
+const props = defineProps({
+  params: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update']);
+
+const defaultParams = shallowReactive({
+  data: '',
+  inputType: 'insertText',
+});
+
+watch(
+  defaultParams,
+  (value) => {
+    emit('update', value);
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  Object.entries(props.params).forEach(([key, value]) => {
+    if (objectHasKey(defaultParams, key)) defaultParams[key] = value;
+  });
+});
+</script>

src/components/ui/uiCheckbox.vue

@@ -1,6 +1,7 @@
 <template>
   <label class="checkbox-ui inline-flex items-center">
     <div
+      :class="{ 'pointer-events-none opacity-75': disabled }"
       class="
         relative
         h-5
@@ -14,7 +15,7 @@
         type="checkbox"
         class="opacity-0 checkbox-ui__input"
         :value="modelValue"
-        v-bind="{ checked: modelValue }"
+        v-bind="{ checked: modelValue, disabled }"
         @change="changeHandler"
       />
       <div
@@ -48,6 +49,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {

src/lib/v-remixicon.js

@@ -3,6 +3,7 @@ import {
   riHome5Line,
   riFolderLine,
   riInformationLine,
+  riWindow2Line,
   riArrowUpDownLine,
   riRefreshLine,
   riBookOpenLine,
@@ -73,6 +74,7 @@ export const icons = {
   riHome5Line,
   riFolderLine,
   riInformationLine,
+  riWindow2Line,
   riArrowUpDownLine,
   riRefreshLine,
   riBookOpenLine,

src/utils/shared.js

@@ -27,7 +27,7 @@ export const tasks = {
   },
   'active-tab': {
     name: 'Active tab',
-    description: 'Set as active tab',
+    description: "Set current tab that you're in as a active tab",
     icon: 'riWindowLine',
     component: 'BlockBasic',
     category: 'browser',
@@ -53,9 +53,27 @@ export const tasks = {
       description: '',
       url: '',
       active: true,
+      inGroup: false,
       updatePrevTab: false,
     },
   },
+  'new-window': {
+    name: 'New window',
+    description: 'Create a new window',
+    icon: 'riWindow2Line',
+    component: 'BlockBasic',
+    editComponent: 'EditNewWindow',
+    category: 'browser',
+    inputs: 1,
+    outputs: 1,
+    allowedInputs: true,
+    maxConnection: 1,
+    data: {
+      description: '',
+      incognito: false,
+      windowState: 'normal',
+    },
+  },
   'go-back': {
     name: 'Go back',
     description: 'Go back to the previous page',