I would like to know if it is possible to modify Chrome or Firefox display settings, so that it would only show rectangles of HTML DOM objects? What I want to do is to decrease rendering engine job amount as much as possible, so it would only build layout of the page.
People usually refer to this mode of operation as "headless" (i.e. without UI).
Usually there's an additional requirement - to be able to run it server-side without the usual for client software installed. If you're running it client-side, I wouldn't bother about optimization, it shouldn't give you a big win anyway.
Otherwise, try searching using that term. I've seen it asked for several times, but haven't seen a working out-of-box solution.
[edit] just saw http://hg.mozilla.org/incubator/offscreen, which seems to be a headless version of Mozilla.
I wouldn't go as low-level as modifying the renderer. Instead, I suggest you use Firefox's Greasemonkey to replace the elements from the page with whatever it is you need. You'll need to know a bit of JavaScript, but it's not that hard.
However, this will only work on client side. If you want to do this on server-side ( so that it will work on any page a user requests through your own ), my guess is you'll need to grab the page's content in a string, and then modify it using a HTML parser.
Related
I’m building a simple browser, and I’d like to code most of it using HTML/JS/CSS. I cannot use iframes to display pages, due to frame-busting. What are my options?
The browser is not meant to be production-quality, but as a proof-of-concept for my thesis, similar to this interactive mockup. The main features it will need to support are:
Loading any page without frame-busting (even google.com),
Detecting when a link is clicked and opening it in a new frame, with the original one remaining intact.
I intend to write this using Web technologies, but it’s OK if it needs to be wrapped up in a small amount of something else, e.g., to turn it into an Android app. However, if it’s possible, it would be best if I could load the app as a web page. Finally, it is also preferable to be able to run the app on an Android device, but it’s OK if it only works on a desktop.
In researching this question, I came across a few options:
<iframe>. Google.com doesn't load at all in an iframe. I tried using the sandbox attribute, but it still didn’t load. Is there a way around this (for any page)?
Mozilla’s Browser API. This API was supposed to allow you to use the mozbrowser attribute in an iframe when building FirefoxOS apps. I suspect there’s no longer any way to access it. I couldn’t get the sample browser app loaded, and it seems that mozbrowser is not supported in WebExtensions. Did I miss something? Is there a way to make this work?
<webview> in a Chrome app. This is the only option that worked so far. I was able to download and install the sample browser app in Chrome. The one downside is that it seems to be Chrome-only (and I would prefer cross-platform or Firefox, all else being equal). Are there any issues with this option? Any way to make it run without Chrome?
Electron app with <webview>. While the setup here is more complicated than the previous option, it seems like the code would be very similar (there’s even a similar sample browser app). Are there any advantages/disadvantages to this option over the previous?
So, are there ways to make options 1 or 2 work? Are there perhaps other options?
HTML/CSS is a "language" translated by the browser into pages. You cannot code a browser in HTML. The easiest solution is to code it in C#.
I'm not sure if this is a good solution, but you can try Electron (nodeJS). You will only need to use JS/CSS/HTML.
I know there are several tools available to find unused CSS on a static web page. But in most real world scenarios I encounter, a lot of the CSS is used after some or the other interaction on the page, maybe a new modal opening up or an options popup etc.
In such scenarios, what would you suggest? How do I keep a tab on my ever-growing render blocking CSS?
The only way I guess one could do that is by running regular unused-css-detector type tools in conjunction with Selenium - test known interactions and see whats left unused. But a big assumption here is that I'd need to know all interactions on my page which could use new CSS. Is there a way to achieve my goal without making this assumption?
In an ideal world, I'd be able to post-back all CSS used by a visitor's browser on my page to my server. Then I'd collect data over a month, aggregate, and get a pretty accurate idea about actual unused CSS.
Any good ideas?
I am the author of a tool that is aiming at doing what you are describing. Everywhere I worked, the CSS is this "append-only" thing that is too risky, too time-consuming to clean up. And even when you try, the ROI is so low that it not worth it.
So I am working on a tool that is very similar to what you are describing. The goal is to bring confidence on what can be removed, and to actually do it automatically by submitting pull requests.
A snippet of JavaScript is running in the browser and sends reports of what is being used to a server. Once enough data is accumulated to build some "confidence score", it can create Pull Request automatically to remove selectors that are actually not used.
It is still very early stage, but you are welcome to try it and give some feedback about it.
https://www.bleachcss.com/
Is there reliable a way to detect such browser capability from the user agent string?
HTML5 isn't a server-side language.
Anyway, there isn't a way to reliably detect UA capabilities, for instance they could have Javascript turned off, addons installed, etc. etc.
You could use some SS methods such as PHP's Browser Detect, but aside from that there's nothing more you can really do. This is not at all comprehensive at all, though!
Everything such as this should really be done client side in Javascript, as you can easily detect what's available and what isn't. There's a number of libraries out there that will do this, but it's very simple to do yourself if you know what you want so using one shouldn't really be required. Furthermore, you should never want to do this based on User Agent strings, as I mentioned before there's addons available that can modify behaviour etc. You should literally just check for the feature you wish to use rather than restricting yourself to a certain version of the browser.
Not reliably — you’re stuck with figuring out the browser version from the user-agent string, and maintaining a list of which browser versions support the API.
You could, however, detect it on the client side using JavaScript:
Modernizr
Mark Pilgrim’s suggested History API detection code
and then do a redirect via JavaScript (i.e. by setting window.location) to let the server know whether the API is available or not. That would be the usual way to redirect to a URL starting with # (as per your comment on rudi_visser’s answer.
This is not server side (so it probably does not answer your question, I thought it would be helpful though):
Have you looked at Modernizr
It is a javascript file you include in your HTML page. You can then use its properties to detect if a particular HTML 5 tag is supported by the browser.
In my rails app I have a need to save some webpages and display them to the user as images. For example, how would I save www.google.com as an image?
There is a command line utility called CutyCapt that is using the WebKit-Rendering engine to render HTML-Pages into various image formats. Maybe this is for you?
http://cutycapt.sourceforge.net/
Prohibitively difficult to do in pure Ruby, so you'd want to use an external service for this. Browsershots does it, for example, and it looks like they have an api, although I haven't used it myself. Maybe someone else can chime in with alternative but similar services.
You'll also want to read up on delayed_job or something similar, to make sure you're accessing those page images as a background task and that it doesn't interfere with your actual application.
You can't do it easily (probably can't do it at all).
Each page is just a text - html data. The view you want to make an image of is a rendered page. Browser renders the page using tonns of techniques like html parsing, javascript parsing, css parsing, font rendering, etc.. To make the screenshot of google page - you would need to do all the rendering somewhere in memory and then take a screenshot of rendered page.
That task is almost impossible (there is nothing fully impossible).
If you are really eager to donate tonns of time to accomplish that task - you should do this steps:
1) Find some opensource rendering engine. Firefox would do.
2) Find some way to communicate between ruby-on-rails and that engine.
3) Wire it all together and see the results.
However, I see steps 1 and 2 as nearly impossible.
Firefox addon:
https://addons.mozilla.org/en-US/firefox/addon/1146/
Basically, something better than this:
<input type="file" name="myfile" size="50">
First of all, the browse button looks different on every browser. Unlike the submit button on a form, you have to come up with some hack-y way to style it.
Secondly, there's no progress indicator showing you how much of the file has uploaded. You usually have to implement some kind of client-side way to disable multiple submits (e.g. change the submit button to a disabled button showing "Form submitting... please wait.") or flash a giant warning.
Are there any good solutions to this that don't use Flash or Java?
Yaakov: That product looks to be exactly what I'm looking for, but the cost is $1000 and its specifically for ASP.NET. Are there any open source projects that cover the same or similar functionality?
File upload boxes is where we're currently at if you don't want to involve other technologies like Flash, Java or ActiveX.
With plain HTML you are pretty much limited to the experience you've described (no progress bar, double submits, etc). If you are willing to use some javascript, you can solve some of the problems by giving feedback that the upload is in progress and even showing the upload progress (it is a hack because you shouldn't have to do a full round-trip to the server and back, but at least it works).
If you are willing to use Flash (which is available pretty much anywhere and on many platforms), you can overcome pretty much all of these problems. A quick googling turned up two such components, both of them free and open source. I never used any of them, but they look good. BTW, Flash isn't without its problems either, for example when using the multi-file uploader for slide share, the browser kept constantly crashing on me :-(
Probably the best solution currently is to detect dynamically if the user has Flash, and if it's the case, give her the flash version of the uploader, while still making it possible to choose the basic HTML one.
HTH
You could have a look at the Fancy Upload script. Though it uses flash it still looks great.
The problem here is that the browsers specifically work to block anything that changes the basic file upload input control. You can't change it with javascript for instance.
The reason is security - if I could script it I could build a page that when you visited it sent me various files from your hard disk. Not nice.
There are various workarounds at the moment, but they're different between IE and FX (I don't know about Safari, Opera, etc).
Look at what http://www.gmail.com does in IE and FX when you attach something to an e-mail.
I want to see that rubbish "Browse" button - it tells me that I'm not letting anything unexpected in.
It is true, the file upload control is definitely behind the times. Hopefully this will be addressed in a future asp.net version.
Though it costs some money, I have found the Telerik upload control to have all of the functionality that you are looking for, including styling and progress updates (it also optimizes memory for large uploads).