How to design a browser extension/add-on compatible with multiple browsers - cross-browser

I want to develop an browser extension/add-on which keeps track of the url value in the address bar. The add-on could either be downloaded to local file system or it could be integrated within the browser.
Also, i'm curious to know how browser extensions like Toolyo are programmed. (It's a demo link of the Toolyo tool. Sorry, I didn't find a better example than this whic is much similar to my requirement). Can someone please throw light on the languages/methods used to develop extensions that can work in multiple browsers.
Sorry for a generic (and vague, as well) question. I would really appreciate any answers/suggestions.

The extension APIs for browsers with add-on functionality (Chrome, Firefox, etc.) are all very different and much of the browser-chrome-privileged code must be rewritten for the different browsers. User scripts, are a good alternative add-on architecture, but they only have the privilege level of an in-page script (except for GreaseMonkey in Firefox).

Greasemonkey is inbuild in Chrome
And also had support for Flock, Safari and Opera
And its also coming for IE soon.
So writing Greasemonkey script is also good rather then writing code per browser vendor.

Related

Consistent website rendering across different browsers

I'm making an old website with HTML. I used the reset.css and I can see this perfectly on the web (http://www.ceachile.cl/revista/) with Chrome, Firefox and IE10, but my client can't see some elements properly. I don't know what else can I do to fix this table that is in a wrong place. Here's a folder with a lot of screenshots of the site in many browsers and OS.
Some snapshots of what the website looks like under various browsers can be found here
You have to check with elements of HTML and CSS each of the browsers support. Trident has historically been behind in implementing a lot of newer features. If you aim to support older browser, you have to look at their documentation and write code based on what they can handle.
Take a look at http://msdn.microsoft.com/en-us/library/bb250496(v=vs.85).aspx for ie7.
If you know your client's OS and browser version, you can use a service like www.browserstack.com to test your website in this environment and debug it with the usual developer tools.

Browser Compatibility Upgrade Page for Older Browsers

I have decided not to support older browsers (IE6 & Before) and alternatively providing a page that forces the user to upgrade their browser. The demographic I am targeting are generally technologically savvy and very few users will encounter this page. What I am hoping to do is not support any browsers older than 5 - 6 years. What would be the best way about to achieve this? Would it be better to ONLY eliminate IE6 and below? What about early versions of Firefox, etc.?
You can read the browser version from the User-Agent string passed by the browser. You want to do a RegEx match on it. Depending on how harsh you want to be you could put a big banner at the top of the page with what you have detected their browser to be and a link for them to upgrade.
You should be able to find libraries in your chosen server-side language to do the parsing for you, save the hard work. An ultra-quick Google returned: https://github.com/tobie/ua-parser

Best test Browser for HTML CSS? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am doing a project, which is a website and my plan is to write every html,css,javascript in notepad++, checking everything in google chrome all the time and when i am finished I will test from the start with IE (which is the most difficult) and the other known browsers and I will correct any issues (with the known methods).
My question is this: Which do you think is the best browser for this work? Which is most compatible with the others, so I won't have to do much work after finish my website on this and correct it for the others? In a few words, which browser is most cross borwser testing material?
Thank you in advance.
I would sudgest using Mozilla Firefox for playing with HTML / CSS.
One great thing it has is the FIREBUG add-on, which can be more tnah usefull while building your website. Check it out on https://addons.mozilla.org/en-US/firefox/addon/firebug/
You're doing it wrong - it's far easier to fix cross-browser issues as they occur, rather than have to tear through a complex project for a minor issue.
IE6 and IE7 can be safely discounted - as no-one uses them anymore. IE8 is the latest first-party browser for Windows XP and should be tested - it doesn't have any layout bugs, but doesn't support many CSS3 features like rounded-corners - so you might want a fallback stylesheet.
Firefox and Chrome are both very bug-free and have excellent CSS3 support, but have different styling defaults, so I strongly suggest using reset.css: http://meyerweb.com/eric/tools/css/reset/ as this irons out any potential issues.
I suggest Chrome.
1) It's the most popular browser.
2) It's got excellent developer tools.
3) It's webkit so you've also pretty much got Safari covered as well and webkit is also the foundation of most mobile browsers out there (Android/iOS).
IE 10 and Firefox are very similar to what Chrome will show as they're modern browsers. Then you're left with IE8, which I argue these days it's best not to worry about making it look perfect, just make it look good enough. Consider asking yourself what "support" means. I argue supporting an old browser means the site works, not that the experience is the same as Chrome.
Personally I would suggest Firefox - I find firebug invaluable (I've never been able to get along well with Chrome's dev tools) and it commands a reasonably high market share.
That said, if you find Chrome's dev tools good, it may be better to use Chrome (as has already been said, this covers you for Chrome + Safari, which is about 35-40% browser share)
Really it depends on personal preference, try both and see which you prefer.
As a web developer, you must be able to view your website/pages and easily debug it. Therefore, using Chrome is your best bet.
1. Built in Dev Tools.
2. Webkit. This is mostly supported on Safari as well.
3. A great browser to play around with. You can make all your fancy css3 stuff and test it out. If you like it, you can eventually add those to other browsers with javascript/jQuery.
4. Many many extentions. Though there just about the same amount of useful ones on Firefox, Chrome is IMO the best and most supported.
My list of Plugins:
- Chrome Sniffer - shows the framework a site is using... great for curiosity when browsing the net.
- Cloud Save - Lets you save files from websites to your cloud service of choice... great for web idea/resource browsing as well.
- Code Cola - Edit a section on your webpage directly for testing... like Chrome Dev tools but more direct.
- Eye Dropper - A must... lets you pick colors from webpages and find their various color codes.
- IE Tab - If you have windows, this is a great tool to have so you can view IE view inside Chrome.
- IPCV(Image Property Context Viewer) - See image values and such.
- Measureit - Find the dimensions of objects/classes/etc.
- Palette - Click on an image and it generates a palette from it.
- Resolution Test - A must have... check to see how your site displays on various browser dimensions.
- Session Manager - Save all your tabs for another session of Chrome.
- Web Developer - It does just about anything a Web Developer would need to know/test.
- WhatFont - Find out what font a website uses.
There is my qualities for Chrome... hope it is helpful!
Why pick one? If you include live.js and do your development with a locally running web server and then have your page open on all browsers you are testing against, the live.js code will automatically refresh the page every time you save a CSS, HTML or JavaScript file. You just have to add this line of JavaScript to the top of the page:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
Also checkout IETester it lets you run multiple IE Rendering engines on a single PC (great way to test IE5, 6, 7, 8 and 9 (all on the same computer))
IE is the best for testing. here u can solve your design issue easily in compare of any other browser.
I recommend downloading Visual Web Developer 2010 Express (which is free), coding it there and checking you work with Chrome developer tools or Firefox firebug. In my opinion they are the best dev tools out there. Coding with Visual Web Developer express will be much easier as it has Intellisense built in and will save you lots of time. If you want to check your code for validation, use the W3C markup validator.

Web Design for Google Chrome

What, if any, considerations (HTML, CSS, JavaScript) should you take when designing for Google Chrome?
Chrome uses Webkit, the same engine as is used by Safari, OmniWeb, iCab and more. Just code everything based on the standards and verify in each browser.
I think first and foremost you should focus on using HTML and scripting that follows the standards.
After you have that running, file a bug report then make the browser-specific tweaks. If Chrome is worth a flip you shouldn't have to tweak things for it.
The same ones you'd take for Safari, as they share the same rendering engine (with a slight version mismatch).
I'm sure filing a bug report really helps with all those IE rendering issues!
Realistically, you need to test your application in each browser, no browser 100% follows the W3C standards so ultimately you can't rely on following that at all. You need to test everything you do in any browser you wish to support.
As has been mentioned, Google Chrome has the same rendering engine as Safari/iPhone/etc., WebKit which passes Acid3, so there should be minimal issues if you follow the standards. But don't rely on it. Google Chrome currently uses a slightly older version of WebKit than Safari. I'm sure they'll eventually be on the same version at some point, but unfortunately any new browser becomes just another browser to test in.
Are you designing specifically for Chrome, or do you want to make sure your pages work well with Chrome?
Assuming it's the latter, then just use the same design considerations you'd do for any browser. If applicable, keep in mind that many phones and video game consoles have web browsers now.
Chrome uses a new JavaScript engine, so you'll have to test your JavaScript using Chrome as well as Safari. The HTML and CSS may render pretty much the same, but they use different JavaScript engines.

Is anyone targeting Google Chrome yet? (Web apps, plugins)

Is anyone writing applications specifically to take advantage of google chrome?
Are there any enterprise users who are considering using it as the standard browser?
Yes, I have started to pay very good attention to Google Chrome for my applications. Recent analytics show that between 6%-15% of my users are accessing my applications (varies between 6 to 15 in different applications) on Chrome. And, this number looks on an upward trend.
Thus, I can't really ignore it for testing right now.
As far as taking it as a standard goes, thats a long way off. I still have to test for IE6! :( Though, we have been planning to start using features like Gears (inbuilt in Chrome - downloadable elsewhere) once Chrome crosses the 25% mark. Thats when I believe that we will be looking at Chrome to be our preferred browser. I hope that we have Chrome 1.0+ by then! ;)
I switched to Chrome and haven't looked back except for the occasional site which doesn't work properly, forcing me to load it in Firefox. All my existing web applications work fine on it, and I'm using it for primary testing on my current development project.
I'm not actually targeting chrome, but I have added chrome to my browsers to test sites on. I've found some odd quirks in this product where some plugins cause the browser to hang, or run really slow in some environments, but they are still in beta in active development. But I definately now make sure sites I work on render well in chrome, as well as firefox, latest versions of IE, safari, Konquerer and opera. I usually check out how it looks on lynx as well, that helps me catch "un-alternated text" in images. Yeah, I know that isn't a word, but some people will understand what I'm saying.
Because chrome uses the webkit to render HTML, you can be assured if it works in safari, it'll work under chrome, however it's rendering engine isn't up to scratch quite yet. I think writing applications that take advantage of it is similar to writing iPhone applications, remember chrome is expected to be adopted by android to make it similar to iPhone. That way it pretty much takes advantage of all those iPhone apps.
Would I install it as the browser of choice? not yet - but i'll certainly work on valid web pages that will render across all browsers.
One of our major customers has outlawed Chrome because it installs on the C drive without asking. They deploy a standard image with a small C drive and large D drive so they can easily re-clone the system part of the image on C without destroying the client's personal files on D. Most software allows you to choose the install directory. Anything that violates this is disallowed, and they're a big enough company to have some weight with most vendors.
We have enough headaches trying to support
Firefox
Two versions of IE which have their own iffy bugs
Safari
I'm not sure why we continue to support Safari. Most of our users (corporate) use IE6 or IE7. We try to make sure that things work in both of those.
Maybe not for programming purposes but Chrome w/ Google Reader makes for the most powerful RSS reader. Can handle up to 1500 feeds w/ performance still ok, managing subscriptions still functioning.
I'm using it on my work machine, but that's about it. It's been stable for me, and I like the barebones UI. I'll still switch to Firefox for the web developer extensions however.
I'm liking some of GoogleChrome- the Start page with your 9 most recent is the winner for me. The interface takes a little getting used to, but the speed is impressive, especially with Gmail.
However, it glitches with Java, which rules it out for serious work at the moment. I use FireFox mostly and have Chrome for the "other" websites at work.
I'm considering using GWT on an intranet project and considering suggesting to the users that use Chrome to take advantage of the enhanced Javascript performance. Any AJAX-heavy app would be a great candidate to target Chrome.
At my company, we're not targeting it, but we're definitely paying attention to it. My boss is using it as his primary browser, and I have implemented browser detection for it in our scripts in case we ever to need to target it for some reason.
Chrome has the .png opacity bug where the transparent parts of the .png are a solid color if you try to transition the opacity from 0 to 1. In IE7 the opaque parts are black, and in Chrome, they are white. Today, I decided to go ahead and account for this bug in my JavaScript. I don't really test sites on Chrome that often, but I am actually using it for almost all of my browsing.
I will target Chrome as soon as a stable Linux and OSX client is available.
Targeting Chrome/Chromium right now, I think is like targeting Konqueror web browser. It will get popular, but you should wait to a more stable beta, and/or some Linux and OS X client.
My website statistics shows 3.xx % visitors using Chrome which arrived just few weeks back. And Opera is only 4.xx % which has been around for several years.
Easily you can see that rate at which Chrome is picking up.
You can see how easily Google takes over all areas of your computing world and personal world too.
Since Chrome uses Webkit, it has the same rendering engine and DOM support as Safari (not necessarily the same revision of Webkit though). By testing in Safari, you can generally get by without worrying about Chrome. Any differences you find are probably just bugs that you should file on instead of work around.
However, because Chrome uses a different JS engine, there may be a few incompatibilities with Safari. So, if you're doing anything with JS, you might as well fire up Chrome and see if there's anything obviously wrong.
Generally though, you don't target browsers, you target rendering engines (with their associated DOM support and JS engines).
I am using Google Chrome, so far all the web apps I have work fine in it with no modifications.
No.
Why help Google further build an evil empire? In this particular case it is so obvious that they do not care about users but only obsessed with gathering usage info.
It's not any major player yet