Menu
In a Google Chrome extension, how can I captureVisibleTab and save it to png file on server side?
582
Here is a simple example showing how you can do it:
manifest.json:
{
"name": "TabCapture",
"version": "0.0.1",
"description": "Capture a tab",
"background_page" : "background.html",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Capture tab"
},
"permissions" : ["tabs", "<all_urls>"]
}
background.html:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="background.js"></script>
</html>
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.captureVisibleTab(null, function(img) {
var xhr = new XMLHttpRequest(), formData = new FormData();
formData.append("img", img);
xhr.open("POST", "http://myserver.com/submitImage", true);
xhr.send(formData);
});
});
This extension adds a browser action button in Chrome. When the user clicks on the button, a POST request containing the base64 encoded image (into a FormData object) is sent to http://myserver.com/submitImage.
This code does not show how to manage errors and server response.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
