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:
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)
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.
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;
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) + "');"
});
}
}
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?
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.
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?
@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.
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).
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.
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.
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.
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
