firefox version

chrome-extension/css/style.css

@@ -26,10 +26,11 @@
   vertical-align: text-top;
   margin-left: 3px;
   width: 69px;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 13" width="14" height="13"><polygon style="fill:#d1d1d1" points="6.8,0 8.4,5 13.7,5 9.4,8 11.1,13 6.8,9.9 2.6,13 4.2,8 0,5 5.2,5 "/></svg>')
+  line-height: 1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 14 13' style='enable-background:new 0 0 14 13;'%3E%3Cpolygon style='fill:%23d1d1d1' points='6.8,0 8.4,5 13.7,5 9.4,8 11.1,13 6.8,9.9 2.6,13 4.2,8 0,5 5.2,5 '/%3E%3C/svg%3E%0A");
 }
 
 /* orange stars */
 .rating-stars span {
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 13" width="14" height="13"><polygon style="fill:#e7711b" points="6.8,0 8.4,5 13.7,5 9.4,8 11.1,13 6.8,9.9 2.6,13 4.2,8 0,5 5.2,5 "/></svg>')
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 14 13' style='enable-background:new 0 0 14 13;'%3E%3Cpolygon style='fill:%23e7711b' points='6.8,0 8.4,5 13.7,5 9.4,8 11.1,13 6.8,9.9 2.6,13 4.2,8 0,5 5.2,5 '/%3E%3C/svg%3E%0A");
 }

firefox-extension/_locales/fr/messages.json

@@ -0,0 +1,2 @@
+{
+}

firefox-extension/css/style.css

@@ -0,0 +1,36 @@
+.rating {
+  color: #e7711b;
+  font-size: 13px;
+  margin-bottom: -10px;
+}
+
+.rating.wait {
+  color: #ccc;
+  animation: loading 1s infinite;
+}
+
+@keyframes loading {
+    0%   { opacity: 1; }
+    50%  { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+.rating-stars,
+.rating-stars span {
+  display: inline-block;
+  height: 13px;
+}
+
+/* empty stars */
+.rating-stars {
+  vertical-align: text-top;
+  margin-left: 3px;
+  width: 69px;
+  line-height: 1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 14 13' style='enable-background:new 0 0 14 13;'%3E%3Cpolygon style='fill:%23d1d1d1' points='6.8,0 8.4,5 13.7,5 9.4,8 11.1,13 6.8,9.9 2.6,13 4.2,8 0,5 5.2,5 '/%3E%3C/svg%3E%0A");
+}
+
+/* orange stars */
+.rating-stars span {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 14 13' style='enable-background:new 0 0 14 13;'%3E%3Cpolygon style='fill:%23e7711b' points='6.8,0 8.4,5 13.7,5 9.4,8 11.1,13 6.8,9.9 2.6,13 4.2,8 0,5 5.2,5 '/%3E%3C/svg%3E%0A");
+}

firefox-extension/js/content.js

@@ -0,0 +1,13 @@
+let script = document.createElement('script');
+script.src = chrome.extension.getURL('script.js');
+
+// wait window.google
+// LMK if you have any suggestion about how to improve that shit
+setTimeout(() => {
+    (document.body || document.head || document.documentElement).appendChild(script);
+}, 300)
+
+// append hidden map container
+let mapElement = document.createElement('div');
+    mapElement.id = 'map';
+document.body.appendChild(mapElement);

firefox-extension/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "Avis Doctolib",
+  "version": "0.2.0",
+  "manifest_version": 2,
+  "description": "Affiche les notes des praticiens sur Doctolib",
+  "homepage_url": "https://github.com/JackNUMBER/doctolib-reviews",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "default_locale": "fr",
+  "permissions": [
+    "https://*.doctolib.fr/*"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "https://*.doctolib.fr/*"
+      ],
+      "js": [
+        "js/content.js"
+      ],
+      "css" : ["css/style.css"],
+      "run_at": "document_end",
+      "all_frames": false
+    }
+  ],
+  "web_accessible_resources": ["script.js"],
+  "content_security_policy": "script-src 'self' https://maps.googleapis.com; object-src 'self'"
+}
+
+

firefox-extension/script.js

@@ -0,0 +1,107 @@
+const PAGE_SEARCH = 'search';
+const PAGE_PROFILE = 'profile';
+
+const init = () => {
+    switch (getCurrentPage()) {
+      case PAGE_SEARCH:
+        getSearchElements();
+        break;
+      case PAGE_PROFILE:
+        getProfileElement();
+        break;
+      default:
+        return;
+    }
+}
+
+const getCurrentPage = elm => {
+    const bodyClassList = document.body.classList;
+
+    if (
+        bodyClassList.contains('profiles')
+        && bodyClassList.contains('index')
+    ) {
+        // search page
+        return PAGE_SEARCH;
+    } else if (
+        bodyClassList.contains('profiles')
+        && bodyClassList.contains('show')
+    ) {
+        // profile page
+        return PAGE_PROFILE;
+    }
+}
+
+// append rating
+const appendRating = elm => {
+    let rating = document.createElement('div');
+        rating.classList = 'rating wait';
+        rating.innerHTML = '<span class="rating-stars"></span>';
+    elm.appendChild(rating);
+}
+
+const updateRating = (elm, results, status) => {
+    let innerHTML;
+
+    if (status === 'OK' && results[0].rating !== 0) {
+        let rate = results[0].rating;
+        // get result
+        innerHTML = rate + ' <span class="rating-stars"><span style="width: ' + computeStars(rate) + '"></span></span>';
+    } else {
+        // error
+        innerHTML = '';
+    }
+
+    elm.querySelectorAll('.rating')[0].classList.remove('wait');
+    elm.querySelectorAll('.rating')[0].innerHTML = innerHTML;
+}
+
+// browse page elements on search
+const getSearchElements = () => {
+    let items = document.querySelectorAll('.dl-search-result');
+
+    items.forEach((element, index) => {
+        let name = element.querySelectorAll('.dl-search-result-name')[0].textContent;
+        let elmTarget = element.querySelectorAll('.dl-search-result-title')[0];
+        appendRating(elmTarget);
+        getPlaceInfo(name, elmTarget);
+    });
+}
+
+// browse page elements on search
+const getProfileElement = () => {
+    let elmTarget = document.querySelectorAll('.dl-profile-header-name-speciality')[0];
+    let name = document.querySelectorAll('.dl-profile-header-name')[0].textContent;
+    appendRating(elmTarget);
+    getPlaceInfo(name, elmTarget);
+}
+
+// request place data
+const getPlaceInfo = (query, elm) => {
+    const request = {
+        query: query,
+        // https://developers.google.com/places/web-service/details#fields
+        fields: ['id', 'name', 'formatted_address', 'rating'],
+    };
+
+    const map = new google.maps.Map(document.getElementById('map'));
+    const mapService = new google.maps.places.PlacesService(map);
+
+    mapService.findPlaceFromQuery(request, (results, status) => {
+        // console.log(query, status, results);
+        updateRating(elm, results, status);
+    });
+}
+
+// calculate stars element width
+const computeStars = rate => {
+  const baseSize = 69; // container's width (grey stars)
+
+  // roundoff rate to nearest 0.5 for a half or plain star
+  let rateRounded = Math.round(rate * 2) / 2;
+  let starsWidth = Math.ceil(rateRounded * baseSize / 5);
+
+  return starsWidth + 'px';
+}
+
+init();