Tealium Tools - JS in Extension Window

Bronze Contributor
Bronze Contributor

Hi all,

Is there a way to run scripts in a custom Tealium tool that reference the extension's window object, rather than that of the open page? I'd like to be able to append children to some nodes in the extension's window, but can't figure out how to / if I can reference it. Thanks!

All the best,

Christian

6 REPLIES 6

Tealium Tools - JS in Extension Window

Tealium Employee

Hi Christian, 

Just updating the reply. All communication from the page to the Tool window happens via an Iframe postMessage, so all data has to be passed via the message object from the Tools corresponding js file. Simply read what you need from window in there, and pass it to the Tool via the provided send method.

 

Kind regards,

Kevin

Tealium Tools - JS in Extension Window

Bronze Contributor
Bronze Contributor

Hi @kevin_faurholt  - 

Thank you for the reply! Much appreciated. Given this setup, is there any way to use the message object to:

  • Register custom handlebars helpers? I've tried inline and it looks like it gets stripped.
  • Manipulate the popup dom?

For example, in my message object the script retrieves an object from the page's window, manipulates it, then sends it to the popup. Given the size of this object, I'd like to add some fancy twirl downs for easier navigation, but that would require having my own script running in the popup's sandbox or the ability to register custom helpers.

Let me know if I'm misunderstanding the mechanics or missed something in the docs. Thanks again!

Christian

Tealium Tools - JS in Extension Window

Tealium Employee
Hi Christian,

The Tool window is completely rebuilt from bottom-up for every call you do from the JS main file to tealiumTools.send ({.. : .. }) which is why you will need to detach and re-attach e.g. jQuery callback listeners again if you put inline code within the Tools windows' HTML.

I would not recommend trying extending handlebars, rather, you are probably much better off utilizing the provided Bootstrap (3) framework and use jQuery for the eye candy stuff to get the job done with the least amount of effort required. Your time is better spent elsewhere than fighting with the internal loading mechanisms of the Tool infrastructure itself (been there, done that).

Kind regards,
Kevin

Tealium Tools - JS in Extension Window

Tealium Employee
And to add, yes - you can put in script tags <script></script> and put inline code in there, to manipulate the Tools DOM. Just keep in mind the DOM is re-written for every send call.

Tealium Tools - JS in Extension Window

Bronze Contributor
Bronze Contributor

@kevin_faurholt thank you so much for the thorough reply. Some of those tidbits would be great for the docs. Much appreciated!

Tealium Tools - JS in Extension Window

Tealium Employee
Hi Christian,

you are very welcome. Glad I could help. Have a great day.

Kind regards,
Kevin
Public