1.0.4

Author: apiaget

.gitignore

@@ -0,0 +1 @@
+/web-ext-artifacts/*.zip

.htaccess

@@ -0,0 +1,6 @@
+SetOutputFilter DEFLATE
+AddOutputFilterByType DEFLATE "application/atom+xml" "application/javascript" "application/json" "application/ld+json" "application/manifest+json" "application/rdf+xml" "application/rss+xml" "application/schema+json" "application/vnd.geo+json" "application/vnd.ms-fontobject" "application/x-font-ttf" "application/x-javascript" "application/x-web-app-manifest+json" "application/xhtml+xml" "application/xml" "font/eot" "font/opentype" "image/bmp" "image/svg+xml" "image/vnd.microsoft.icon" "image/x-icon" "text/cache-manifest" "text/css" "text/html" "text/javascript" "text/plain" "text/vcard" "text/vnd.rim.location.xloc" "text/vtt" "text/x-component" "text/x-cross-domain-policy" "text/xml"
+
+# SECTION BEGIN GIT PROTECTION
+RedirectMatch 404 /\.git
+# SECTION END GIT PROTECTION

.user.ini

@@ -0,0 +1,2 @@
+; Compress file output: https://faq.infomaniak.com/2013
+zlib.output_compression = On

content_scripts/opengraph-preview.js

@@ -0,0 +1,53 @@
+(function() {
+    /**
+     * Check and set a global guard variable.
+     * If this content script is injected into the same page again,
+     * it will do nothing next time.
+     */
+    if (window.hasRun) {
+      return;
+    }
+    window.hasRun = true;
+  
+    browser.runtime.onMessage.addListener((message) => {
+      if(message.command === "getog") {
+        var document_og_title_el = document.querySelector("meta[property='og:title']");
+        var document_og_title = "";
+        if(document_og_title_el) {
+          document_og_title = document_og_title_el.getAttribute('content');
+        }
+
+        var document_og_image_el = document.querySelector("meta[property='og:image']");
+        var document_og_image = "";
+        if(document_og_image_el) {
+          document_og_image = document_og_image_el.getAttribute('content');
+        }
+
+        var document_og_description_el = document.querySelector("meta[property='og:description']");
+        var document_og_description = "";
+        if(document_og_description_el) {
+          document_og_description = document_og_description_el.getAttribute('content');
+        }
+
+        var document_og_url_el = document.querySelector("meta[property='og:url']");
+        var document_og_url = "";
+        if(document_og_url_el) {
+          document_og_url = document_og_url_el.getAttribute('content');
+        }
+
+        var document_og_type_el = document.querySelector("meta[property='og:type']");
+        var document_og_type = "";
+        if(document_og_type_el) {
+          document_og_type = document_og_type_el.getAttribute('content');
+        }
+
+        var sending = browser.runtime.sendMessage({
+          og_title: document_og_title,
+          og_image: document_og_image,
+          og_description: document_og_description,
+          og_url: document_og_url,
+          og_type: document_og_type,
+        });
+      }
+    });
+})();

icons/og-48.png

@@ -0,0 +1,25 @@
+{
+    "manifest_version": 2,
+    "name": "Open Graph Preview",
+    "version": "1.0.4",
+    "description": "Preview what users will see if this webpage is shared on Facebook. Uses the webpage's OG tags.",
+    "icons": {
+        "48": "icons/og-dark-48.png",
+        "96": "icons/og-dark-96.png"
+    },
+    "permissions": [
+        "activeTab"
+    ],
+    "browser_action": {
+        "default_icon": "icons/og-dark-96.png",
+        "theme_icons": [{
+            "light": "icons/og-96.png",
+            "dark": "icons/og-dark-96.png",
+            "size": 32
+        }],
+        "default_title": "Open Graph Preview",
+        "default_popup": "popup/popup.html"
+    },
+    "web_accessible_resources": [
+    ]
+}

icons/og-96.png

@@ -0,0 +1,66 @@
+html, body {
+
+}
+
+#og-container {
+  width: 527px;
+}
+
+#text-container {
+  border-left: 1px solid #dadde1;
+  border-right: 1px solid #dadde1;
+  border-bottom: 1px solid #dddfe2;
+  border-right: 1px solid #dddfe2;
+  margin: 0;
+  padding: 10px 12px;
+  background-color: #f2f3f5;
+}
+
+#og_url {
+  color: #606770;
+  font-size: 12px;
+  line-height: 16px;
+  min-height: max-content;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+#og_title {
+  font-weight: 600;
+  overflow: hidden;
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 20px;
+  margin: 5px 0 0;
+  max-height: 110px;
+  word-wrap: break-word;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+#og_description {
+  margin-top: 3px;
+  color: #606770;
+  font-size: 14px;
+  line-height: 20px;
+  word-break: break-word;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+#img-container {
+  border-left: 1px solid #dadde1;
+  border-right: 1px solid #dadde1;
+  border-top: 1px solid #dadde1;
+  line-height: 0;
+}
+
+#info {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.cover {
+  object-fit: cover;
+}

icons/og-dark-48.png

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="popup.css"/>
+  </head>
+
+<body>
+  <div id="og-container">
+      <div>
+          <div>
+              <span>
+                  <div id="img-container">
+                      <div>
+                          <div>
+                              <img id="og_image" class="cover" src="preview-image.jpg" width="100%" height="274">
+                          </div>
+                      </div>
+                  </div>
+                  <div id="text-container">
+                      <div>
+                          <div>
+                              <div>
+                                  <div id="og_url"></div>
+                                  <div></div>
+                              </div>
+                          </div>
+                          <div>
+                              <div>
+                                  <h1 id="og_title">Looking for the og:title tag</h1>
+                              </div>
+                              <div id="og_description">Looking for the og:description tag</div>
+                          </div>
+                      </div>
+                  </div>
+              </span>
+          </div>
+      </div>
+  </div>
+
+
+  <script src="popup.js"></script>
+</body>
+
+</html>

icons/og-dark-96.png

@@ -0,0 +1,49 @@
+function handleMessage(request, sender, sendResponse) {
+  if(request.og_image !== "") {
+    document.getElementById("og_image").src = request.og_image;
+  }
+  if(request.og_title !== "") {
+    document.getElementById("og_title").textContent = request.og_title;
+  } else {
+    document.getElementById("og_title").textContent = "Could not retrieve the og:title tag";
+  }
+
+  if(request.og_description !== "") {
+    document.getElementById("og_description").textContent = request.og_description;
+  } else {
+    document.getElementById("og_description").textContent = "Could not retrieve the og:description tag";
+  }
+
+  document.getElementById("og_url").textContent = request.og_url;
+  document.getElementById("og_type").textContent = request.og_type;
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+
+function reportExecuteScriptError(error) {
+  console.error(`Failed to retrieve the Open Graph information : ${error.message}`);
+}
+
+/**
+* When the popup loads, inject a content script into the active tab,
+* and add retrieve the OG tags.
+* If we couldn't inject the script, handle the error.
+*/
+browser.tabs.executeScript({file: "/content_scripts/opengraph-preview.js"})
+  .then(() => {
+    browser.tabs.query({active: true, currentWindow: true})
+      .then(getog)
+      .catch(reportError);
+  });
+
+
+function getog(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    command: "getog"
+  })
+  .catch(reportExecuteScriptError);
+}
+
+function reportError(error) {
+  console.error(`Could not retrieve og tags: ${error}`);
+}