🚧 Try to make user chosen extract

For #1

README.md

@@ -51,16 +51,10 @@ The following tasks can be used when you want to start developing the extension
 
 Run `npm run dist` to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.
 
-#### Firefox
-
 Run `npm run sourcezip` for firefox submission
 
 Update <https://addons.mozilla.org/fr/developers/addon/shikiryu-readlater/versions/submit/>
 
-#### Opera
-
-Update <https://addons.opera.com/developer/package/250537/?tab=versions>
-
 ## :sparkles: Features
 
 <dl>

manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Read Later by Email",
+  "name": "Shikiryu Read Later",
   "version": "0.0.3",
   "manifest_version": 2,
   "description": "__MSG_extensionDescription__",
@@ -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": {
@@ -29,7 +29,7 @@
       "32": "icons/favicon-32x32.png",
       "96": "icons/favicon-96x96.png"
     },
-    "default_title": "Read Later by Email",
+    "default_title": "Shikiryu Bookmarklet",
     "default_popup": "popup.html"
   },
   "applications": {

privacy_policy.md

@@ -1,27 +0,0 @@
-#English
-This extension collect the instance URL you'll be sending your page to and the token used to identify yourself on this instance.
-This will be saved on your browser local storage.
-
-The following elements are sent to the instance:
-
-- title
-- description
-- image
-
-They are automatically generated with the current tab content. With your current token, you can also send a comment which will reach the instance.
-
----
-
-# French
-
-Cette extension collecte l'URL de l'instance vers laquelle vous allez envoyer les informations and le jeton vous permettant de vous identifier sur cette instance.
-Ces deux données sont enregistrées localement dans le local storage de votre navigateur.
-
-Les éléments suivant seront envoyés à l'instance :
-
-- titre
-- description
-- image
-
-Ils seront générés automatiquement à partir des mêmes informations utilisées sur l'onglet actuellement ouvert.
-Avec votre jeton en cours, vous pourrez aussi envoyer un commentaire de cet onglet vers l'instance.

src/_locales/en/messages.json

@@ -1,6 +1,6 @@
 {
   "extensionName": {
-    "message": "Read Later by Email",
+    "message": "Shikiryu Read Later",
     "description": "The name of the extension."
   },
   "extensionDescription": {
@@ -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

@@ -1,6 +1,6 @@
 {
   "extensionName": {
-    "message": "Read Later by Email",
+    "message": "Shikiryu Read Later",
     "description": "The name of the extension."
   },
   "extensionDescription": {
@@ -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/options.html

@@ -53,7 +53,7 @@
       <div class="grid">
         <div class="unit whole center-on-mobiles">
           <p class="text-center text-muted">
-            &copy; <a href="https://readlater.shikiryu.com">ReadLaterByEmail</a>
+            &copy; <a href="https://readlater.shikiryu.com">Shikiryu</a>
           </p>
         </div>
       </div>

src/popup.html

@@ -30,8 +30,7 @@
         <div class="grid">
           <div class="unit whole center-on-mobiles">
             <p class="text-center text-muted">
-              &copy;
-              <a href="https://readlater.shikiryu.com">ReadLaterByEmail</a>
+              &copy; <a href="https://readlater.shikiryu.com">Shikiryu</a>
             </p>
             <p class="js-options" data-message="optionsAndSettings"></p>
           </div>

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/options.js

@@ -19,9 +19,6 @@ storage.get("extract", function(resp) {
 });
 
 urlInput.addEventListener("blur", function(e) {
-  if (this.value.endsWith("/")) {
-    this.value = this.value.substring(0, this.value.length - 1);
-  }
   var value = this.value;
   storage.set({ url: value }, function() {
     message.textContent = ext.i18n.getMessage("URLChanged");

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;
+}