Pop-up Scope to contain current tab URL on open - crossrider

I've been using Crossrider's great API for some time now, however I have reached a great block in my progress.
I have been able to message the popup scope with the current domain through the tab change interrupts and the change of url interrupts. However, when I click the popup browser button, data about the current tab URL is supposed to be shown. Instead, such data is black, and when debugging - it was found that the reason for it being blank is either:
The current URL is being set to the popup extension internal URL
Some sort of bug with the popup logic
I am really stumped, and require such functionality to progress further. My Crossrider ID is 52909.
Thanks!

First and foremost, when posting questions to this forum please include code snippets for the benefit of others so that they can try an assist you. As-is they have no access to the extension code you provided.
Looking at your popup.html code, I can see that you are using the following Crossrider API methods that are not supported in the popup scope: appAPI.resources.includeJS, appAPI.webRequest.onRequest. For more information about API supported in the popup scope, see appAPI.browserAction.setPopup.
As alternatives/workarounds:
For appAPI.resources.includeJS, you can use the jquery to load resources scripts, as follows: $.globalEval(appAPI.resources.get('script.js'));
For appAPI.webRequest.onRequest, implement it in the background scope and use messaging to pass the data to the popup scope, something like:
background.js:
appAPI.ready(fucntion($) {
appAPI.webRequest.onRequest.addListener(function(details, opaqueData) {
appAPI.message.toPopup(details);
}, []);
});
crossriderMain in popup.html:
function crossriderMain($) {
appAPI.message.addListener(function(details) {
// Do something with the details from webRequest
});
}
[Disclosure: I am a Crossrider employee]

Related

Fiori launchpad: handle logout event with custom backend call without `attachLogoutEvent` (UI5 < 1.81)

So, I found that the launchpad Container API provides an option to register a logout event with returning a promise (https://ui5.sap.com/#/api/sap.ushell.services.Container%23methods/attachLogoutEvent).
Unfortunately, after the implementation I found out that the UI5 version must be 1.81 or higher for parameter bAsync to work. In my project, we're at 1.78, so no promises for me.
What's the problem?
I want to make a backend call in the said logout event. This doesn't work, since, as far as I understood my debugging, the launchpad destroys everything just after my logout event has "finished" (= every line of code in the event has been gone through, ignoring sub-functions). Timeouts etc. don't work, because their calls would also be after code progressing has already finished, meaning the calls are deleted.
What have I tried?
Instant backend call without sub-functions → didn't work for the same reason as above.
Infinite while-looping until the backend call is processed → stack overflow.
While-looping with timeout/await → await not allowed in strict mode, timeout didn't work because of the above issue.
What do I think might work?
Stall code progression until the backend call has been finished.
Using a completely different method to get my logic into handling the logout (e.g. full custom logout).
Ask here for further ideas.
Does anyone have an idea on how to solve the issue with UI5 1.78?
Alright, I have found a solution to this. It's probably not the technically nicest, but it works and the result looks clean enough. This is from a S4/HANA system, so it might not be a universal solution (e.g. it doesn't consider logging off within the left-side pane which doesn't exist in my launchpad).
What did I do?
Instead of attaching my individual logic to the Fiori logout-event, I created a custom logout button with my individual logic, followed by calling the SICF logout node.
How did I do it?
Create a Launchpad plugin
In Component.js, add a new header item with custom logout function
// ushellLib required from "sap/ushell/library"
var oRenderer = ushellLib.Container.getRenderer("fiori2");
oRenderer.addHeaderEndItem("sap.ushell.ui.shell.ShellHeadItem", {
id: "logoutButton",
icon: "sap-icon://log",
// ...
press: [this._logout, this],
}, true, false);
_logout: function() {
this._callMyStuff();
window.location.href = "/sap/public/bc/icf/logoff";
},
In style.css, hide the original logout button (logoutBtn) in desktop (__list0...) and mobile (__list1...) to prevent skipping my logic by logging off via default logout.
#__list0-7-logoutBtn {
display: none;
}
#__list1-7-logoutBtn {
display: none;
}

add a remote JS to a crossrider extension

I am working on crossrider to make an extension that needs to add two remote JS to all pages loaded using https protocole. one script should come before and the other one should be loaded after . I tried to follow the docs provided in crossrider website but all my attempts failed. Can you please help me to finish this.
This is what U tried to do
appAPI.ready(function($) {
src="http://code.jquery.com/jquery-1.10.1.min.js" />
appAPI.dom.addRemoteJS({
url: "http://code.jquery.com/jquery-1.10.1.min.js",
additionalAttributes: {charset: "UTF-8"},
callback: function(ref) {
appAPI.dom.addRemoteJS({
url: "http://domain.com/script.js"
});
}
});
});
In general, the snippet is correct and conforms to the example provided in the Crossrider docs.
Upon testing your specific script URL (that you provided elsewhere for privacy reasons) I can see in the console that that there is an error in the second script called in the callback function, i.e. the script.js in the example snippet you provided. Once you fix this error, you can proceed to complete your extension.
[Disclaimer: I am a Crossrider employee]

GWT dynamic data in new browser window at client side

I've got GWT module where I do some stuff and I have search results - doesn't matter in which form. Now after searching, and clicking on for example "Export to HTML" button,I would like to create new html page (for example from client side code by creating simple string which contains only listed results of searching list of results ) and open it in new browser window. I know that there is Window.open(...) method, but there I must specify url which i don't have. I want to create this new html page by client side - without server inference (I don't want to create some resource on server side and then paste url to this resource to client side). Is there any possibility to achieve this? If there is no option, other method which would satisfy me, is to open standard dialog box for saving, which will allow to save results in a html file.
Thanks for helps.
Kind regards.
Here's the code I use to print:
native void openPrintWindow(String contents) /*-{
var printWindow = window.open("", "PrintWin");
if (printWindow && printWindow.top) {
printWindow.document.write(contents);
printWindow.print();
printWindow.close();
} else {
alert("The print feature works by opening a popup window, but our popup window was blocked by your browser. If you can disable the blocker temporarily, you'll be able to print here. Sorry!");
}
}-*/;
Seems like you could adapt it for your purposes with some simple rewording and by removing the call to print()! The contents variable just holds flat HTML. There are no trips to the server.
openPrintWindow("<h1>Search Results</h1><ol><li>etc...");
The method of opening new window from client js which allows user to save that generated content from browser's save as menu is data:url scheme, content written to opened page via println usualy not saved. But data:url works only in morden browsers. And the content written should be quite small to fit browser's url length resteiction.
See example from this article http://en.wikipedia.org/wiki/Data_URI_scheme#JavaScript

Google Search autocomplete API?

Does Google provide API access to autocomplete for search like on the actual site? I have not been able to find anything.
I would like to use Google's autocomplete logic for web search on my own site which relies on Google's search API.
The new url is:
http://suggestqueries.google.com/complete/search?client=firefox&q=YOURQUERY
the client part is required; I did't test other clients.
[EDIT]
If you want the callback use this:
http://suggestqueries.google.com/complete/search?client=chrome&q=YOURQUERY&callback=callback
As #Quandary found out; the callback does not work with client "firefox".
[EDIT2]
As indicated by # user2067021 this api will stop working as of 10-08-2015: Update on the Autocomplete API
First, go to google, click Settings (bottom right corner), change Search Settings to "never show instant results. That way, you'll get regular autocomplete instead of a full page of instant results.
After your settings are saved, go back to the Google main home page. Open your browser's developer tools and go to the Network tab. If you're in Firefox, you might have to reload the page.
Type a letter in the search box. A new line should appear in the Network window you just opened. That line is showing where the autocomplete data came from. Copy that url. It should look something like this:
https://www.google.com/complete/search?client=hp&hl=en&sugexp=msedr&gs_rn=62&gs_ri=hp&cp=1&gs_id=9c&q=a&xhr=t&callback=hello
You'll notice your search term right after the part that says q=.
Add &callback=myAmazingFunction to the end of the url. You may replace myAmazingFunction with whatever you want to name your function that will handle the data.
Here's an example of the code required to show the autocomplete data for the search term "a".
<div id="output"></div>
<script>
/* this function shows the raw data */
function myAmazingFunction(data){
document.getElementById('output').innerHTML = data;
}
</script>
<script src="https://www.google.com/complete/search?client=hp&hl=en&sugexp=msedr&gs_rn=62&gs_ri=hp&cp=1&gs_id=9c&q=a&xhr=t&callback=hello&callback=myAmazingFunction"></script>
Now that you know how to get the data, the next step is to automatically change that last script (the one with the autocomplete url). The basic procedure is: each time the user types something in the search box (onkeyup) replace the search term (q=whatever) in the url, and then append to the body a script with that url. Remove the previous script so that the body doesn't get cluttered.
For more info, see http://simplestepscode.com/autocomplete-data-tutorial/
Most of the above mentioned methods works for me, specifically the following serves my purpose.
http://suggestqueries.google.com/complete/search?client=firefox&q=YOURQUERY
Being a newbie in web programming, I'm not much aware of the "Callback" functionality and the format of the file returned by query. I'm little aware of AJAX and JSON.
Could someone provide more details about the format of file returned by the query.
Thanks.
Hi I don't know if this answer is relevant for you anymore or not but google returns JSON data through following get request (although this isn't an official API but many toolbars are using this API so there's no reason why google might discontinue it):
http://google.com/complete/search?q=<Your keywords here>&hl=en
You should use AutocompleteService and pass that text box value into the service.getPlacePredictions function. It send the data in callback function.
let service = new google.maps.places.AutocompleteService();
let displaySuggestions = function(predictions, status) {
}
service.getPlacePredictions({
input: value
}, displaySuggestions);
Base: https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteService.getPlacePredictions
example: https://dzone.com/articles/implement-and-optimize-autocomplete-with-google-pl
I'm using (( Edrra.com )) API that have google search and suggestions that works with both GET & POST:
Google suggestions:
https://edrra.com/v1/api.php?c=google&f=suggest&k=YOUR_API_KEY&v=YOUR_SEARCH
Google search:
https://edrra.com/v1/api.php?c=google&f=search&k=YOUR_API_KEY&v=YOUR_SEARCH
and more...
What are you trying to use an auto-complete for? More information would help narrow it down.
As far as I know, google does not provide one, but they do exist like jQuery UI's auto-complete.
EDIT:
If you are using their custom search API view here for autocomplete.

Greasemonkey script not executed when unusual content loading is being used

I'm trying to write a Greasemonkey script for Facebook and having some trouble with the funky page/content loading that they do (I don't quite understand this - a lot of the links are actually just changing the GET, but I think they do some kind of server redirect to make the URL look the same to the browser too?). Essentially the only test required is putting a GM_log() on its own in the script. If you click around Facebook, even with facebook.com/* as the pattern, it is often not executed. Is there anything I can do, or is the idea of a "page load" fixed in Greasemonkey, and FB is "tricking" it into not running by using a single URL?
If I try to do some basic content manipulation like this:
GM.log("starting");
var GM_FB=new Object;
GM_FB.birthdays = document.evaluate("//div[#class='UIUpcoming_Item']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (i = GM_FB.birthdays.snapshotLength - 1; i >= 0; i--) {
if (GM_FB.birthdayRegex.test(GM_FB.birthdays.snapshotItem(i).innerHTML)) {
GM_FB.birthdays.snapshotItem(i).setAttribute('style','font-weight: bold; background: #fffe88');
}
}
The result is that sometimes only a manual page refresh will make it work. Pulling up the Firebug console and forcing the code to run works fine. Note that this isn't due to late loading of certain parts of the DOM: I have adding some code later to wait for the relevant elements and, crucially, the message never gets logged for certain transitions. For example, when I switch from Messages to News Feed and back.
Aren't they using ajax to load content in a div? You can find the element which is being updated by using Firebug for example.
When you click something and the URL changes, but with a # on the URL and after this some text, it means the text is not a path, it's a parameter, the browser won't change the page you are, so since GreaseMonkey inject the script on the page loads it won't inject again, because the page is not reloading.
As in your example the URL facebook.com/#!/sk=messages is not navigating away from facebook.com/ it will not fire window.load event.
So you need to find which element is being changed and add an event listener to that element, you can do is using Firebug as I mentioned before.
After you find out what element is getting the content, you have to add an event listener to that element and not the page (GreaseMonkey adds only on the window load event).
So in you GM script you would have ("air code")
document.getElement('dynamic_div').addEvent('load', /*your script*/);