[Extension] Add screen capture extension

Change-Id: I5c1471195baa0b3d312fb5ab3917ffaba8b96afc
Signed-off-by: min7.choi <min7.choi@samsung.com>

diff --git a/wrt/wrt_support/extensions_repo/screen_capture/background.js b/wrt/wrt_support/extensions_repo/screen_capture/background.js
new file mode 100755 (executable)
index 0000000..fdc3e97
--- /dev/null
+++ b/wrt/wrt_support/extensions_repo/screen_capture/background.js
@@ -0,0 +1,9 @@
+chrome.runtime.onConnect.addListener(function(port) {
+  console.assert(port.name == "contentscript");
+  port.onMessage.addListener(function(msg) {
+    if (msg.contentscript == "Hello background!") {
+      console.log('from contentscript : ' + msg.contentscript);
+      port.postMessage({background: "Hello contentscript!"});
+    }
+  });
+});

diff --git a/wrt/wrt_support/extensions_repo/screen_capture/contentscript.js b/wrt/wrt_support/extensions_repo/screen_capture/contentscript.js
new file mode 100755 (executable)
index 0000000..497a0ce
--- /dev/null
+++ b/wrt/wrt_support/extensions_repo/screen_capture/contentscript.js
@@ -0,0 +1,160 @@
+var screencapture = require('screencapture');
+
+var top_val = (screen.availHeight / 2) - 200;
+var left_val = (screen.availWidth / 2) - 200;
+
+const MODAL_HTML = '<div id="modal_div" style="display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.7);"> \
+                      <div id="content_div" style="background-color:rgb(255, 255, 255); position:absolute; width: 400px; height: 400px; border-width: 10px; border:solid black; box-sizing: border-box;"> \
+                        <div id="content_header" style="height: 80px"> \
+                        </div> \
+                        <div id="content_body" style="height: 250px"> \
+                            <h3>To capture the current app screen, press the capture button. </h3> \
+                        </div> \
+                        <div id="content_footer"> \
+                          <button type="button" id="btn"> Capture </button> \
+                          <button type="button" id="btn1"> Cancel </button> \
+                        </div> \
+                      </div> \
+                   </div>';
+
+var top_val1 = (screen.availHeight / 2) - 400;
+var left_val1 = (screen.availWidth / 2) - 400;
+
+const IMG_HTML = '<div id="modal_div" style="display: block; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.7);"> \
+                      <div id="content_div" style="background-color:rgb(255, 255, 255); position:absolute; width: 800px; height: 800px; border-width: 10px; border:solid red; box-sizing: border-box;"> \
+                        <div id="img_header" style="height: 80px"> \
+                            <h1> Capture image </h1> \
+                        </div> \
+                          <div id="img_body" style="height: 650px; line-height:650px; text-align: center;" > \
+                            <img src="/home/choi/2017/programmable_runtime/m56/crosswalk-tizen/wrt/wrt_support/extensions_repo/screen_capture/output.png" style="width: 790px; vertical-align: middle;"> \
+                          </div> \
+                          <div id="img_footer"> \
+                            <button type="button" id="img_btn"> Save </button> \
+                            <button type="button" id="img_btn1"> Cancel </button> \
+                          </div> \
+                      </div> \
+                   </div>';
+
+var top_val2 = (screen.availHeight / 2) - 10;
+var left_val2 = (screen.availWidth / 2) - 100;
+
+const POPUP_HTML = '<div id="popup_div" style="background-color:rgb(255, 255, 255); position:absolute; width: 260px; height: 20px; border-width: 10px; border:solid red;"> \
+                        <div id="popup_content" style="text-align: center;"> \
+                        <b>Completed save \
+                        </div> \
+                  </div>';
+const POPUP_HTML1 = '<div id="popup_div" style="background-color:rgb(255, 255, 255); position:absolute; width: 200px; height: 20px; border-width: 10px; border:solid red;"> \
+                        <div id="popup_content" style="text-align: center;"> \
+                        <b>Canceled save \
+                        </div> \
+                  </div>';
+                   
+var port = chrome.runtime.connect({name: "contentscript"});
+port.postMessage({contentscript: "Hello background!"});
+port.onMessage.addListener(function(msg) {
+  if (msg.background == "Hello contentscript!") {
+    console.log('from background : ' + msg.background);
+  }
+});
+
+var setting = 112;
+
+var app_id = location.href.split('/');
+
+if (app_id[app_id.length - 2] == 'installer' || app_id[app_id.length - 2] == 'extensions_settings') {
+  console.log('Except for installer and settings.');
+} else {
+  window.onkeydown = function(e) {
+    console.log('keycode : ', event.keyCode);
+    e.stopPropagation();
+
+    var key = event.keyCode;
+
+    if (key == setting) {
+      if (document.getElementById('modal_div')) {
+        var popup = document.getElementById('modal_div')
+        document.getElementsByTagName('body')[0].removeChild(popup);
+      }
+      else {
+        console.log('in setting');
+        document.body.insertAdjacentHTML('beforeend', MODAL_HTML);  
+    
+        var modal = document.getElementById('modal_div');
+        document.getElementById('content_div').style.top = top_val+'px'; 
+        document.getElementById('content_div').style.left = left_val+'px'; 
+
+        modal.style.display = 'block';
+
+        document.getElementById('modal_div').onclick = function(e) {
+          console.log("===min====");
+          e.stopPropagation();
+        }
+
+        var app_id = location.href.split('/');
+
+        if (app_id[app_id.length - 2] == 'installer' || app_id[app_id.length - 2] == 'extensions_settings') {
+          console.log('Except for installer and settings.');
+        } else {
+          var btn = document.getElementById('btn');
+          var btn1 = document.getElementById('btn1');
+
+          var content_header = document.getElementById('content_header');
+          var h = document.createElement('H2');
+          var app_title = document.createTextNode( 'Capture Extension');
+          h.appendChild(app_title);
+          content_header.appendChild(h);
+    
+          function popup_timer() {
+              document.getElementsByTagName('body')[0].removeChild(popup_div);
+          }
+
+          function timer() {
+            document.body.insertAdjacentHTML('beforeend', IMG_HTML);
+            document.getElementById('content_div').style.top = top_val1+'px'; 
+            document.getElementById('content_div').style.left = left_val1+'px'; 
+
+            document.getElementById('img_btn').onclick = function() {
+              console.log('complete save');
+              var popup = document.getElementById('modal_div');
+              document.getElementsByTagName('body')[0].removeChild(popup);
+       
+              document.body.insertAdjacentHTML('beforeend', POPUP_HTML);  
+
+              var popup_div = document.getElementById('popup_div');
+              document.getElementById('popup_div').style.top = top_val2+'px'; 
+              document.getElementById('popup_div').style.left = left_val2+'px'; 
+
+              setTimeout(popup_timer, 2000);
+            };
+            document.getElementById('img_btn1').onclick = function() {
+              var fs = require('fs');
+              var filePath = '/home/choi/2017/programmable_runtime/m56/crosswalk-tizen/wrt/wrt_support/extensions_repo/screen_capture/output.png';
+              fs.unlinkSync(filePath);
+              document.getElementsByTagName('body')[0].removeChild(modal_div);
+              
+              document.body.insertAdjacentHTML('beforeend', POPUP_HTML1);  
+              var popup_div = document.getElementById('popup_div');
+              document.getElementById('popup_div').style.top = top_val2+'px'; 
+              document.getElementById('popup_div').style.left = left_val2+'px'; 
+
+              setTimeout(popup_timer, 2000);
+            };
+          };
+
+          btn.onclick = function() {
+            document.getElementsByTagName('body')[0].removeChild(modal_div);
+            var imagePath = '/home/choi/2017/programmable_runtime/m56/crosswalk-tizen/wrt/wrt_support/extensions_repo/screen_capture/output.png';
+            screencapture('/home/choi/2017/programmable_runtime/m56/crosswalk-tizen/wrt/wrt_support/extensions_repo/screen_capture/output.png', function (err, imagePath) {        
+              console.log('Save screen image : ', imagePath);
+            })
+            setTimeout(timer, 2000);
+          };
+          btn1.onclick = function() {
+            var popup = document.getElementById('modal_div')
+            document.getElementsByTagName('body')[0].removeChild(popup);
+          };
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

diff --git a/wrt/wrt_support/extensions_repo/screen_capture/manifest.json b/wrt/wrt_support/extensions_repo/screen_capture/manifest.json
new file mode 100755 (executable)
index 0000000..d012dbe
--- /dev/null
+++ b/wrt/wrt_support/extensions_repo/screen_capture/manifest.json
@@ -0,0 +1,17 @@
+{
+  "name": "screen_capture",
+  "description": "screen capture",
+  "version": "1.0",
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["contentscript.js"],
+      "css": ["style.css"]
+    }
+  ],
+  "manifest_version": 2
+}

diff --git a/wrt/wrt_support/extensions_repo/screen_capture/style.css b/wrt/wrt_support/extensions_repo/screen_capture/style.css
new file mode 100644 (file)
index 0000000..82ec638
--- /dev/null
+++ b/wrt/wrt_support/extensions_repo/screen_capture/style.css
@@ -0,0 +1,51 @@
+#content_header {
+  text-align: center;
+  padding : 1px;
+  margin-bottom: 20px;
+  border: 1px solid #bcbcbc;
+
+}
+#content_body {
+  text-align: center;
+  padding : 1px;
+}
+#content_footer {
+  text-align: center;
+  padding : 1px;
+}
+
+#btn {
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 100px;
+  height: 30px;
+}
+#btn1 {
+  margin-bottom: 10px;
+  width: 100px;
+  height: 30px;
+}
+
+#img_header {
+  text-align: center;
+  padding : 1px;
+  margin-bottom: 10px;
+  border: 1px solid #bcbcbc;
+}
+
+#img_footer {
+  text-align: center;
+  padding : 1px;
+}
+
+#img_btn {
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 100px;
+  height: 30px;
+}
+#img_btn1 {
+  margin-bottom: 10px;
+  width: 100px;
+  height: 30px;
+}
\ No newline at end of file