I have worked on a chrome plugin for one of the cloud based product. For The Chrome we have used third partly JS libraries like BackboneJS etc. Now I have to design a Firefox Extension, I am trying to figure out how much code we can reuse. Apparently spending few hours with Mozilla Developer site it seems like for Firefox Extension we have to use XUL for the UI. Not sure if we can use the html and javascript functions from Chrome App for the Firefox Extension, or what would be the approach to estimate the effort. My Understanding is that we have to do it from the scratch since like Chrome in FF we dont have concepts like background page etc.
There is nothing inherent that prevents you from implementing a UI in HTML/JS. You might have to wrap it in an XUL <iframe>, or <browser> (potentially other elements) within a <window> (Firefox will open pure HTML).
The key issue regarding extensions is that they execute in an elevated security context vs. webpages. As such, they have the ability to affect a much larger range of things in the browser and on the users system. When <iframe>, or <browser> elements are used, they have a property type which defaults to having the contents operating in the elevated security context. The default value is type="chrome" which makes the content opened be in the extension's higher security context.
Additional docs from MDN regarding security concerns with opening content in <iframe>, or <browser> elements which is not sourced from your extension distribution: Security best practices in extensions and Displaying web content in an extension without security issues
As to your JavaScript: You should be able to re-use a significant amount of it. At a minimum, the logic. Obviously, there will be more significant differences in how you accomplish interfacing to the aspects of the browsers which are not covered under standards documents (e.g. DOM manipulation should be very close, just as it is for webpage JS).
Related
I am quite sure that with the good old Firebug, it was shown in the Layout tab, together with the box-sizing property.
Is it possible to tell in the Web Developer too? There is a Box Model tab which is quite similar to the Layout tab of Firebug, but it does not show this information.
Btw: I thought the built-in Web Developer was built on Firebug, but when reading about it it actually seems that they are two quite separate things.
That feature is currently only available in Firefox Nightly.
It's not uncommon for me to get stuck on some issue in my running web application and wish I could just make a quick one-off Plunkr (or jsfiddle) from the total set of the browser's script, style, and HTML SO THAT I can easily tweak and play with things in an instant-feedback environment. Are there any tools (browser extensions, perhaps) (or techniques) that would facilitate making a Plunkr in this way?
My company uses an application from a third party vendor, therefore we have no control over the source code. The site has compatibility issues in IE10 (only) due mostly to the rendering of Javascript, as well as in other browsers (Safari, Firefox, Chrome).
Since we DO have control over our server, I asked our Hosting team to add a custom HTTP response header in IIS as follows, based on some Googling I did.
In the Name box --> X-UA-Compatible
In the Value box --> IE=EmulateIE9
Now I'm wondering if IE=9 would've been preferable, and if that would apply to other browsers besides IE.
So my questions are, specifically:
(1) What is the difference between content=IE=9 and content=IE=EmulateIE9 ?
(2) Would using content=IE=9 force browsers other than IE to render as IE9 ?
(3) I've seen an additional attribute for Chrome=1. Does this actually work ?
The html-5.com provides this definition, so it sounds like this tag would NOT work outside of IE, but I've seen so many other references to the Chrome=1 that I'm wondering otherwise.
X-UA-Compatible is used to indicate to an IE browser which version of the rendering engine should be used to display the page. This metatag does not affect other browsers such as Firefox and Opera, which in general attempt to avoid bloating the size of the browser code by displaying web pages only one way according to established standards (Supporting multiple rendering engines presents some major challenges, especially when content rendered by one engine accesses embedded content rendered by a different engine).
Thanks!
The difference between using IE=9 and IE=EmulateIE9 is that using IE=9 forces standards mode for IE9, while EmulateIE9 will respect the DOCTYPE to determine standards or quirks mode. See this link for more details (although it's a little dated): http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx
See Daniel's answer for 2 and 3, but the short version is that this has zero effect on other browsers.
Are there any programs that render websites from the point of view of different browsers? In other words, I'd like to be able to open and view websites as if it were Internet Explorer, Firefox, Chrome, Safari, etc.
It would be a bonus if the utility has a paned interface that lets you view pages side by side.
Thanks!
also can use adobe's https://browserlab.adobe.com/index.html
BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences.
updated,
you can also litmusapp, another excellent utility, allowing you to test a website in different browsers but also emails.
http://browsershots.org/
I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.