initial implementation for screenshot taker

devtools/js/popup.js

@@ -39,6 +39,16 @@ $(function () {
         }
     });
 
+
+    $("#completeShotButton").click(function () {
+        getTabId(startCapture);
+    });
+
+    function startCapture(tabId) {
+        chrome.extension.sendMessage({msg: "startCapture", tabId: tabId});
+        window.close();
+    }
+
     function getRawJson() {
         var jsonData = $("#jsonData").val();
         if ($.isNullOrWhiteSpace(jsonData)) {
@@ -69,5 +79,12 @@ $(function () {
         });
     }
 
+    function getTabId(fun) {
+        chrome.tabs.query({currentWindow: true, active: true}, function (tabArray) {
+            fun(tabArray[0].id);
+        });
+    }
+
     init()
+
 });

devtools/js/screenshot/background.js

@@ -0,0 +1,164 @@
+var takeScreenshot = {
+    /**
+     * @description ID of current tab
+     * @type {Number}
+     */
+    tabId: null,
+
+    /**
+     * @description Canvas element
+     * @type {Object}
+     */
+    screenshotCanvas: null,
+
+    /**
+     * @description 2D context of screenshotCanvas element
+     * @type {Object}
+     */
+    screenshotContext: null,
+
+    /**
+     * @description Number of pixels by which to move the screen
+     * @type {Number}
+     */
+    scrollBy: 0,
+
+    /**
+     * @description Sizes of page
+     * @type {Object}
+     */
+    size: {
+        width: 0,
+        height: 0
+    },
+
+    /**
+     * @description Keep original params of page
+     * @type {Object}
+     */
+    originalParams: {
+        overflow: "",
+        scrollTop: 0
+    },
+
+    /**
+     * @description Initialize plugin
+     */
+    initialize: function () {
+        this.screenshotCanvas = document.createElement("canvas");
+        this.screenshotContext = this.screenshotCanvas.getContext("2d");
+
+        this.bindEvents();
+    },
+
+    /**
+     * @description Bind plugin events
+     */
+    bindEvents: function () {
+
+        chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+
+
+        }.bind(this));
+
+
+        //// handle onClick plugin icon event
+        //// use bind to make this object available.
+        //chrome.browserAction.onClicked.addListener(function (tab) {
+        //    this.tabId = tab.id;
+        //    console.log("getPageDetails");
+        //
+        //    chrome.tabs.sendMessage(tab.id, {
+        //        "msg": "getPageDetails"
+        //    });
+        //}.bind(this));
+
+        // handle chrome requests
+        chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+            if (request.msg === "setPageDetails") {
+                this.size = request.size;
+                this.scrollBy = request.scrollBy;
+                this.originalParams = request.originalParams;
+
+                // set width & height of canvas element
+                this.screenshotCanvas.width = this.size.width;
+                this.screenshotCanvas.height = this.size.height;
+
+                this.scrollTo(0);
+            } else if (request.msg === "capturePage") {
+                this.capturePage(request.position, request.lastCapture);
+            } else if (request.msg === "startCapture") {
+                debugger;
+                this.tabId = request.tabId;
+                chrome.tabs.sendMessage(this.tabId, {
+                    "msg": "getPageDetails"
+                });
+            }
+        }.bind(this));
+    },
+
+    /**
+     * @description Send request to scroll page on given position
+     * @param {Number} position
+     */
+    scrollTo: function (position) {
+        chrome.tabs.sendMessage(this.tabId, {
+            "msg": "scrollPage",
+            "size": this.size,
+            "scrollBy": this.scrollBy,
+            "scrollTo": position
+        });
+    },
+
+    /**
+     * @description Takes screenshot of visible area and merges it
+     * @param {Number} position
+     * @param {Boolean} lastCapture
+     */
+    capturePage: function (position, lastCapture) {
+        var self = this;
+
+        setTimeout(function () {
+            chrome.tabs.captureVisibleTab(null, {
+                "format": "png"
+            }, function (dataURI) {
+                var newWindow,
+                    image = new Image();
+
+                if (typeof dataURI !== "undefined") {
+                    image.onload = function () {
+                        self.screenshotContext.drawImage(image, 0, position);
+
+                        if (lastCapture) {
+                            self.resetPage();
+                            newWindow = window.open();
+                            newWindow.document.write("<style type='text/css'>body {margin: 0;}</style>");
+                            newWindow.document.write("<img src='" + self.screenshotCanvas.toDataURL("image/png") + "'/>");
+                        } else {
+                            self.scrollTo(position + self.scrollBy);
+                        }
+                    };
+
+                    image.src = dataURI;
+                } else {
+                    chrome.tabs.sendMessage(self.tabId, {
+                        "msg": "showError",
+                        "originalParams": self.originalParams
+                    });
+                }
+            });
+        }, 300);
+    },
+
+    /**
+     * @description Send request to set original params of page
+     */
+    resetPage: function () {
+        chrome.tabs.sendMessage(this.tabId, {
+            "msg": "resetPage",
+            "originalParams": this.originalParams
+        });
+    }
+};
+
+takeScreenshot.initialize();

devtools/js/screenshot/content-script.js

@@ -0,0 +1,84 @@
+/*
+ Content scripts are JavaScript files that run in the context of web pages.
+ By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits,
+ or make changes to them.*/
+
+chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+
+    function resetPage(originalParams) {
+        window.scrollTo(0, originalParams.scrollTop);
+        document.querySelector("body").style.overflow = originalParams.overflow;
+    }
+
+    switch (request.msg) {
+        case "getPageDetails":
+            var size = {
+                width: Math.max(
+                    document.documentElement.clientWidth,
+                    document.body.scrollWidth,
+                    document.documentElement.scrollWidth,
+                    document.body.offsetWidth,
+                    document.documentElement.offsetWidth
+                ),
+                height: Math.max(
+                    document.documentElement.clientHeight,
+                    document.body.scrollHeight,
+                    document.documentElement.scrollHeight,
+                    document.body.offsetHeight,
+                    document.documentElement.offsetHeight
+                )
+            };
+
+            chrome.extension.sendMessage({
+                "msg": "setPageDetails",
+                "size": size,
+                "scrollBy": window.innerHeight,
+                "originalParams": {
+                    "overflow": document.querySelector("body").style.overflow,
+                    "scrollTop": document.documentElement.scrollTop
+                }
+            });
+            break;
+
+        case "scrollPage":
+            var lastCapture = false;
+
+            window.scrollTo(0, request.scrollTo);
+
+            // first scrolling
+            if (request.scrollTo === 0) {
+                document.querySelector("body").style.overflow = "hidden";
+            }
+
+            // last scrolling
+            if (request.size.height <= window.scrollY + request.scrollBy) {
+                lastCapture = true;
+                request.scrollTo = request.size.height - request.scrollBy;
+            }
+
+            chrome.extension.sendMessage({
+                "msg": "capturePage",
+                "position": request.scrollTo,
+                "lastCapture": lastCapture
+            });
+            break;
+
+        case "resetPage":
+            resetPage(request.originalParams);
+            break;
+
+        case "showError":
+            var errorEl = document.createElement("div");
+
+            errorEl.innerHTML = "<div style='position: absolute; top: 10px; right: 10px; z-index: 9999; padding: 8px; background-color: #fff2f2; border: 1px solid #f03e3e; border-radius: 2px; font-size: 12px; line-height: 16px; transition: opacity .3s linear;'>An internal error occurred while taking pictures.</div>";
+            document.body.appendChild(errorEl);
+
+            setTimeout(function () {
+                errorEl.firstChild.style.opacity = 0;
+                document.body.removeChild(errorEl);
+            }, 3000);
+
+            resetPage(request.originalParams);
+            break;
+    }
+});

devtools/manifest.json

@@ -1,5 +1,7 @@
 {
+  "manifest_version": 2,
   "name": "SimplyDev",
+  "author": "codebased@gmail.com",
   "version": "1.0",
   "description": "Anything that I felt a developer will use it during software development.",
   "icons": {
@@ -11,13 +13,26 @@
     "clipboardRead",
     "clipboardWrite",
     "storage",
+    "activeTab",
+    "tabs",
     "http://json2csharp.com/Home/GenerateClasses"
   ],
+  "background": {
+    "scripts": [
+      "js/screenshot/background.js"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["js/screenshot/content-script.js"]
+    }
+  ],
   "browser_action": {
     "default_title": "SimplyDev",
     "default_icon": "img/ic_launcher.png",
     "default_popup": "popup.html"
   },
-  "manifest_version": 2,
+
   "content_security_policy": "script-src 'self'; object-src 'self'"
 }

devtools/popup.html

@@ -32,7 +32,7 @@
 <div class="container">
     <ul class="nav nav-tabs">
         <li class="active"><a data-toggle="pill" href="#home">JSON</a></li>
-        <li><a data-toggle="pill" href="#menu1">About</a></li>
+        <li><a data-toggle="pill" href="#menu1">Screen</a></li>
     </ul>
     <div class="tab-content">
 
@@ -42,12 +42,16 @@
                 <div class="container">
                     <ul class="nav navbar-nav pull-right">
                         <li>
-                            <button id="formatButton"  data-toggle="tooltip"
-                                   data-title="Make your Json looks decent" class="btn btn-primary bottomtooltip">Format</button>
+                            <button id="formatButton" data-toggle="tooltip"
+                                    data-title="Make your Json looks decent" class="btn btn-primary bottomtooltip">
+                                Format
+                            </button>
                         </li>
                         <li> &nbsp;
-                            <button id="csharpButton"  data-toggle="tooltip"
-                                   data-title="Convert Json to C# models" class="btn btn-primary bottomtooltip">C# Classes</button>
+                            <button id="csharpButton" data-toggle="tooltip"
+                                    data-title="Convert Json to C# models" class="btn btn-primary bottomtooltip">C#
+                                Classes
+                            </button>
                             &nbsp;
                         </li>
                     </ul>
@@ -64,17 +68,29 @@
             </div>
             <h6>Console:</h6>
 
-
             <div class="panel panel-primary" id="resultContainer">
                 <div class="panel-body">
                     <textarea id="result" rows="10" cols="10" class="textArea"></textarea>
                 </div>
             </div>
         </div>
-        <div id="menu1" class="tab-pane fade">
-            <h3>Something</h3>
 
-            <p>Something will come in the future :-) </p>
+
+        <div id="menu1" class="tab-pane fade">
+            <nav class="navbar navbar-default">
+                <div class="container">
+                    <ul class="nav navbar-nav pull-right ">
+                        <li>
+                            <button type="button" id="completeShotButton" data-toggle="tooltip"
+                                    data-title="Take the whole screen shot, top to bottom."
+                                    class="btn btn-primary btn-lg bottomtooltip ">Complete Shot
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+            <br/>
+            <br/>
         </div>
     </div>
 </div>