I don't have an invite but it been used on TWIG.
It works as following:
You can select a parts to highlight, parts to blackout.
In the next step a screenshot of that is created (??) and you can preview what other browser information is transmitted.
So how does Google create that screenshot? does it send the complete modified DOM for server-side processing? or what other black magic is involved here?
The highlights and black outs are just HTML divs. The screenshot of the page is a canvas.
I used Chrome's developer tools to confirm this. It even works in Firefox and Internet Explorer, so it definitely isn't just a Chrome thing.
Here's a screenshot of developer tools with one of the highlight elements highlighted to show that it is a div:
There is one canvas:
When the dialog says this:
Please wait while we take a snapshot of the page so you can highlight
the relevant areas.
It seems to be rendering a screenshot of the page on the server (as there is a request in the Network tab and it has to do with a snapshot and the feedback according to the variables in the request URL) and then it places the screenshot over the page.
After you click on "Next," another dialog opens with all of the information and renders the final screenshot with your highlights and black outs in it.
I'm not sure how they did the "Highlighted Text" part though.
It could just send the entire DOM tree up to the server and have it rendered on the other end.
dont know the feature, but how your describing it;
its not a crossplatform feature and not in the specs. Your looking for drawWindow of the canvas element. They then base64/urlencode the canvas and send it to the server. Can imagine they back it with serverside black magic for IE6 support.. or they make google+ a html5 browser only thing..
It appears Google's updated feedback form screenshotter uses the browser's new display API to capture the screenshot. This allows it to get an accurate screenshot.
There's a cool library that does the same thing, if you want to make it yourself: FeedbackPlus
Related
First time poster. Currently trying to work on a project but I am having an issue with iframes. I'm making an extension for Chrome, and part of its functionality right now is to be fetching any shapes/borders on a page. Unfortunately, that also includes ones within iframes. I'm currently stuck because I cannot get around security policies from Cross-Domain sources.
I was wondering, however, if it is possible to create a function that displays what the Chrome console does when I hit "inspect element" on a page... I tried to make a console function called "save" that would automatically download a file of anything output to the log, but the output for the iframe's HTML is blank except for its tag...
When I am inspecting an element on the page, I can see the contents of that iframe just fine. Is there anyway to just get the actual text from Inspect Element and store that? I know this may be silly, but I genuinely have no idea. I am pretty new to JavaScript. I just need to match up script tags for shapes for part of the extension's functionality.
I'm assuming that this is going to end up being impossible, but I figured I'd ask. I'm also assuming that this inspect element functionality is something that only the browser can work with. But hey, maybe there's a way. Thanks for any help.
I've got a certain task which I would normally accomplish with a chrome extension.
The only thing I cannot perform with a chrome extension is to make a screenshot of a node. I've been trying to use debugger api, but I couldn't make it snap a proper screenshot of an element when it goes beyond the viewport (even using the captureBeyondViewport property and some other stuff).
So my goal right now is to make puppeteer a semi-automated tool. It should open a browser and work in a concept similar to chrome extensions. So I have to be able to run certain code on any of the tabs of the puppeteer browser instance. Just like content scripts do. Once something happens (for example, clicking on certain element) the puppeteer should make certain actions (eg make a screenshot of the node/full-page screenshot etc). It must be able to cover multiple tabs and perform an action only from the tab where the action was performed.
If anyone can give me a good option to test with the chrome extension, that would be even better. The goal is to be able to capture screenshot of an element even if it's big enough to go beyond the viewport.
PS: html2canvas isn't an option because the website I need to work on the screenshots lack of images and basically look a bit weird.
I would like to make a bookmarklet to open google chrome's settings panel and clear my cache with a single click.
For a while now, Ive had a bookmark that opens chrome's settings panel with the 'clear cache' setting already selected. After clicking the bookmark (normally opening it in a new tab) I have to then opent the tab and submit the form. However, when developing this is a task I have to do quite often and these several repeated steps just seem unnecessary.
This link opens the page to clear one's cache (obviously for Chrome users only): chrome://chrome/settings/clearBrowserData#cache
I recently discovered bookmarklets and thought it would be a good way to accomplish the task of clearing my cache with a single click. However, I've discovered that putting even a basic javascript sample in the address bar when on the settings page (linked above) fails to work.
For example, this works in the address bar on any given page, but not from the chrome settings page:
javascript:alert('hello stackoverflow');
Is there a way to execute javascript from the chrome settings page? Are there other options? Im looking for any route to achieve this goal and would love to learn something along the way, even if it means doing some evil. :)
add a bookmark:
javascript:document.write('<form onsubmit="window.open(\'javascript:\'+js_line.value, \'target\');return false;">javascript:<input type=text name=js_line style="width:90%;"/></form><iframe src="" name="target" style="width:100%;height:90%;"/>');
What you want might not be fully possible through a bookmarklet, but it's certainly possible with a Chrome App. There is an app Clear Cache already. I find it pretty useful.
So I want to be able to have a space that overlays content on any website with the click of a button (something that also is above everything on a web page). An example would be the Google Translate page, http://translate.google.com/translate?u=about%3Ablank&hl=en&langpair=auto|en&tbb=1&ie=UTF-8 where the frame at the top will overlay any website that is entered in the url box.
What I want to do is have a box like this overlay every webpage, like google's translate does, but have it hide with a click of a floating image, say an arrow.
The files will be locally stored on my HDD, but I don't see this being an issue.
I don't know what languages to code this in, but I assume Javascript, however, I do not know the classes to call to do this. Any advice chaps? I'm not asking for a hand out, just a point in the right direction!
It looks like you want to develop a browser extension. Look here for Chrome:
http://code.google.com/chrome/extensions/getstarted.html
There are similar ways to do it for IE, FireFox, and Safari.
It sounds like you'll either need to use frames or an iframe. They are very similar in how you interact with them (say to make them load a new page) although they are different in their implementation.
A great site for learning about frames is w3Schools:
http://w3schools.com/html/html_frames.asp
http://w3schools.com/html/html_iframe.asp
You can use JavaScript to reference the frames via its name or its ID. Ex: document.framename.src = 'hello.php' or document.getElementById('frameId').src = 'hello.php'.
One problem with using frames is that search engines don't like them. If you are using an iframe, the search engine will search your page, but still not the iframe.
As for resizing/hiding the frame/iframe, you can do that with both frames and an iframe, although the method for accomplishing it varies depending on what you use.
I have been using analytics software for a while, and I've been asking myself how can such software copy a webpage completely to then place it in an iframe and overlay it with images and info.
An example:
A major problem I encountered is copying the webpage.
In particular, copying the webpage the user is currently viewing! (account panel, form journeys, etc...)
I guess this could be achieved by sending the html with the usability data, but I see this as a major performance problem...
Any comments on the subject? This would be very interesting! =)
Further findings:
I discovered that sending the HTML over GET, could be made mode efficient by using client-side compression. Although I'm still not 100% convinced by this!
I think they don't actually copy the whole page for your visitors, all of what they need, is to track the mouse location (x and y coordinates) and a url of the current page being shown,
then they will make use of these information to show you all kind of information (where the user was looking, what have been clicked, ... etc).
AFAIK the google analytics "hot links" widget doesn't copy the page at all -- it just shows it in an iFrame with stuff overlaid on it. (in google analytics' case, they can also modify the page display by sending instructions to the analytics JS embedded in the page.)
The above looks like a whole different kettle of fish though -- you sure it is html and not a screenshot?