Can vscode's markdown preview scripts trigger actions directly in an extension?

Question

I'm writing a vscode extension where I'm hoping to squeeze more dynamic functionality out of markdown preview. Effectively the problem I'm trying to solve is:

• In markdown preview, there's a checkbox
• When user clicks the checkbox in markdown preview, send a message/event to the vscode extension runtime
• Vscode extension can listen for this message/event and store the action in local storage
• Checkbox state is saved - and subsequent renders of the markdown preview can use this action

Ideally, I'd like to do this while keeping the default markdown preview security (https://code.visualstudio.com/Docs/languages/markdown#_strict). After all, I don't need the extension to or markdown preview script to talk to a remote server - I just want them to be able to talk to one another.

Problem as code

To write the problem as sudo code, I want my markdown preview script to contain something like:

const button = ... // get button element
button.addEventListener('click', () => {
  ... /*
       * Send a message to the vscode extension. Something like:
       * `vscode.postMessage('vscode.my-extension.preview-action' + value)`
       * (which I can't get to work, I'll discuss why)
       */
});

where then my extension can listen for messages like 'vscode.my-extension.preview-action'.

What I've Tried Already

I have tried acquireVsCodeApi() but because the markdown extension already does that, I can't do it again in the subsequent loaded script. I've also tried registering a uri handler but as far as I can try out the preview script still needs to fetch to that uri, which is still blocked by the default markdown security settings.

Perhaps markdown preview scripts are not the place to do this kind of thing, but I just wanted to leverage as much as possible that's already there with the vscode markdown extension. I want to supplement markdown but not replace it, the functionality I want to add is just icing on markdown documentation.

I've read https://code.visualstudio.com/api/extension-guides/markdown-extension#adding-advanced-functionality-with-scripts and it doesn't tell me much about markdown extension scripts capabilities and limitations.

Answer 1

Thanks to @LexLi I looked at some of the source code in the markdown extension and was able to come up with an ugly hack to make this work in preview scripts. Markdown allows normal clicks. And vscode extensions can handle normal clicks. I've paraphrased the code so there could be small syntax errors.

In the extension I did this:

vscode.window.registerUriHandler({
  handleUri(uri: vscode.Uri): vscode.ProviderResult<void> {
    console.log(`EXTENSION GOT URL: ${uri.toString()}`);
  },
});

Then I made sure my extension/preview script put this in the document

<!-- in the preview script I place a button like this -->
<!-- it even works with hidden :) so I can do more app customization -->
<a
  hidden
  id="my-extension-messager"
  href="vscode://publisher-id.my-extension"
>
  cant see me but I'm there
</a>

Then my preview script I can even set href before faking a click:

const aMessager = document.querySelector("#my-extension-messager");
console.log('client is setting attribute and clicking...')
aMessager.setAttribute('href', 'vscode://publisher-id.my-extension?action=do-something');
aMessager.click();
console.log('client clicked');

Logs I saw (trimmed/tweaked from my particular extension to match the contrived example):

client is setting attribute and clicking...
client clicked
[Extension Host] EXTENSION GOT URL: vscode://publisher-id.my-extension?action%3Ddo-something

It's a hack but I can do a lot with this. Within the URL I can encode data back to the extension and kind of pass whatever I want (as long as data is relatively small).