Custom extension does not trigger workflows using js custom event

[jlopez994]

Describe the bug
When I try to trigger a workflow from my extension, using a JavaScript component, nothing happens.

To Reproduce
Steps to reproduce the behavior:

1. Create a new workflow
2. Create a new window/tab component for using as active tab for the script.
3. Create a Javascript component and set execution context to active tab
4. Trigger the event automa:execute-workflow using the id from the workflows page.

This is the code I tried in the js component:

dispatchEvent(
    new CustomEvent('automa:execute-workflow', {
      detail: { 
        id: 'xxxxxxxxxxxxxxxxxx',
        data: { variables: {} }
      }
  })
)

Expected behavior
The workflow should be triggered as it does in the Automa extension

Screenshots

This is where I get the workflow id.

Desktop (please complete the following information):

• OS: [e.g. Windows] Windows 11
• Browser: [e.g. Google Chrome] Brave
• Extension Version: [e.g. v0.12.0] Latest

Additional context
Add any other context about the problem here.

[lslcoded]

help me？ Custom extension does not trigger workflows using js custom event #1706

[lslcoded]

@jlopez994 Have you solved the problem yet? How was it resolved? Can you help me see what's going on?

[jlopez994]

Hey @lslcoded, I found a workaround until a proper solution be proposed.

I was checking out to the extension source code, and I saw they emit some messages to the background script in order to start the workflow, so I decided to replicate this behavior instead of calling the event. (which btw seems to be not handled in the extension)

This is the code I created from the source:

const executeWorkflow = async (id, variables) => {
  try {
    const data = { workflowId: id, workflowOptions: { data: { variables } } };
    const workflow = await getWorkflow(data.workflowId);
    if (!workflow) throw new Error(`Can't find workflow with ${data.workflowId} Id`);
    const n = data.workflowOptions;
    sendMessage('workflow:execute', { ...workflow, options: n }, 'background');
  } catch (e) {
    console.error(e);
  }
};
const getWorkflow = async (id) => {
  const t = ((await chrome.storage.local.get('workflows')).workflows || []).filter(
    (e) => !e.invisible
  );
  if (id) return t.find((t) => t.id === id);
  return t;
};
const sendMessage = (event, options, type) => {
  let i = { name: type ? type + '--' + event : event, data: options };
  return chrome.runtime.sendMessage(i);
};

And I just call the executeWorkflow function with the workflow id (which I got from the extension page) and some workflow variables (if needed). This is executed into a javascript component.

In my case, I have a background process in the popup window, which receives info through websockets, and calls this function in order to run a workflow. I guess it'd work also inside of a workflow, but I didn't test it.

Hope it helps!

[lslcoded]

local

What file should these JavaScript scripts be placed in and where should they be executed specifically!