Inject javascript while user perform an action in app to install

[varun7612]

I am developing an app extension to install the chat widget.
I am using the scriptTagAPI to inject the theme that was dynamically created.
I just submit my app to Shopify and they suggest using the theme-app extension.
I am looking for a way to pass the dynamic variables to the script while users select a chat widget from the list.

For eg:

_init('project_id', 'project_id')

If I put this inside the app extension. I am not able to pass the variable. Any help would be appreciated.

[theapemachine]

Not sure if you are using the embedded variation or the section one (sorry, not too familiar with the correct names I guess, haven't been working with this framework for long) but I am using the embedded one (this probably will work either way come to think of it) and so you have those two liquid files where you make the schema block, which basically defines your settings for the extension.

So say I have:

{% schema %}
{
  "name": "My Extension Name",
  "target": "body",
  "javascript": "my-extension-script.js",
  "settings": [{
    "type": "color",
    "id": "background_color",
    "label": "Background Color",
    "default": "#FFFFFF" 
  }]
}
{% endschema %}

I will get a color picker in the theme editor section where you manage your extension's settings from the user perspective.

Right above that schema bit I just put the code below. Not sure if it is sane, like I said, just discovering this whole eco-system, but it works.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  window.MySettings = {{ block.settings | json }};
});
</script>

Ironically Shopify's code editor here does not have liquid, so hope it comes out right.

But yeah, now you will have window.MySettings available to you, which is a javascript object representation of your settings.

This could be a wrong approach though, just saying.