feat: use variable to store `refData` in JS block

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -226,6 +226,8 @@ export default {
       if (isTriggerExists) return;
 
       if (target.closest('.drawflow_content_node')) {
+        prevSelectedEl.nodeContent?.classList.remove('ring-4');
+
         const targetNodeId = target
           .closest('.drawflow-node')
           .id.replace(/node-/, '');

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

@@ -196,7 +196,7 @@ function automaFuncsCompletion(context) {
       {
         label: 'automaSetVariable',
         type: 'function',
-        apply: snippet('automaSetVariable(${name}, ${value})'),
+        apply: snippet("automaSetVariable('${name}', ${value})"),
         info: () => {
           const container = document.createElement('div');
 

src/content/blocksHandler/handlerJavascriptCode.js

@@ -1,39 +1,31 @@
+import { nanoid } from 'nanoid/non-secure';
 import { sendMessage } from '@/utils/message';
 import { automaRefDataStr } from '../utils';
 
-function getAutomaScript(blockId, everyNewTab) {
+function getAutomaScript(refData, everyNewTab) {
+  const varName = `automa${nanoid(5)}`;
+
   let str = `
+const ${varName} = ${JSON.stringify(refData)};
+${automaRefDataStr(varName)}
 function automaSetVariable(name, value) {
-  const data = JSON.parse(sessionStorage.getItem('automa--${blockId}')) || null;
-
-  if (data === null) return null;
-
-  data.variables[name] = value;
-  sessionStorage.setItem('automa--${blockId}', JSON.stringify(data));
+  ${varName}.variables[name] = value;
 }
 function automaNextBlock(data, insert = true) {
-  window.dispatchEvent(new CustomEvent('__automa-next-block__', { detail: { data, insert } }));
+  window.dispatchEvent(new CustomEvent('__automa-next-block__', { detail: { data, insert, refData: ${varName} } }));
 }
 function automaResetTimeout() {
  window.dispatchEvent(new CustomEvent('__automa-reset-timeout__'));
 }
-${automaRefDataStr(blockId)}
   `;
 
-  if (everyNewTab) str = automaRefDataStr(blockId);
+  if (everyNewTab) str = automaRefDataStr(varName);
 
   return str;
 }
 
 function javascriptCode(block) {
-  if (!block.data.everyNewTab) {
-    sessionStorage.setItem(
-      `automa--${block.id}`,
-      JSON.stringify(block.refData)
-    );
-  }
-
-  const automaScript = getAutomaScript(block.id, block.data.everyNewTab);
+  const automaScript = getAutomaScript(block.refData, block.data.everyNewTab);
 
   return new Promise((resolve, reject) => {
     let documentCtx = document;
@@ -115,20 +107,29 @@ function javascriptCode(block) {
 
       if (!block.data.everyNewTab) {
         let timeout;
-        const cleanUp = (columns = {}) => {
-          const storageKey = `automa--${block.id}`;
-          const storageRefData = JSON.parse(sessionStorage.getItem(storageKey));
+        let isResolved = false;
+
+        const cleanUp = (detail = {}) => {
+          if (isResolved) return;
+          isResolved = true;
 
           script.remove();
           preloadScripts.forEach((item) => {
             if (item.removeAfterExec) item.script.remove();
           });
 
-          resolve({ columns, variables: storageRefData?.variables });
+          clearTimeout(timeout);
+
+          resolve({
+            columns: {
+              data: detail?.data,
+              insert: detail?.insert,
+            },
+            variables: detail?.refData?.variables,
+          });
         };
 
         window.addEventListener('__automa-next-block__', ({ detail }) => {
-          clearTimeout(timeout);
           cleanUp(detail || {});
         });
         window.addEventListener('__automa-reset-timeout__', () => {

src/content/handleTestCondition.js

@@ -1,4 +1,4 @@
-import { nanoid } from 'nanoid';
+import { nanoid } from 'nanoid/non-secure';
 import { visibleInViewport } from '@/utils/helper';
 import FindElement from '@/utils/FindElement';
 import { automaRefDataStr } from './utils';
@@ -44,14 +44,13 @@ function handleConditionElement({ data, type }) {
 }
 function injectJsCode({ data, refData }) {
   return new Promise((resolve, reject) => {
-    const stateId = nanoid();
-
-    sessionStorage.setItem(`automa--${stateId}`, JSON.stringify(refData));
+    const varName = `automa${nanoid(5)}`;
 
     const scriptEl = document.createElement('script');
     scriptEl.textContent = `
       (async () => {
-        ${automaRefDataStr(stateId)}
+        const ${varName} = ${JSON.stringify(refData)};
+        ${automaRefDataStr(varName)}
         try {
           ${data.code}
         } catch (error) {

src/content/utils.js

@@ -1,4 +1,4 @@
-export function automaRefDataStr(stateId) {
+export function automaRefDataStr(varName) {
   return `
 function findData(obj, path) {
   const paths = path.split('.');
@@ -24,11 +24,11 @@ function findData(obj, path) {
   return result;
 }
 function automaRefData(keyword, path = '') {
-  const data = JSON.parse(sessionStorage.getItem('automa--${stateId}')) || null;
+  const data = ${varName}[keyword];
 
-  if (data === null) return null;
+  if (!data) return;
 
-  return findData(data[keyword], path);
+  return findData(data, path);
 }
   `;
 }