feat: support xpath in condition builder

src/content/index.js

@@ -1,27 +1,16 @@
 import browser from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
 import { toCamelCase } from '@/utils/helper';
+import FindElement from '@/utils/find-element';
 import executedBlock from './executed-block';
 import blocksHandler from './blocks-handler';
 
-const elementActions = {
-  text: (element) => element.innerText,
-  visible: (element) => {
-    const { visibility, display } = getComputedStyle(element);
-
-    return visibility !== 'hidden' || display !== 'none';
-  },
-  invisible: (element) => !elementActions.visible(element),
-  attribute: (element, { attrName }) => {
-    if (!element.hasAttribute(attrName)) return null;
-
-    return element.getAttribute(attrName);
-  },
-};
 function handleConditionBuilder({ data, type }) {
   if (!type.startsWith('element')) return null;
 
-  const element = document.querySelector(data.selector);
+  const selectorType = data.selector.startsWith('/') ? 'xpath' : 'cssSelector';
+
+  const element = FindElement[selectorType](data);
   const { 1: actionType } = type.split('#');
 
   if (!element) {
@@ -30,7 +19,22 @@ function handleConditionBuilder({ data, type }) {
     return null;
   }
 
-  return elementActions[actionType](element, data);
+  const elementActions = {
+    text: () => element.innerText,
+    visible: () => {
+      const { visibility, display } = getComputedStyle(element);
+
+      return visibility !== 'hidden' || display !== 'none';
+    },
+    invisible: () => !elementActions.visible(element),
+    attribute: ({ attrName }) => {
+      if (!element.hasAttribute(attrName)) return null;
+
+      return element.getAttribute(attrName);
+    },
+  };
+
+  return elementActions[actionType](data);
 }
 
 (() => {

src/utils/shared.js

@@ -1,4 +1,3 @@
-/* to-do execute multiple blocks simultaneously, keyboard shortcut */
 import { nanoid } from 'nanoid';
 
 export const tasks = {
@@ -994,7 +993,7 @@ export const conditionBuilder = {
   inputTypes: {
     selector: {
       placeholder: '.class',
-      label: 'CSS selector',
+      label: 'CSS selector or XPath',
     },
     value: {
       label: 'Value',