Bubble Based Chrome Extension - Get current URL

[vladlarin]

Hello Community!

I’ll probably be asking for suggestion for people that know good JS.

I’m trying to build a Google Chrome extension using this awesome application described here:

Convert Bubble App to Windows/Linux/Mac/Chrome application or Chrome pop-up Plugin

I was looking for a way to easily create a Chrome extension for certain function of my app and found this. https://mikethedj4.github.io/WebDGap/ Convert any website to a native Windows/Linux/Mac/Chrome application. Super cool and easy to use. I’m using this to “install” a version of my app. Make sure you tweak your app version so it doesn’t feel like a website opened in a wrapper. (which is exactly what it is.) Hope someone enjoys this or finds it useful. Uploaded an example of the ToDo app…

It actually works and I very much suggest everyone to give it a try - that’s another level and another application for Bubble apps.

Anyways, to my question - the logic of my application is based on the URL that user is on currently in his (chrome) browser.
“This url” function of Bubble in this case is not helping, as the application is running on it’s default webserver URL, so this does not change.

What I need is to get this data from Chrome browser API (get current tab URL)
I skimmed trough the stackoverflow for the answers, and I’m guessing that I’ve even found them, but currently can’t get my head around they way to implement this in Bubble (more like - whatever I tried so far did not work)

Display current URL in a chrome extension

How can I get the URL of the current tab from a Google Chrome extension?

I guess that someone with a decent Javascript knowledge would easily crack this one.
Any advices and suggestions, please?

To sum up - I need to get a string of current user URL from chrome API that I am able to play around in the bubble app logic.

Thanks a lot guys!

[vladlarin]

I would imagine someone like @gurun solving this in a second, literally

[DaveA]

I used this functionality in a chrome extension to determine what type of templated item data to submit to a form, it used the current url to determine where a user was on the website and therefore which template to use;

The full write up is in the article location below;

Google Chrome Extension - CodeProject Template Items

In summary though, first step is to get the current selected tab and then I passed this into another function;

function buttonSelect_Click() {
//Get the current window and then the current tab of that window
//This should relate to the page on which to do the injection
chrome.windows.getCurrent(function (theWindow) {
chrome.tabs.getSelected(theWindow.id, function (theTab) {
injectToTab(theTab) });
});

The function would then take the tab object and pull out the url parameters and do some checks to find out where it was in site;

function injectToTab(tab) {
//Build Valid Content for remote execution
var templateItem = parseInt($("#selectTemplates option:selected").val());
var subject = templateStore[templateItem].Subject;
var body = templateStore[templateItem].Body;

    // Check if the address contains the Message Editor URL;
    if (tab.url.indexOf(".codeproject.com/script/Forums/Edit.aspx?") > -1) {
        
        //Append the subject
        chrome.tabs.executeScript(tab.id, { code:
            "document.getElementById('ctl00_MC_Subject').value += 
				unescape('" + escape(subject) + "');"
        });
        
        //Append the body
        chrome.tabs.executeScript(tab.id, { code:
            "document.getElementById('ctl00_MC_ContentText_MessageText').value += 
				unescape('" + escape(body) + "');"
        });
    }

    // Check if the address contains the Question URL;
    if (tab.url.indexOf(".codeproject.com/Questions/") > -1) {
        //Append the answer
        chrome.tabs.executeScript(tab.id, { code:
            "document.getElementById
		('ctl00_ctl00_MC_AMC_PostEntryObj_Content_MessageText').value += 
		unescape('" + escape(body) + "');"
        });
    }
}

[vladlarin]

Thank you Dave!
But I’m afraid It’s still not clear to me how would I get the url string to play around with in Bubble, sorry.

Could you please point me to it in more of a “Bubble” way?

Thanks a lot

[1danielbaker]

Where do you get the contents of your application to .zip (mentioned in the beginning of the video toturial)? Is this something you requested from bubble directly?

[vladlarin]

Here.

[vladlarin]

Bump

[DaveA]

Sorry, I haven’t had much thought around this in relation to bubble, but the key would be to get a script to run on a page load event, or manually fired. I guess you would have to write an element plug-in or to do it at the page script level. You would have to get the returned function value into a known location, either a named element or an accessible variable.

[vladlarin]

I have a clear idea of how this can be done, but I’m just missing the definite way to retrieve the URL value.

<script type="text/javascript">
if ("dynamic_value_to_run_this" === "yes") {
  var seen = "yes";
  $('.bubble-element .Input[placeholder="read"]').val(seen).change();
}
</script>

I want to put the URL to Input Bubble Element, and then read it from there using the Bubble Logic.
Would you be able to suggest how to figure out a way to get the value to Bubble Input element, please?

[DaveA]

The functions you need are in the code I pasted.

Basically all you need is;

chrome.windows.getCurrent(function (theWindow) {
chrome.tabs.getSelected(theWindow.id, function (theTab) {
variable_to_hold_the_tab_url = theTab.url
});
});

You can always check out the apis for the chrome extension functions at;
https://developer.chrome.com/extensions/devguide

[gurun]

@vladlarin Hey. It seems @DaveA figured it out. Just put a JS/Jquery listener to wait for a change on that new variable “variable_to_hold_the_tab_url” and onChange you run a function to change the bubble input field like you wrote earlier in this thread.

[vladlarin]

Thanks guys.

I could really make something out of it if I knew a bit of JS but I don’t, so this will be a long try and error for me even with all your inputs.

I was hoping that I could get all the variables to the JS gurus in this thread and get a final code snippet as a result, to be frank with you

[DaveA]

Maybe use this as a starting point to getting your head round JS!

[DaveA]

There is also a difference between Chrome Extensions and Chrome Applications, so you need to be clear on which it is you are going for.

In your opening message you clearly say Chrome Extension, the link you provided makes Chrome Applications.

Chrome extensions are a whole different animal, they need manifests files, signing and deploying from the Chrome Extension webstore.

See the link below for a break down on their differences.

https://developer.chrome.com/webstore/apps_vs_extensions

[vladlarin]

Thanks Dave.

I"m pretty sure it’s an extension though, and the application linked does provide this option, skipping all the hassle with the manifests (meaning - creating them for you).

[DaveA]

Yes, that’s an extension, I haven’t used the app that does this for you, so wasn’t aware of its capabilities.

When I previously created two extensions, I have done everything by hand.

I edited and put a link in the previous message so you can see what the difference is between the two.

[vladlarin]

Okay, I’m trying, but I’m obviously doing something wrong with the syntax, and I don’t see how to get around this

I would love to get the JS to my skill set, but I don’t see what exactly I should research to get this right.

Any suggestions to get this correct, please?

<script type="text/javascript">
chrome.windows.getCurrent(function (theWindow) {
chrome.tabs.getSelected(theWindow.id, function (theTab))
var taburl = theTab.url;
  $('.bubble-element .Input').val(taburl).change();
}
</script>

[DaveA]

As part of your development, you can put console messages into the functions and check where things are.

e.g. console.log(taburl);
and then open the dev console on your browser. (F12)

You also look like you have a syntax error because you haven’t closed the functions correctly. Have a look at my code and you will see you are missing a few )}; statements.

You should always have matching pairs of () and {} brackets.

[mikethedj4]

Hello everyone WebDGap developer here. I just wanted to share WebDGapJS. It’s a simple JS Plugin (more like a function) that makes it easy to export any website as a cross-platform desktop app using just 1 line of code. Which should make it significantly easier for you to achieve what you want. (Just released the plugin at the time of reply too on 5/4/2017)

The plugin is simple. You set the operating system for exportation, application name, logo’s url, and application’s url and WebDGap will do the rest.

Here’s an example of how to call it.

webdgap("chrome", "WebDGap", "https://mikethedj4.github.io/WebDGap/assets/images/icon.svg", "https://mikethedj4.github.io/WebDGap/");

Operating system exportation only accepts 7 values, “win”, “win32”, “mac”, “lin”, “lin32”, “chrome”, and “chromeext”. If it doesn’t you’ll be presented with an error.

[mikethedj4]

I like the idea so I decided to make WebDGap a Google Chrome extension so as of 5/6/2017 I made and published it into the Chrome Web Store: https://chrome.google.com/webstore/detail/webdgap/odpmjbmeopdfhcikkhpeaemfbmghpobk.

I don’t use any other browser so I’m not familiar with how Firefox or other browsers handle their own extensions or whatever they may call them. So I released the source code for WebDGap’s chrome extension via Github. Thus others can help make WebDGap available for other browser extensions or whatever they may call them. Enjoy! - https://github.com/mikethedj4/WebDGap/tree/chrome-extension