I need to grab the current html inside a chrome packaged app. I am aware of Taking screenshot using javascript for chrome extensions but when I tried this, chrome states that the "tab" permission is not allowed for packaged apps.
Is there any way I can reliably grab the current page?
You cannot do what you are trying to do with a packaged Chrome application. Instead, you should probably look at making an extension, as that would be the way to go if you want to interact with the current page.
If you're unsure, here's a resource for figuring exactly what you should choose: https://developer.chrome.com/webstore/choosing
Not from a chrome extension, as those are browser-centric solutions (not webpage-centric).
Niklas Von Hurtzen has created a very useful js extension called html2canvas that essentially does what you're looking for, just not as a chrome extension. You can see it here.
Once "rendered," the plugin will create a canvas element by traversing the DOM tree of whatever you hand to the extension. From there it's pretty simple... yourRenderedCanvasElement.toDataUrl() will return a data: URL representation of that canvas element, which by default is a PNG, giving you a "screenshot."
Edit: Ha, I see now that you reference this exact thing in the message thread in the other answer...
Related
I couldn't find this in the linked questions above.
I have written a JS Web app that uses Google Maps. I'm getting reports from India that the browser location isn't being found on the mobile version of the app, and I need to be able to debug it (I live in New York).
It works fine in the NY installation, so I need to test on the Indian installation.
The problem is that I need my browser to report a local long/lat, so I can trigger that JS code path.
Is there a way to get my browser to spoof a long/lat?
This is the only thing I've found. It looks fiendishly complex, rather delicate, and I'm not sure it would work for my application.
Is there a more straightforward way for me to do something like supply a GPX file (like I do for Xcode) to spoof a location?
I am using a Mac, and can use pretty much any browser to do this.
Thanks!
OK. I figured out how to do this in Chrome.
It is almost the same as this (The solution I mentioned in the question).
However, Google seems to have moved things around. You no longer have the "Emulation" tab. What you have is a "Sensors" tab that appears in the second Developer panel:
In here, you can play with it.
I'm curious as to whether it is possible to take a screenshot directly from Chrome's DevTools using chrome.tabs.captureVisibleTab (be it from the console or from within a snippet), without going through the process of creating an extension.
Is this somehow possible? If not, how would you suggest going about taking a screenshot that reliably mimics the current page (html2canvas doesn't seem to render everything properly). Thanks for your help.
Here is a page screenshot tool provided by Google. After installed, you may open "chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/js/page_context.js" in browser to see its code. This extension do not use Chrome Extension API. It works well in most pages, except some complicated pages.
I have a simple script from AccuWeather to display a weather button on my website:
I love the simple way this button displays. It's perfect for what I want.
However, the button generated is in Adobe Flash format (swf) and doesn't display on most mobile devices since iOS and Windows Phone have no support and Flash Player for Android is no longer available for download from the Google Play app store.
I thought I found a solution in an Open Source project called Smokescreen that has its development area at Github.
I don't need this to reproduce flash movies. All I need is a simple javascript-based conversion of the flash button to a flat image that can be displayed in any browser that can execute javascript, which includes mobile devices.
But the documentation and description of how to use Smokescreen at their GitHub site is minimal at best, and I'm not a javascript expert and cannot get it working.
The call I am making that obtains the Flash image from AccuWeather is:
<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp
?partner=netweather&tStyle=whteYell&logo=0&zipcode=NAM|CA|MB|WINNIPEG|
&lang=eng&size=7&theme=blue&metric=1&target=_self'>
</script>
Can anyone tell me what the javascript would be to use Smokescreen to display the flash image produced by the above code as an image.
If Smokescreen can't do it, is there any other method that can do this live on a webpage?
Just tested smokescreen with the SWF of the page you posted, and it doesn't work, you will need to parse the SWF at server side if you still want to use that site.
I opened the dev console and tracked down the SWF from the iframe
copied the file into my computer, then
cloned the github repo and
edited the player.html (from the github repo), line 13 to point to the file I downloaded.
This is the SWF I downloaded: http://netwx.accuweather.com/netWx-V212.swf?zipcode=46958
Edit: this is the error message I got from the dev console:
TypeError: this.defineEditText is not a function [loader.js:136](https://github.com/cesmoak/smokescreen/blob/master/src/player/loader.js#L136)
My system asks for permission to allow the SWF to connect to netwx.accuweather.com.
A quick search on github reveals some nice pure javascript alternatives.
https://github.com/search?l=JavaScript&q=weather&ref=searchresults&type=Repositories
I think this one looks the most promising: http://simpleweatherjs.com/
This simpleweatherjs demo shows a nice icon as well: http://codepen.io/fleeting/pen/wHism
unfortunately there is no way your javascript can handle swf, espacially on mobile devices like whith ios or windows phone since the javascript is running on your device itself.
all you could try is to use swfobject which is described as a workaround for javascript
here is the documentation of swfobject
Have you considered using a headless browser like phantomjs? You could use something like Selenium instead for out-of-the-box plugin support, but there are headless options for Flash.
The beauty of such software is that it can automate any user task (that's why it's used for testing). Like logging onto a site and performing a search that would normally not be available externally because of antiforgery tokens. Or checking if a product's price has changed by seeing if its DOM element value's has changed. Or accessing your online banking to see if your balance is a prime number and rendering your credit card bill in fractal form.
I mean, if you want to go this far for a weather widget, you probably have power user needs :)
...also Accuweather seems to do a fairly similar mobile-friendly version. And if it's not 100% the same, you could always ask.
Edit: check their T&C, the mobile-friendly snippet might actually be the only option for legal reasons.
i tried to write a script which can be added as an extension to the browser. The problem with this script is how to access the dom elements of a webpage. i used XMLHttpRequest object for accessing the web page but it has same origin policy issues. I worked on it for nearly 3 weeks finally i used Anyorigin.com code but i am not able to get all the functionality so i thought of using userscript where we can easily access the web page's DOM elements. Is ther any other way to create an extension
While enloz's answers are good, Firefox has an Add-on Builder that you can you use.
Add-ons are built using HTML, CSS and JavaScript. There is a web based version with the following features (quoting from their website):
Edit code in a feature-rich environment
Test your add-ons instantly
Use built-in version control & sharing
You can find the web based version here: https://builder.addons.mozilla.org/
Try this:
Greasemonkey:
Customize the way a web page displays or behaves, by
using small bits of JavaScript.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Update:
This looks to be a better solution, but I haven't tested it.
http://crossrider.com/
I'm currently building a very bare bones web app, that had the requirement of being able to copy an image while broswing the web, and then pasting it onto my page.
I know that this type of functionality IS possible - as I've pasted images into gmail while writing messages, and into Tumblr (I believe they use TinyMCE as their editor).
After long searching - I've been saddened by the poor quality of explanation for the available solutions out there.
This is what I've gathered:
$(document).bind('paste', function(e){
console.log(e);
})
Inspecting the event object, it seems that data is only included when there is text (in Chrome anyways).
I am aware that IE has a clipboardData object which gives you access to the clipboard contents.
I've also heard of possible solutions using Flash, Java Applets, and HTML 5 Canvas - but I haven't yet been able to find good write ups explaining those solutions.
Anyone done this successfully, and can suggest best practices?
This works fine in Chrome. Here's a live example supporting getting image data in pure JavaScript with no servers involved: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
You could use the Clipboard API: http://dev.w3.org/2006/webapi/clipops/clipops.html
Or you can do is to use Zero ClipBoard. It uses an invisible Flash movie and provides a JavaScript interface to access the clipboard.