let the magic start

jack545 · Feb 5, 2016 · c860038 · c860038
1 parent 6bcdd2c
commit c860038
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 0 deletions.
diff --git a/icon.png b/icon.png
diff --git a/jquery-2.2.0.min.js b/jquery-2.2.0.min.js
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,23 @@
+{
+    "manifest_version": 2,
+
+    "name": "Gender Blocker",
+    "description": "This extension blocks any gender information on Linkedin",
+    "version": "1.0",
+
+    "browser_action": {
+        "default_icon": "icon.png",
+        "default_title": "Click here!"
+    },
+    "permissions": [
+    "activeTab",
+    "https://ajax.googleapis.com/"
+  ],
+    "content_scripts": [
+        {
+            "matches": ["*://www.linkedin.com/*"],
+            "css": ["mystyles.css"],
+            "js": ["jquery-2.2.0.min.js", "myscript.js"]
+    }
+  ]
+}
diff --git a/myscript.js b/myscript.js
@@ -0,0 +1,10 @@
+$(".profile-picture").hide();
+
+/*var name = $(".full-name").text();
+var first = name.slice(0, name.indexOf(" "));
+console.log(first);
+var second = name.slice(1, name.indexOf(" "));
+console.log(second);
+var shortened = first.charAt(0);
+
+$(".full-name").html(shortened + "." + second);*/
diff --git a/mystyles.css b/mystyles.css
@@ -0,0 +1,4 @@
+.profile-overview {
+    float: left !important;
+    width: auto !important;
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<!--
+ This page is shown when the extension button is clicked, because the
+ "browser_action" field in manifest.json contains the "default_popup" key with
+ value "popup.html".
+ -->
+<html>
+  <head>
+    <title>Getting Started Extension's Popup</title>
+    <style>
+      body {
+        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
+        font-size: 100%;
+      }
+      #status {
+        /* avoid an excessively wide status text */
+        white-space: pre;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 400px;
+      }
+    </style>
+
+    <!--
+      - JavaScript and HTML must be in separate files: see our Content Security
+      - Policy documentation[1] for details and explanation.
+      -
+      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
+     -->
+    <script src="popup.js"></script>
+  </head>
+  <body>
+    <div id="status"></div>
+    <img id="image-result" hidden>
+  </body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,118 @@
+// Copyright (c) 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Get the current URL.
+ *
+ * @param {function(string)} callback - called when the URL of the current tab
+ *   is found.
+ */
+function getCurrentTabUrl(callback) {
+  // Query filter to be passed to chrome.tabs.query - see
+  // https://developer.chrome.com/extensions/tabs#method-query
+  var queryInfo = {
+    active: true,
+    currentWindow: true
+  };
+
+  chrome.tabs.query(queryInfo, function(tabs) {
+    // chrome.tabs.query invokes the callback with a list of tabs that match the
+    // query. When the popup is opened, there is certainly a window and at least
+    // one tab, so we can safely assume that |tabs| is a non-empty array.
+    // A window can only have one active tab at a time, so the array consists of
+    // exactly one tab.
+    var tab = tabs[0];
+
+    // A tab is a plain object that provides information about the tab.
+    // See https://developer.chrome.com/extensions/tabs#type-Tab
+    var url = tab.url;
+
+    // tab.url is only available if the "activeTab" permission is declared.
+    // If you want to see the URL of other tabs (e.g. after removing active:true
+    // from |queryInfo|), then the "tabs" permission is required to see their
+    // "url" properties.
+    console.assert(typeof url == 'string', 'tab.url should be a string');
+
+    callback(url);
+  });
+
+  // Most methods of the Chrome extension APIs are asynchronous. This means that
+  // you CANNOT do something like this:
+  //
+  // var url;
+  // chrome.tabs.query(queryInfo, function(tabs) {
+  //   url = tabs[0].url;
+  // });
+  // alert(url); // Shows "undefined", because chrome.tabs.query is async.
+}
+
+/**
+ * @param {string} searchTerm - Search term for Google Image search.
+ * @param {function(string,number,number)} callback - Called when an image has
+ *   been found. The callback gets the URL, width and height of the image.
+ * @param {function(string)} errorCallback - Called when the image is not found.
+ *   The callback gets a string that describes the failure reason.
+ */
+function getImageUrl(searchTerm, callback, errorCallback) {
+  // Google image search - 100 searches per day.
+  // https://developers.google.com/image-search/
+  var searchUrl = 'https://ajax.googleapis.com/ajax/services/search/images' +
+    '?v=1.0&q=' + encodeURIComponent(searchTerm);
+  var x = new XMLHttpRequest();
+  x.open('GET', searchUrl);
+  // The Google image search API responds with JSON, so let Chrome parse it.
+  x.responseType = 'json';
+  x.onload = function() {
+    // Parse and process the response from Google Image Search.
+    var response = x.response;
+    if (!response || !response.responseData || !response.responseData.results ||
+        response.responseData.results.length === 0) {
+      errorCallback('No response from Google Image search!');
+      return;
+    }
+    var firstResult = response.responseData.results[0];
+    // Take the thumbnail instead of the full image to get an approximately
+    // consistent image size.
+    var imageUrl = firstResult.tbUrl;
+    var width = parseInt(firstResult.tbWidth);
+    var height = parseInt(firstResult.tbHeight);
+    console.assert(
+        typeof imageUrl == 'string' && !isNaN(width) && !isNaN(height),
+        'Unexpected respose from the Google Image Search API!');
+    callback(imageUrl, width, height);
+  };
+  x.onerror = function() {
+    errorCallback('Network error.');
+  };
+  x.send();
+}
+
+function renderStatus(statusText) {
+  document.getElementById('status').textContent = statusText;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  getCurrentTabUrl(function(url) {
+    // Put the image URL in Google search.
+    renderStatus('Performing Google Image search for ' + url);
+
+    getImageUrl(url, function(imageUrl, width, height) {
+
+      renderStatus('Search term: ' + url + '\n' +
+          'Google image search result: ' + imageUrl);
+      var imageResult = document.getElementById('image-result');
+      // Explicitly set the width/height to minimize the number of reflows. For
+      // a single image, this does not matter, but if you're going to embed
+      // multiple external images in your page, then the absence of width/height
+      // attributes causes the popup to resize multiple times.
+      imageResult.width = width;
+      imageResult.height = height;
+      imageResult.src = imageUrl;
+      imageResult.hidden = false;
+
+    }, function(errorMessage) {
+      renderStatus('Cannot display image. ' + errorMessage);
+    });
+  });
+});