🌐 Browser Extended extension 0.1

I’m happy to announce the first frontend App Connect custom component release. This is just a small example that shows how to extend a core App Connect component.

This one extends the core browser component released by Wappler team and adds a reload method based on this feature request.

There is one caveat at the moment. It’s not suitable for those that rely heavily on the UI as there is no UI support for now. You need to use it in code view.

There are two approaches to use this extension.

  1. You can fully replace Wappler’s browser component with this one and use all the methods via code view
  2. Or you can use both components and use the UI for Wappler’s browser component and code view just for this custom component.

How to use it?

Download the file from the repository releases, add it to your project folder and call it in your script tag after the core browser js file. This is needed because this custom component just extends functionality.

The defer attribute is mandatory. It won’t work without it.

<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="/path/to/jonlBrowserExtended.js" defer=""></script>

Add the component/s to your body depending on what approach you want to take 1) or 2)

<div is="dmx-browser" id="browser"></div> <!-- Optional. Use if using approach 1) -->
<div is="dmx-jonl-browser-extended" id="browserExtended"></div> <!-- Required with 1) and 2) -->

Now you can use browserExtended.reload() method as you would use any other browser method.

<button id="button1" dmx-on:click="browserExtended.reload()">Reload</button>
<button id="button2" dmx-on:click="browserExtended.alert('hello')">Alert</button>
<button id="button3" dmx-on:click="browser.reload()">Reload</button> <!-- Won't work -->
<button id="button4" dmx-on:click="browser.alert('hello')">Alert</button>


Will this release change my life?

Do I need this release?
Most probably not. At least not version 0.1 which only contains the reload method.

Why did you build it?
Because they told me it couldn’t be done.

Nope. I just built it as an exercise to learn how to extend App Connect components and because there was a feature request for the browser.reload() method.
Also it’s my cake day so what better day to do something useless for the community?

Will you continue development?
Yes. Once the team adds UI support and if there is a need I will continue development by adding more methods that might be missing from the core component. Also the community is free to improve it as I do accept pull requests in the public repository.


Many congrats on your cake day. What a great way to celebrate. :smile::cake:


Cake day = = Birthday?
Thank you again for demonstrating your above-the-rest IQ!

I read your posts and bookmark them for testing while I’m re-installing my training wheels.

On my Linode server instance I’ve installed Cloudron & Mastadon (Twitter alternative)
I wanted to learn more about a full-range multiple stack node & React etc App.
On a localhost home computer environment what IDE would you reccommend for the full-stack node, postgre, React, etc on a Mac?

I toyed with dropping it into Wappler but I know its not a compatible fit.

Awesome stuff @jonl. And Happy Birthday!

Really excited to see full support for frontend extensions!

Nope. 2nd anniversary in the community.

Not at all! It’s really easy!

I think Visual Studio Code is the best option. It has extensions for the tech stack you mention.

Remind me to thank you in February! :smiley:

Awesome gif!


This is also available now in the browser component in Wappler :slight_smile:

1 Like

But with less coolness!

I will deprecate this useless piece of crap :joy:



1 Like

Congratulations, @JonL it’s great to see the community coming together to implement this amazing feature of Wappler. :slight_smile:

We could have this automatically with Wappler maybe a tab just for custom extensions.