How Bubble manages the window object of the HTML document

Need help Plugins
1

Hi,
I have started since few time to learn how to build plugins for Bubble.
After having read the official documentation, since it was not clear to me how to move on, I decided to look through the code of an existing plugin, in order to see if I could get a better understanding.
As my current goal is that to build a plugin to integrate Google Maps in Bubble (I have looked for some existing plugin that did what i needed but I can’t find it and, anyway I have the willingness to learn how to build them) I have looked through the code of the Google Maps Extended plugin by “The Upstarters” team.
In the element tab, in the header section, they add a script with some functions which refer to some HTML document window object properties/methods.
In particular, to check if the page has finished to load the application they check:

  • window.appquery and window.app as well;

Then, in order to check if Google Maps API have been already loaded and if the API keys are set, they use:

  • window.app.settings.client_safe.general_keys.google_map_key as well as window.gm_key.

So, in my understanding, these window object properties/methods (window.appquery should be a function if I am not wrong) are added by Bubble during the building phase of the app page.
But I don’t know and can’t figure out what they are for, when Bubble adds them and if there are other props/methods that Bubble adds/edits/deletes to the HTML window object or to other elements of the HTML document.
At this point, I would like to ask if someone maybe knows and is willing to share which properties/methods, in general, Bubble adds to the HTML window object (and to other HTML document elements, if any) and what they are there for. Or alternatively, if there is some resource on this topic (I couldn’t find anywhere) that can be shared. Thank you very much!

2

anything that bubble adds to the window object is undocumented because is used by the bubble code running on the page.
You can fiddle with it but you need to consider bubble can change it without warnings because you are not supposed to use it.
Therefore if you plan to use it you need to consider that you will probably need more maintenance in unexpected times at some point.

Anything that is officially available for plugins is documented in the plugin editor.
You are better off using that, expecially if you are starting with building plugins.

1 Like
3

Hi @dorilama,

thank you very much for your reply.
I think your point of view is correct, anyway it would be interesting at least to understand/know how/where Bubble uses those Google Maps API keys that a user fills in the setting tab, as these api are integrated in the platform. So I hoped to be able to take advantage of the api that Bubble loads by itself before making another request; this is what I suppose is done in the Google Maps Extended plugin as well

4

You use the keys that the user fills in the settings tab of your plugin, they are available under context.keys.
I see what the code is doing in the plugin you mention.
Instead of taking the general keys ask for the keys in your plugin, it’s safer for maintenance (bubble can change where they store the general keys without notice), and to the user of the plugin is just one more copy/paste of credentials
You may want to start by doing everyting in the normal initialize function where the keys are available, then see if you want to go with a different route.

Like they say “make it work, make it right, make it fast”

Cheers

Mariano

1 Like