Safari extension problems

Edit Subject

Hello Asher:

Your extension is trying to add a button to the browser which, I'm afraid, isn't currently supported in Safari (appAPI.browserAction.onClick()). One of the side effects of this, as you have experienced, is that your extension code isn't loaded.

A possible work around is to use appAPI.platform to detect the browser, and then either gracefully handle the situation or provide an alternative mechanism for interacting with your users (e.g. appAPI.contextMenu or using jQuery to inject a button to the page).

As an aside, I notice that in your extension.js file you define the jQuery $ variable (var $ = myJQuery;). Just in case you aren't aware, the $ variable is now natively available in appAPI.ready().

Thanks, it works now partially in production id=4852
Thus I need to debug but the staging extension does not work at all
The download is dated from Oct 25th which is weird since I changed the staging a few times today, also I still have problems with the save base url in the debug page.
Can you have a look
Thanks
Asher Szmulewicz

Please try changing the staging extension description (under Settings) and then save.
Once saved, make sure the extension ins't installed on the browser, download a fresh copy of the extension, and then try installing again.

Hi Shlomo,
I did what you said, but I still cannot debug and the staging extension is not working at all. The download is dated from yesterday 16:45 which is after my changes in the staging settings. I am able to get to the step
debug mode is ready to use on your Crossrider App although the debug button is on but greyed out and the localhost url disappeared from the edit box
What do you advice
Thanks
Asher Szmulewicz

Hello Asher:

If I understand the situation correctly, you now have an up to date staging extension which you are trying to debug using Debug Mode, but you are unable to get Debug Mode to work.

Have you used Debug Mode before? If not, here's a brief recap of the requirements:
1. Follow the Debug Mode wizard (installing the extension and downloading the package per instruction).
2. Set up a web server (local or otherwise) to host the files in the package you downloaded.
3. Specify the full URL inc the protocol (e.g. http://example.com/myextension) to the hosted files from the package in the provided and then click Save Base Url.

Hi Shlomo,
I extensively used the debug mode on Chrome, Firefox and IE. Right now I added an alert at the beginning of the extension.js
I can see this alert in Chrome, Firefox and IE which are in debug mode
On Safari I don't see the alert when reloading the page
The following image is my debug mode page in Safari

Hello Asher:

I can see that the alert is in a message.addListener() callback function.
Where is the message being sent from?

Hi Shlomo
This code is not use
I commented it out completely now, save the staging code
uninstalled and reinstalled the extension on safari, reset the debug mode
still with no result (unable to see an alert at beginning of code) which I see in all other browsers
also the date of the extension file downloaded is Oct 30 at 4:45PM and not today's date. Did it take into account the changes I did a few minutes ago? (commenting out this unused addListener)
I am lost
Asher

Hello Asher:

In extension.js, I can see that you've commented out the addListener code, but I can't see an alert. Where exactly is the code with the alert?

In the meantime, let's verify that extensions can run correctly on your Safari installation. Please try this extension which simply requests a page and displays an alert. I've tested it on Safari and it works correctly. In case your interested, the code for it is:

appAPI.ready(function($) {
appAPI.request.get(
"http://google.com",
function(response, headers) {
// Display the response
alert('Response: ' + response);

// Stringify and display the response headers
var headersAsString = '';
for (var x in headers) {
headersAsString += '\r\n' + x + ': ' + headers[x];
}
alert('Response Headers:' + headersAsString);
},
function() {
alert("Failed to retrieve content.");
});
});

Hi Shlomo
I tried to install your extension.
First I got a message saying this browser is not supported
I have Safari 6.0.1 on Mac Mountain Lion
I noticed an error on the page about Adobe Flash Player Plugin
I installed Adobe Flash Player then I could install your extension, which gives a very long alert (Next time cut the text in the alert to first 200 chars otherwise there is no visible way to close it)
I tried again to set the debug for my extension but still it does not work although I thought that the new Adobe Plugin would do it
I tried to set up the debug for your test id 19107 without success (see the screenshot below, pay attention that the Safari Icon is missing )
The alert I was speaking of is on my localhost. I am now putting it on extension.js so you will see it.

Hello Asher:

I delved a little deeper into your code, and whilst debugging in Chrome using various log messages to determine where and if the code was failing, I discovered that the extension suddenly stops after appAPI.resources.includeJS('js/jquery.kh.js'); and never reaches the next log message.

We've already proven in our previous step that the alert works in Safari and so can eliminate a problem with extensions running on Safari. Thus, I believe issue is due to an error condition thrown by the above mentioned resource that is preventing the extension from loading correctly and displaying the alert you are expecting.

I suggest that your next steps are to try debugging in Debug Mode paying particular attention to the js/jquery.kh.js resource.

Let me know if I can be of any further assistance.

Hi Shlomo,
My REAL problem is that the debug mode does not work for me in safari, even with your simple app. I follow all the steps in the debug page, I am saving the debug url and I get the screenshot I already sent you. On my server I change the alert to alert('Response test Headers:' + headersAsString);
but I never see the word test. This works for me on Chrome and Firefox
I am running Safari Version 6.0.1 (8536.26.14) on Mountain Lion
Once I will be able to debug, I will be able to figure what is the problem with my extension in Safari. By the way my code works in Safari when loaded directly in a test page (not through extension)
Thank you for your help

Hello Asher:

Currently, Debug Mode does not support Safari, however, you can use Safari's developer tools.
(To enable the developer menu, open Safari Preferences, click Advanced, and then select "Show Develop menu in menu bar", and then close Safari Preferences. To access the developer tools, in the main Safari window, type ALT, and then from the Develop menu at the top, select the tool you require. For more information, see http://www.apple.com/safari/features....).

This morning I installed the latest version of your extension on Safari, and it appears you have made some progress as I can see the following alerts:





Then, using the developer tools, I checked the console and I can see the following error:



I hope this helps in your debugging efforts, and let me know if I can be of any further assistance.

Is Debug mode still not supported in Safari? I am having trouble getting it started.. When I enter my local URL in the "Local Development Base URL" box, and click "Save Base URL", the spinner inside the "Save Base URL" button spins forever. I have tried this multiple times.

Hello Bryan:

Apologies for the inconvenience at this time. Safari support on the Crossrider platform still being quite new. We are currently working hard to implement the existing APIs on Safari and with Debug Mode in the pipeline as well.

In the meantime, please use the Safari Developer tools as mentioned in the previous post. You can keep periodically review the Change Log to keep up with our latest progress.

I'm having a problem which is only happening in Safari. And I'd really like to use debug mode in Safari, but am not having much luck. Is debug mode in Safari officially supported at this time, or not? Crossrider.com seems to allow me to go into Safari debug mode for my extension, but it bombs fairly early with this:

TypeError: 'undefined' is not an object (evaluating 'u(z.panels.debugActivateBrowser).addClass("debug_"+L).attr("browser",L).find')

By the way - I have downloaded the safari extension, unpacked it, and manually added it with the safari Extension Builder screen. I can't figure out where my code is though, since background.js and extension.js are size of 1 byte. And as I said, the main "Debug" screen of crossrider.com, seems to not work so well on Safari unless I'm doing something wrong.

To be perfectly clear my objective is: 1) be able to watch console output from background and extension.js, and 2) edit code, save, and reload, with minimal effort. In Safari.

Hello Bryan,

Currently we do not support Debug Mode for Safari. Hence, the best way to debug Safari extensions is to use console logs. For more information, see How to view console messages.

Shlomo,

In that case -- what is the shortest repeatable set of steps to reloading extension changes in Safari, such that one can watch the console logs?

Is it:

1) make the edits online, in Staging mode
2) delete the extension from safari
3) re-download the extension
4) re-expand it
5) re-add it to the Extension Builder in Safari

?

Thank you.

Hello Bryan,

I got my wires crossed and according to the dev team Debug Mode should work with Safari as well (apologies for the confusion).

However, the preferred method to work with debugging Safari is to use staging mode via the IDE. When the changes are saved they are pushed to Safari automatically. To use this feature, from the Edit Code page, install the extension, and once installed refresh the Edit Code page (the Install Staging Extn button should disappear).

Let me know if there are any further issues.