WIP: Fix/improve check on ce (#14)

Co-authored-by: Jorge del Casar <jorgecasar@users.noreply.github.com>
* fix: improve check if element is CE

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.4.0",
+  "version": "1.3.0",
   "icons": {
     "16": "meta_assets/icon16.png",
     "48": "meta_assets/icon48.png",
@@ -14,12 +14,9 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "https://*/*"
-      ],
-      "js": [
-        "dist/content_script.js"
-      ]
+      "matches": ["https://*/*"],
+      "js": ["dist/content_script.js"],
+      "run_at": "document_end"
     }
   ],
   "background": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-elements-locator",
-  "version": "1.4.0",
+  "version": "1.3.0",
   "description": "",
   "main": "content_script.js",
   "scripts": {

src/background_script.js

@@ -2,26 +2,27 @@ const metaAssets = '../meta_assets/';
 var selectedId = -1;
 
 function getIconPath(response) {
-	const suffix = response.length ? '' : '_without';
+	const suffix = response ? '' : '_without';
 	return `${metaAssets}icon${suffix}.png`;
 }
 
 function updateIcon() {
-	chrome.tabs.sendMessage(selectedId, {msg: "findAll"}, (response = []) => {
+	chrome.tabs.sendMessage(selectedId, {msg: "findAll"}, (response = false) => {
 		chrome.browserAction.setIcon({
 			path: getIconPath(response),
 			tabId: selectedId
-		});
+		}, (e) => {console.log(e)});
 	});
 }
 
 chrome.tabs.onUpdated.addListener(function(tabId, props) {
-  if (props.status == "complete" && tabId == selectedId)
-    updateIcon();
+  if (props.status == "complete" && tabId == selectedId) {
+		updateIcon();
+	}
 });
 
 chrome.tabs.onSelectionChanged.addListener(function(tabId, props) {
-  selectedId = tabId;
+	selectedId = tabId;
   updateIcon();
 });
 

src/content_script.js

@@ -1,39 +1,54 @@
 import { querySelectorAllDeep } from 'query-selector-shadow-dom';
 
-let allCustomElements = [];
 let lastElements = [];
 let lastElement = '';
 let index = 0;
 
-function isCustomElement(el) {
-  const isAttr = el.getAttribute('is');
-  return el.localName.includes('-') || isAttr && isAttr.includes('-');
-}
-
-function findAllCustomElements(nodes) {
-  for (let i = 0, el; el = nodes[i]; ++i) {
-    if (isCustomElement(el) && el.localName !== 'style' && !allCustomElements.find(ce => ce === el.localName)) {
-      allCustomElements.push(el.localName);
-    }
-
-    if (el.shadowRoot) {
-      findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
-    }
-  }
-}
-
 chrome.runtime.onConnect.addListener(function(port) {
   port.onMessage.addListener(function(msg) {
     port.postMessage({counter: msg.counter+1});
   });
 });
 
+let allCustomElements = [];
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
   if(request.msg === "findAll") {
-    allCustomElements = [];
-    findAllCustomElements(document.querySelectorAll('*'));
-    sendResponse(allCustomElements)
+    const s = document.createElement('script');
+    s.innerHTML = `
+    requestIdleCallback(() => {
+      function isCustomElement(el) {
+        const isAttr = el.getAttribute('is');
+        return customElements.get(el.localName) && el.localName.includes('-') || isAttr && isAttr.includes('-');
+      }
+
+      const allCustomElements = [];
+
+      function findAllCustomElements(nodes) {
+        for (let i = 0, el; el = nodes[i]; ++i) {
+          if (isCustomElement(el) && el.localName !== 'style' && !allCustomElements.find(ce => ce === el.localName)) {
+            allCustomElements.push(el.localName);
+          }
+
+          if (el.shadowRoot) {
+            findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
+          }
+        }
+      }
+
+      findAllCustomElements(document.querySelectorAll('*'));
+      document.dispatchEvent(new CustomEvent('__GET_CUSTOM_ELEMENTS', {
+          detail: allCustomElements
+      }));
+    }, {timeout: 1000});`;
+    document.head.append(s);
+    s.onload = () => s.remove();
+
+    document.addEventListener('__GET_CUSTOM_ELEMENTS', ({detail}) => {
+      allCustomElements = detail;
+      sendResponse(allCustomElements.length > 0);
+    }, {once: true});
+    return true
   }
 
   if(request.msg === "init") {

src/main.js

@@ -11,6 +11,11 @@ firebase.initializeApp({
   projectId: "locator-a6a89",
 });
 
+const denyList = [
+  'localhost',
+  '127.0.0.1',
+]
+
 const col = firebase.firestore().collection("sites");
 
 class CustomElementsLocator extends LitElement {
@@ -36,7 +41,7 @@ class CustomElementsLocator extends LitElement {
   firstUpdated() {
     chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
       chrome.tabs.sendMessage(tabs[0].id, {msg: "init"}, ({customElements, host}) => {
-        if(!host.includes('localhost')) {
+        if(!denyList.includes(host)) {
 
           col.doc(host).get().then((doc) => {
             // doc exists, but doesnt use CE anymore -> delete
@@ -78,7 +83,7 @@ class CustomElementsLocator extends LitElement {
   render() {
     return html`
       <div>
-        <a class="img-href" href="https://wild.open-wc.org" target="_blank">
+        <a class="img-href" href="https://www.open-wc.org" rel="noopener noreferrer" 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>