conflicts between javascript code and browser addon/extension - javascript

I am the owner and developer of a e-commerce website.
Every single day some potential customers call us because can not order, we investigate a little bit and inevitably discover he can not because of some js errors.
We check his browser addons/extensions, disable some or all, and the JS errors disappear.
The JS are always different from each other, and the addons/extension vary; it happens with Chrome, IE, Firefox, indifferently. Usually are some sort of coupon/deals addons/extension like DealSpy.
And I don't have any data to support this but I believe these cases had a spike since we moved to angularjs.
I am wondering if there's anything I can do; I can't disable their addons/extension programmatically from my code I guess, but somehow catch those errors and manage them?
Any advice from anyone who faced same or similar issue?

There is likely no way to answer this properly as it depends on the code of your site and the add-ons breaking it, none of which you supply...
Anyway, try to reproduce the error and contact the add-on authors in question.
There might be ways to work around particular issues, but that would be case-by-case and dependent on the actual code.
Also, in case of Firefox add-ons, if you encounter an add-on that just "breaks the web" (or part of it: your website, maybe others), consider filing a Tech Evangelism :: Add-ons bug. Mozilla and/or the add-ons editors team may then take appropriate steps according to the Add-on guidelines.
Not sure if there is something similar for Chrome... Their Help section just says to contact the actual extension author. So unless it is a security sensitive bug, you shouldn't expect any assistance from Google.

Related

Programmatically update firefox profiles

Windows 7 / Firefox Latest versions / Preferrably 64bit beta versions
Whenever a Firefox Profile is updated, the user is presented with a dialog to check for updates to the addons. I would like to interact with tha dialog programmatically so that it is automatically ok-ed.
So far my research has brought me to:
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWindowMediator
For that I need a windowtype to enumerate. The window type correspons to the attribute in the XUL definitions. On my installation of Firefox, these seem to be compressed inside "c:\Program Files\Mozilla Firefox\browser\omni.ja\chrome\browser\content\browser".
I have limited experience of the firefox API. I'm executing code through userchrome.js.
Any pointer would be gladly received.
UPDATE 1 20151125 0748: I believe this is the xul - https://archive.is/NyGBS - any pointer on how to "overlay" it within userchrome.js? I can also try to enumerate windows of windowtype="Addons:Compatibility".
UPDATE 2 20151125 0748: It looks like the extensions update dialog is not showed if I have:
user_pref("xpinstall.signatures.required", false);
Which marks the addon as unsafe but allows you to continue using it.
[Which solves my immediate problem, but I am sure I will have this requirement at another point for another dialog, so would still like to get to the bottom of this]
TL;DR version with info about the problem follows.
I currently have a vbs script that:
Deletes FIREFOX_RUNNING_PROFILE folder.
Copies FIREFOX_BASE_PROFILE folder-> FIREFOX_RUNNING_PROFILE folder.
Runs FIREFOX_RUNNING_PROFILE.
Whenever a firefox update takes place, a number of dialogs need to be confirmed by the user in relation to checking/updating extensions.
The outcome of this process will not stick to the profile as obviously given my setup the RUNNING_PROFILE is recreated every time.
Note that for the purposes of this discussion it doesn't matter whether the udpate is performed automatically. I have the ability to rewrite the prefs.js so i can change behaviour dynamically just by doing that and restarting the browser externally - it's vbs right now but I'm ready to move over to something else if I hit some limitations with process / window management, or I want this to be portable (e.g. python). Note these are not dealbreakers right now and I'd be happy for a reasaonbly sleek windows-only solution.
I have a few of this BASE_PROFILES, hence I would like to handle the updates programmatically.
I have not found a way of achieving this that does not involve interacting with the dialogs firefox presents in the GUI. And I have noticed that the dialogs popping up after each update can change.
Options:
1) userchrome.js -> I already use this to manage some imacros autostart features, including grabbing the profile name from Components.Interfaces. I am reporting snippets below to help the reader understand what is the most sophisticated snippet I've written against the Mozilla xpcom components:
var strProfileFilePath=Components.classes["#mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsIFile).path;
I have had a look at the documentation and it looks rather impressive. It feels like it will let me do pretty much everything, so my next move here would be to undersrtand how to enumerate dialogs and somehow select the right one based on some properties, then push the "ok" button. I think that's pretty much all I need to do.
2) Autohotkey. I can try and send keys to the firefox window (not sure about the exact dialog inside the window). The dialogs normally have shortcuts that would respond to those to this keysends (nice theory). In autohotkey I can also "position-click", although it is less desirable for obvious reasons.
3) One of the avenues through Autohotkey involves using the MozRepl Firefox addon behind the scenes. Library discussed here https://archive.is/73u4f, github seems out of date https://github.com/arbiter34/FF-Control. I could then use mozrepl directly, no need for Autohotkey. I would rather code in python, java, or even javascript, powershell, vbs than autohotkey. Ar a first look it looks like it would give me the same power that userchrome.js currently offers.
4) Selenium. There are some profile manipulation capabilities I could exploit - although Selenium was not really designed to interact with Firefox own's dialogs, and I don't see an API to automate that. Rather one would synthesise a profile on the fly, installing on top all the required extensions from a known superprofile (that would contain a superset of all the extensions to be used), and applying whatever mods to prefs.js also dynamically. This sounds a bit ugly for my original requirements but experience has told me that ugly is still better than manual.
5) There is also the option of writing an addon, but again, I think I'ld be interacting with the same interfaces that I can get in userchrome.js (actually I believe userchrome.js is even better as it seems to have unfettered access to the core components, which is exactly what I sense I might need for my case). I would rather avoid having to write an addon, although I might be lost for words trying to explain why exactly.
I appreciate I have not "fully" investigated further, but I am at a point now where I need to elicit the opinion of the community before I start spending substantial time on either of these.
The below isn't strictly required to address the question above, but I feel it might be useful to share this as there must be a few others undergoing the same predicament:
Additional Points:
a. As a general principle, I have zero desire to update anything (firefox.exe, addons, language packs, plugins and what not) (plugins are actually completely disabled). I am ok with the way the system works, and I don't want to change it one millimitre. Yes, NOTHING, not even the security updates. This is because of the particular circumstances of my app, my particular estimation of the particular risks I'm taking, and my general aversion to risk. YMMV. NEVERTHELESS I'm still forced to upgrade whenever (1) I "make a mistake" (all it takes is for one profile to have the update settings wrong for the exe to be updated for all the profiles on the machine - doh! there's only one exe); (2) Firefox is crashing too much / unusable (happened twice); (3) I need functionality offered by the upgrade (hasn't happened); I would also like to reserve the option for the "very critical security updates" (sigh! sometimes even I can bow).
b. The arcane art of keeping your firefox profile integer across updates also involves search engines - it doesn't matter if I say I don't want to update them, whenever there's a firefox.exe update I will get the new standard fluff installed in the program folder. I currently have a way of resetting that by (1) emptying the firefox program subfolder containing the xml files (in %programfiles%\Mozilla...), and (2) deleting search-metadata.json and the searchplugins folder (in the profile folder), then copying them over from a baseline afresh. It all feels very greasy. I have yet to try this on the 64bit version I'm running right now as this is a minor issue and I would rather not introduce more entropy. The firefox search engines mechanism might have changed in the meantime.

Remote Debug Website

Is there a way to remotely debug a website?
I've just finished putting together a website that has some jquery animations. The site works fine on every machine/configuration I've tested it on.
One of the people the site needs to work for, however, reports that the animations don't work; which effectively breaks the website.
I strongly suspect his companies' network is the root of the problem; however diagnosing this is challenging as he is not a technical user and guiding him through the webkit inspector/console, etc. is not really an option.
Ideally I'd like to be able to 'capture' the network/javascript logs from IE or Chrome so that I can inspect them and attempt to work out what's gone wrong.
Aside:
I'm using an off-the-shelf Wordpress theme (http://theme.co/x/) for the site; so I expect the code is good.
While it doesn't seem possible to remotely capture and inspect the network or javascript logs from another machine's browser; there are a number of services that allow you to add automatic error reporting to your javascript code, which you can then inspect to find the root of the problem.
Examples of these are Errorception and Raygun.
As far as I have found, there aren't any similar tools to do so for monitoring network performance / loading specifically- although a similar approach with a custom script to detect if specific items have been loaded could be written.

Why some javascript error only comes in IE not in firefox? how to know where is code creating problem?

Why some javascript error only comes in IE not in firefox? should i solve all IE javascript errors, if my site is working fine with it ?
You should definitely seek to fix any JS errors you are getting in IE. What shows up in your IE as a little yellow icon, will show up in other IE browsers as a popup letting the user know there was an error.
One way you can minimize problems is by using one of the many JavaScript framework/libraries like jQuery, MooTools, etc that seek to minimize browser differences. Then, when you get specific errors, they can often be fixed by added a missing ; or adding an if statement in the correct place.
You should never knowingly leave code unfixed that is known to break in modern browsers.
should i solve all IE javascript
errors, if my site is working fine
with it ?
I'd say, yes absolutely. Under certain circumstances, IE throws Javascript errors right into the user's face with a big fat dialog. I think it's very embarrassing for a visitor (who may not even know what JS is, and even less the intricacies of cross-browser scripting) to get a error message as their first impression of you.
they have slightly different implementations of javascript, dom, css, etc.... should you fix the errors? if no major functionality is impacted, then it would probably be a very low priority... and depending on your userbase (say its a corporate intranet) you could simply say Firefox is your preferred browser. all depends on the requirements. Prioritizing tasks will help ensure the most important objectives are met.
Yes, you should fix the Javascript errors being reported in IE, because it can be unclear how the errors manifest themselves in your application. For instance, it can cause menu navigation to not work, or incorrect behavior of buttons.
As for actually detecting where the problem came from and how to fix it, you can try our Browsera service, which will detect and log the Javascript errors for you that occur in the browser, and use the Script Editor, which comes with MS Office
Or, if you dont have OFfice, use the free Microsoft Script Debugger, which works, but is less powerful.
if you are working with ajax than you can use $.getJason using jQuery, instead you get data from ajax and then use JSON.parse();

Porting a web application to work in IE7

I'm developing a web application that uses lots of Javascript and CSS, both of my own creation and through third-party libraries. These include jQuery and Google Maps & Visualization JS APIs.
I've been testing everything in Firefox 3. Things are peachy until it turns out the main target of this webapp is (cue sad trombone) IE7. I'm looking for caveats, advice, libraries, or other references to help make this transition as easy as possible (not that it's actually going to be easy).
I've already tried IE7.js though it hasn't yet shown itself to be the silver bullet I was hoping for. I'm sure that it works as advertised, I think it's just not as all-encompassing as I'd like (example: colors like #4684EE and #DC3912, which are correctly rendered in FF3, are rendered as black in IE7, with or without IE7.js). Are there other libraries out there to help bring IE7 (more) in line with FF3?
A corollary question: what debugger would you recommend for IE7? I'm currently using Firebug Lite, but it runs painfully slowly. Is there anything out there with similar features that I might have missed?
As far as libraries go, jQuery is compatible across all major browsers, so at least you've got that going for you. Without knowing exactly which plugins/modules/libraries you're using, I can't recommend alternatives that are cross-browser compatible.
You could take a look at the Internet Explorer Developer Toolbar. It isn't nearly as good as Firebug, but it's better than nothing.
Get the IETab add-on for Firefox so that you can fire up IE right inside the same tab you test Firefox in. Get the FULL version of Firebug. It will be perfect for you to deal with HTML, CSS, and scripting. HTMLValidator for validating your HTML and CSS. The Web Developer toolbar is a MUST if you don't have it. I can't even go into a fraction of the benefits it has, from images to source viewing to validating scripts it has a lot.
I use a separate stylesheet for IE7. It doesn't have many changes from the original stylesheet, but enough to make viewing in IE7 close to FF. I try not to do ANYTHING for IE6. In fact I encourage the "downfall" of IE6. It's almost ten years old, and full of bugs, and unsupported now!
Unfortunately, Microsoft doesn't really want to be on the same page as the W3C and developers that want web standards so that you don't have deal with what you're going through right now. Regardless of what they SAY, they're still "competing" against the other browsers for control, and it's hurting the developers.
Writing cross browser code is a big topic - you can't really generalize it into "don't float left and padding-left" statements and be done.
Separate stylesheets for ie are messy and not needed IMO.
Generally speaking, firefox fixes broken code in a good bit of cases, so there is a chance that at least some of your stuff looks bad in IE because of open tags that firefox is fixing for you.
Re-slicing a site that's already done might be your easiest way. You should be able to completely redo the CSS from scratch in a few hours tops.
But all this is advice that may not apply - it would be easier to see the code you're talking about.

Internet Explorer Debug Mode - Is there a quick way to enable/disable it?

I do web site debugging with Internet Explorer (as well as other browsers), but my problem is with Internet Explorer, as it is the browser I usually use for regular browsing.
In order to debug you need to turn on debug mode in the advanced options. OK, fine. It's turned on. But the issue I have, that is quite annoying, is that it seems 30% of websites have JavaScript errors, and Internet Explorer in debug mode causes a popup. This is now also the case with Stack Overflow as well, where I spend a lot of time now. Every time I edit I get a JavaScript error pup up.
I guess it comes down to this: Is there a way to QUICKLY enable and disable debug mode, such as a Hokey, or an add-in, so you don't have to go into Advanced Options to enable and disable?
I should mention I do mainly ASP.NET development and use Visual Studio. I do already use Firefox/Firebug for some scenarios and non Internet Explorer-related issues. I'm not really looking to switch around what I do or how I do it, mainly looking for a solution to the problem at hand. Even a workaround that doesn't involve using other browsers/debuggers.
The quickest way I can think of would be to write a small utility to:
Close all IE windows
Toggle the REG_SZ registry value HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\Disable Script Debugger (from "yes" to "no" or vice versa)
Optionally restart IE
As far as I know, there's no way to make IE recognize the changed registry value without restarting it, even using an IE plugin.
As an aside, unless the IE/VS integration is critical for you, you may want to look into the combination of Firefox and Firebug for Javascript debugging: I find it much nicer in general, and debugging can easily be enabled or disabled, either interactively or on a per-site basis.
I recommend using Firefox + IE Tab, which would allow you to easily and quickly change the rendering engine used for sites that require IE. This way the bulk of your browsing can be done in non-IE tabs and you can avoid the debug popups.
Have a look at debugbar. It's free for personal use, and it has a 60 days trial for commercial. It works a bit like fireug for Firefox, but obviously it's going to cost to use.

Categories

Resources