Merge pull request #12 from open-wc/feat/add-firebase

feat: add firebase

README.md

@@ -11,6 +11,7 @@
 [![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc)
 
 Chrome extension to find custom elements on a page, and search the catalog for extra information
+
 <p align="center">
   <img src="./meta_assets/giphytime.gif"/
 </p>
@@ -19,7 +20,16 @@ Chrome extension to find custom elements on a page, and search the catalog for e
 
 - Write code
 - Run `npm run build`
-- Go to <a href="chrome://extensions/">chrome://extensions/</a>
+- Go to [chrome://extensions/](chrome://extensions/)
 - Toggle 'Developer mode' in top right corner
 - Click 'Load unpacked' in top left corner
 - Select the root folder of this project
+
+If you are implementing and want to test repeatedly:
+
+- Install [Extensions Reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid)
+- Running `npm run start` will rebuild on each change in the `src` folder, and trigger a reload of the extension.
+- Refresh your current tab
+
+
+## [Extension on the Chrome Store](https://chrome.google.com/webstore/detail/custom-elements-locator/eccplgjbdhhakefbjfibfhocbmjpkafc)

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Custom Elements Locator",
   "description": "This extension will find any custom element on a page.",
-  "version": "1.1",
+  "version": "1.3",
   "icons": {
     "16": "meta_assets/icon16.png",
     "48": "meta_assets/icon48.png",

package.json

@@ -1,19 +1,23 @@
 {
   "name": "custom-elements-locator",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "",
   "main": "content_script.js",
   "scripts": {
+    "reload": "open http://reload.extensions/",
+    "start": "chokidar \"src/*.js\" -c \"npm run build;npm run reload\"\n\n",
     "build": "rimraf dist && rollup -c rollup.config.js",
     "build:watch": "rimraf dist && rollup -c --watch rollup.config.js"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "firebase": "^7.19.1",
     "lit-element": "^2.2.1",
     "query-selector-shadow-dom": "^0.3.4"
   },
   "devDependencies": {
+    "chokidar-cli": "^2.1.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.26.3",
     "rollup-plugin-cpy": "^2.0.1",

src/content_script.js

@@ -7,7 +7,6 @@ let index = 0;
 
 function isCustomElement(el) {
   const isAttr = el.getAttribute('is');
-
   return el.localName.includes('-') || isAttr && isAttr.includes('-');
 }
 
@@ -40,7 +39,10 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if(request.msg === "init") {
     // Custom elements are already found.
     // Return cached ones.
-    sendResponse(allCustomElements);
+    sendResponse({
+      customElements: allCustomElements,
+      host: window.location.host
+    });
   }
 
   if(request.msg === "highlight") {

src/found-element.js

@@ -35,7 +35,7 @@ class FoundElement extends LitElement {
       <div class="wrapper">
         <div class="el-name" @mouseover=${() => this.highlight(this.customElementName)}>
           <span>
-            <a target="_blank" href="https://catalog.open-wc.org">${this.customElementName}</a>
+            <a>${this.customElementName}</a>
           </span>
         </div>
         <div class="icons">

src/main.js

@@ -1,12 +1,26 @@
 import {LitElement, html, css} from 'lit-element';
-import './found-element.js'
+
+import './found-element.js';
+import './share-element.js'
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+
+firebase.initializeApp({
+  apiKey: 'AIzaSyDHaekG4-W4Zv7FLHdai8uqGwHKV0zKTpw',
+  authDomain: "locator-a6a89.firebaseapp.com",
+  projectId: "locator-a6a89",
+});
+
+const col = firebase.firestore().collection("sites");
 
 class CustomElementsLocator extends LitElement {
   static get properties() {
     return {
       customElements: { type: Array },
       query: { type: String },
-      loaded: { type: Boolean }
+      loaded: { type: Boolean },
+      showSubmit: { type: Boolean },
+      host: { type: String},
     }
   }
 
@@ -15,20 +29,45 @@ class CustomElementsLocator extends LitElement {
     this.customElements = [];
     this.query = '';
     this.loaded = true;
+    this.showSubmit = false;
+    this.host = '';
   }
 
   firstUpdated() {
-    document.addEventListener('DOMContentLoaded', () => {
-      chrome.tabs.getSelected(null, (tab) => {    
-        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
-          chrome.tabs.sendMessage(tabs[0].id, {msg: "init"}, (response) => {
-            console.log(response);
-            this.customElements = response;
-            this.loaded = true;
+    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+      chrome.tabs.sendMessage(tabs[0].id, {msg: "init"}, ({customElements, host}) => {
+        if(!host.includes('localhost')) {
+
+          col.doc(host).get().then((doc) => {
+            // doc exists, but doesnt use CE anymore -> delete
+            if(doc.exists && !(customElements.length > 0)) {
+              col.doc(host).delete();
+            } else {
+              if(customElements.length > 0) {
+                col.doc(host) // doc exists, update data
+                  .update({
+                    site: host,
+                    components: firebase.firestore.FieldValue.arrayUnion(...customElements),
+                    count: firebase.firestore.FieldValue.increment(1)
+                  }).catch((error) => {
+                    col.doc(host) // doesnt  exit, create
+                      .set({
+                        site: host,
+                        components: customElements,
+                        count: 1,
+                      }, { merge: true });
+                  });
+              }
+            }
           });
-        });
+        }
+
+        this.customElements = customElements;
+        this.host = host;
+        this.loaded = true;
       });
     });
+
     this.inputEl = this.shadowRoot.querySelector('input');
   }
 
@@ -39,8 +78,8 @@ class CustomElementsLocator extends LitElement {
   render() {
     return html`
       <div>
-        <a class="img-href" href="https://open-wc.org" target="_blank">
-          <img src="./owc-logo.svg"/>
+        <a class="img-href" href="https://wild.open-wc.org" target="_blank">
+          <svg style="margin-top: 10px" width="100px" height="100px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="100" x2="100" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9b03fe"/><stop offset="0.17" stop-color="#9706fe"/><stop offset="0.33" stop-color="#8b0ffe"/><stop offset="0.48" stop-color="#781dfe"/><stop offset="0.64" stop-color="#5c32fe"/><stop offset="0.8" stop-color="#394cfe"/><stop offset="0.95" stop-color="#0e6cfe"/><stop offset="1" stop-color="#0077fe"/></linearGradient></defs><path class="cls-1" d="M192.19,92.19H184.8a85.12,85.12,0,0,0-77-77V7.81a7.81,7.81,0,0,0-15.62,0V15.2a85.12,85.12,0,0,0-77,77H7.81a7.81,7.81,0,0,0,0,15.62H15.2a85.12,85.12,0,0,0,77,77v7.39a7.81,7.81,0,0,0,15.62,0V184.8a85.12,85.12,0,0,0,77-77h7.39a7.81,7.81,0,0,0,0-15.62ZM162.5,107.81h6.59a69.67,69.67,0,0,1-61.28,61.28V162.5a7.81,7.81,0,0,0-15.62,0v6.59a69.67,69.67,0,0,1-61.28-61.28H37.5a7.81,7.81,0,0,0,0-15.62H30.91A69.67,69.67,0,0,1,92.19,30.91V37.5a7.81,7.81,0,0,0,15.62,0V30.91a69.67,69.67,0,0,1,61.28,61.28H162.5a7.81,7.81,0,0,0,0,15.62ZM100,76.56A23.44,23.44,0,1,0,123.44,100,23.47,23.47,0,0,0,100,76.56Zm0,31.25a7.81,7.81,0,1,1,7.81-7.81A7.81,7.81,0,0,1,100,107.81Z"/></svg>
         </a>
       </div>
       <h1>Custom Elements Locator</h1>
@@ -60,6 +99,7 @@ class CustomElementsLocator extends LitElement {
                     </li>
                   `)}
               </ul>
+              <share-element .domain="${this.host}"></share-element>
             `
           : html`<p>No custom elements found!</p>`
         : html`<p>Loading...</p>`

src/share-element.js

@@ -0,0 +1,53 @@
+import {LitElement, html, css} from 'lit-element';
+
+class ShareElement extends LitElement {
+
+    static get properties() {
+        return {
+            locatorUrl : {type: String},
+            domain : {type: String},
+        }
+    }
+
+    constructor() {
+        super();
+        this.locatorUrl = encodeURI("https://chrome.google.com/webstore/detail/custom-elements-locator/eccplgjbdhhakefbjfibfhocbmjpkafc");
+    }
+
+    render() {
+        const tweetText = encodeURI(`I just found some custom-elements on ${this.domain} using locator!`);
+        return html`
+            <div class="share">
+                <img alt="Share icon" class="icon" src="./share.svg"/>
+                <span>
+                    <a href="https://twitter.com/intent/tweet?text=${tweetText}&url=${this.locatorUrl}&hashtags=webcomponents,webcomponentsinthewild&via=OpenWc" target="_blank">Share your findings on Twitter!</a>
+                </span>
+            </div>
+        `;
+    }
+
+    static get styles() {
+        return css`
+      :host {
+        margin-top: 1em;
+        width: 100%;
+        border: 1px;
+        justify-content: center;
+        display: flex;
+        text-align: left;
+      }
+
+      img{
+        vertical-align: middle;
+      }
+
+      a {
+        border-left: 5px;
+        color: black;
+        font-size: 14px;
+      }
+    `
+    }
+}
+
+customElements.define('share-element', ShareElement);

src/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>