🚧 Try to make user chosen extract

For #1

manifest.json

@@ -11,7 +11,7 @@
   "background": {
     "scripts": ["scripts/background.js"]
   },
-  "permissions": ["activeTab", "storage"],
+  "permissions": ["activeTab", "storage", "contextMenus"],
   "options_ui": {
     "page": "options.html"
   },
@@ -20,7 +20,7 @@
       "matches": ["http://*/*", "https://*/*"],
       "js": ["scripts/contentscript.js"],
       "run_at": "document_end",
-      "all_frames": false
+      "all_frames": true
     }
   ],
   "browser_action": {

src/_locales/en/messages.json

@@ -58,5 +58,9 @@
   "excerpt": {
     "message": "Add content",
     "description": "Option to add the webpage content into the email"
+  },
+  "selectDomToSend": {
+    "message": "Select DOM To Send",
+    "description": "Select DOM To Send"
   }
 }

src/_locales/fr/messages.json

@@ -58,5 +58,9 @@
   "excerpt": {
     "message": "Ajouter le contenu",
     "description": "Option to add the webpage content into the email"
+  },
+  "selectDomToSend": {
+    "message": "Partie à envoyer par email",
+    "description": "Select DOM To Send"
   }
 }

src/scripts/background.js

@@ -1,6 +1,46 @@
 import ext from "./utils/ext";
 import storage from "./utils/storage";
 
+let onMenuAdded = function() {
+  if (ext.browser.runtime.lastError) {
+    console.log(`Error: ${ext.browser.runtime.lastError}`);
+  } else {
+    console.log("Readlater menu created successfully");
+  }
+};
+
+ext.contextMenus.create(
+  {
+    id: "dom-selection",
+    title: ext.i18n.getMessage("selectDomToSend"),
+    contexts: ["all"]
+  },
+  onMenuAdded
+);
+
+ext.contextMenus.onClicked.addListener(function(info, tab) {
+  if ("dom-selection" === info.menuItemId) {
+    var page_data = {
+      title: "",
+      description: "",
+      image: "",
+      comment: "",
+      url: document.location.href
+    };
+    ext.tabs.sendMessage(tab.id, { action: "process-page" }, function(data) {
+      ext.tabs.sendMessage(tab.id, { action: "DOM", data: data }, function(
+        response
+      ) {
+        if (response && response.action === "saved") {
+          console.log(ext.i18n.getMessage("savedSuccessfully"));
+        } else {
+          console.log(response.error + " (" + response.status + ")");
+        }
+      });
+    });
+  }
+});
+
 ext.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   if (request.action === "perform-save") {
     var data = request.data;

src/scripts/contentscript.js

@@ -1,35 +1,67 @@
 import ext from "./utils/ext";
-import storage from "./utils/storage";
 
-var extractTags = () => {
-  var url = document.location.href;
+let extractDOM = () => {
+  let indexInParent = node => {
+    let children = node.parentNode.childNodes;
+    let num = 0;
+    for (let i = 0; i < children.length; i++) {
+      if (children[i] === node) return num;
+      if (children[i].nodeType === 1) num++;
+    }
+    return -1;
+  };
+
+  let gx = el => {
+    let xp = "";
+    for (; el && el.nodeType === 1; el = el.parentNode) {
+      let id = indexInParent(el) + 1; // jQuery(el.parentNode).children(el.tagName).index(el)+1;
+      id = id > 1 ? "[" + id + "]" : "";
+      xp = "/" + el.tagName.toLowerCase() + id + xp;
+    }
+
+    return xp;
+  };
+
+  document.addEventListener("click", function(evt) {
+    let tar = evt.target;
+    while (tar && tar !== this) {
+      if (tar.matches(".shikihover")) {
+        let data = extractTags();
+        data.xpath = gx(tar);
+      }
+    }
+  });
+};
+
+let extractTags = () => {
+  let url = document.location.href;
   if (!url || !url.match(/^http/)) {
     console.error("Invalid URL : " + url);
     return;
   }
 
-  var data = {
+  let data = {
     title: "",
     description: "",
     image: "",
     url: url
   };
 
-  var ogTitle = document.querySelector("meta[property='og:title']");
+  let ogTitle = document.querySelector("meta[property='og:title']");
   if (ogTitle) {
     data.title = ogTitle.getAttribute("content");
   } else {
     data.title = document.title;
   }
 
-  var descriptionTag =
+  let descriptionTag =
     document.querySelector("meta[property='og:description']") ||
     document.querySelector("meta[name='description']");
   if (descriptionTag) {
     data.description = descriptionTag.getAttribute("content");
   }
 
-  var imgTag =
+  let imgTag =
     document.querySelector("meta[property='og:image']") ||
     document.querySelector("meta[property='twitter-image']");
   if (imgTag) {
@@ -50,6 +82,10 @@ function onRequest(request, sender, sendResponse) {
   if (request.action === "process-page") {
     sendResponse(extractTags());
   }
+  if (request.action === "DOM") {
+    console.log("DOM");
+    sendResponse(extractDOM());
+  }
 }
 
 ext.runtime.onMessage.addListener(onRequest);

src/scripts/popup.js

@@ -20,8 +20,7 @@ storage.get("extract", function(resp) {
 });
 
 var renderMessage = message => {
-  var displayContainer = document.getElementById("display-container");
-  displayContainer.textContent = message;
+  document.getElementById("display-container").textContent = message;
 };
 
 var renderBookmark = data => {

src/styles/contentstyle.css

@@ -0,0 +1,9 @@
+div:hover,
+section:hover {
+  border: 3px solid yellow;
+}
+
+div,
+section {
+  border: none;
+}