feat: add firebase

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.2",
   "icons": {
     "16": "meta_assets/icon16.png",
     "48": "meta_assets/icon48.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-elements-locator",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "content_script.js",
   "scripts": {
@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "firebase": "^7.19.1",
     "lit-element": "^2.2.1",
     "query-selector-shadow-dom": "^0.3.4"
   },

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

@@ -1,12 +1,24 @@
 import {LitElement, html, css} from 'lit-element';
-import './found-element.js'
+import './found-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,15 +27,25 @@ 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.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;
+          chrome.tabs.sendMessage(tabs[0].id, {msg: "init"}, ({customElements, host}) => {
+            if(customElements.length > 0 && !host.includes('localhost')) {
+              // add the host and elements to the db
+              col.doc(host).set({
+                site: host,
+                components: customElements
+              }, { merge: true });
+            }
+
+            this.customElements = customElements;
+            this.host = host;
             this.loaded = true;
           });
         });
@@ -40,7 +62,7 @@ class CustomElementsLocator extends LitElement {
     return html`
       <div>
         <a class="img-href" href="https://open-wc.org" target="_blank">
-          <img src="./owc-logo.svg"/>
+          <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>