v0.0.1

Author: lxieyang

.prettierignore

@@ -0,0 +1 @@
+image-clipper.js

package-lock.json

@@ -1,7 +1,7 @@
 {
-  "name": "screenshot-chrome-extension",
+  "name": "screenshot-extension",
   "version": "0.0.1",
-  "description": "A chrome extension that takes screenshots",
+  "description": "A browser extension that takes screenshots",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -1,29 +1,31 @@
 {
-  "name": "Chrome Extension with React & Webpack",
-  "options_page": "options.html",
+  "name": "Screenshot Extension",
   "background": {
     "page": "background.html"
   },
   "browser_action": {
-    "default_popup": "popup.html",
     "default_icon": "icon-34.png"
   },
-  "chrome_url_overrides": {
-    "newtab": "newtab.html"
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": false
   },
   "icons": {
     "128": "icon-128.png"
   },
-  "content_scripts": [{
-    "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-    "js": ["contentScript.bundle.js"],
-    "css": ["content.styles.css"]
-  }],
+  "permissions": ["tabs", "downloads", "<all_urls>", "storage"],
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "js": ["contentScript.bundle.js"],
+      "css": ["content.styles.css"]
+    }
+  ],
   "web_accessible_resources": [
     "content.styles.css",
     "icon-128.png",
     "icon-34.png"
   ],
   "manifest_version": 2,
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
-}
+}

src/assets/img/icon-128.png

@@ -1,5 +1,88 @@
 import '../../assets/img/icon-34.png';
 import '../../assets/img/icon-128.png';
+import imageClipper from './image-clipper.js';
 
-console.log('This is the background page.');
-console.log('Put the background scripts here.');
+const getImageDimensions = (file) => {
+  return new Promise(function (resolved, rejected) {
+    var img = new Image();
+    img.onload = function () {
+      resolved({ w: img.width, h: img.height });
+    };
+    img.src = file;
+  });
+};
+
+chrome.browserAction.setTitle({
+  title:
+    'Hold the Option/Alt key and drag the mouse to create partial screenshots.\nClick the icon to create full-page screenshots.',
+});
+
+chrome.browserAction.onClicked.addListener(function () {
+  chrome.tabs.captureVisibleTab(function (screenshotUrl) {
+    chrome.storage.sync.get(['download', 'openInTab'], (result) => {
+      // download image
+      if (result.download) {
+        chrome.downloads.download({
+          url: screenshotUrl,
+          filename: `${new Date().getTime().toString()}.jpg`,
+        });
+      }
+
+      // see for yourself the screenshot during testing
+      if (result.openInTab) {
+        chrome.tabs.create({
+          url: screenshotUrl,
+        });
+      }
+    });
+  });
+});
+
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  if (request.msg === 'SCREENSHOT_WITH_COORDINATES') {
+    let rect = request.rect;
+    let windowSize = request.windowSize;
+    chrome.tabs.captureVisibleTab(function (screenshotUrl) {
+      getImageDimensions(screenshotUrl).then((imageDimensions) => {
+        let scale = imageDimensions.w / windowSize.width;
+        let x = Math.floor(rect.x * scale);
+        let y = Math.floor(rect.y * scale);
+        let width = Math.floor(rect.width * scale);
+        let height = Math.floor(rect.height * scale);
+        imageClipper(screenshotUrl, function () {
+          this.crop(x, y, width, height).toDataURL((dataUrl) => {
+            chrome.storage.sync.get(['download', 'openInTab'], (result) => {
+              // download image
+              if (result.download) {
+                chrome.downloads.download({
+                  url: dataUrl,
+                  filename: `${new Date().getTime().toString()}.jpg`,
+                });
+              }
+
+              // see for yourself the screenshot during testing
+              if (result.openInTab) {
+                chrome.tabs.create({
+                  url: dataUrl,
+                });
+              }
+            });
+
+            // get dimensions
+            // getImageDimensions(dataUrl).then((croppedImageDimensions) => {
+            //   let dimensions = {
+            //     trueWidth: croppedImageDimensions.w,
+            //     trueHeight: croppedImageDimensions.h,
+            //     rectWidth: rect.width,
+            //     rectHeight: rect.height,
+            //     rectX: rect.x,
+            //     rectY: rect.y,
+            //   };
+            //   console.log(dimensions);
+            // });
+          });
+        });
+      });
+    });
+  }
+});

src/assets/img/icon-34.png

@@ -0,0 +1,12 @@
+#screenshot-bbox {
+  border: 1px dashed red;
+}
+
+.no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}