Merge pull request #4 from jorgecasar/enable-icon-on-found

feat: set greyscale icon when not found Web Components

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.0",
+  "version": "1.1",
   "icons": {
     "16": "meta_assets/icon16.png",
     "48": "meta_assets/icon48.png",
@@ -18,8 +18,11 @@
       "js": ["dist/content_script.js"]
     }
   ],
+  "background": {
+    "scripts": ["dist/background_script.js"]
+  },
   "permissions": [
     "activeTab",
     "background"
    ]
-}
+}

package.json

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

rollup.config.js

@@ -27,4 +27,14 @@ export default [{
   plugins: [
     resolve()
   ]
-}];
+},
+{
+  input: './src/background_script.js',
+  output: {
+    dir: 'dist',
+    format: 'iife',
+  },
+  plugins: [
+    resolve()
+  ]
+}];

src/background_script.js

@@ -0,0 +1,31 @@
+const metaAssets = '../meta_assets/';
+var selectedId = -1;
+
+function getIconPath(response) {
+	const suffix = response.length ? '' : '_without';
+	return `${metaAssets}icon${suffix}.png`;
+}
+
+function updateIcon() {
+	chrome.tabs.sendMessage(selectedId, {msg: "findAll"}, (response = []) => {
+		chrome.browserAction.setIcon({
+			path: getIconPath(response),
+			tabId: selectedId
+		});
+	});
+}
+
+chrome.tabs.onUpdated.addListener(function(tabId, props) {
+  if (props.status == "complete" && tabId == selectedId)
+    updateIcon();
+});
+
+chrome.tabs.onSelectionChanged.addListener(function(tabId, props) {
+  selectedId = tabId;
+  updateIcon();
+});
+
+chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  selectedId = tabs[0].id;
+  updateIcon();
+});

src/content_script.js

@@ -16,20 +16,33 @@ function findAllCustomElements(nodes) {
     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});
+  });
+});
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  if(request.msg === "init") {
+
+  if(request.msg === "findAll") {
     allCustomElements = [];
     findAllCustomElements(document.querySelectorAll('*'));
     sendResponse(allCustomElements)
   }
 
+  if(request.msg === "init") {
+    // Custom elements are already found.
+    // Return cached ones.
+    sendResponse(allCustomElements);
+  }
+
   if(request.msg === "highlight") {
     if(lastElements.length > 0 ) lastElements.forEach(el => el.style.border = 'none');
     const elements = querySelectorAllDeep(request.elementName)
@@ -70,7 +83,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
     elements[index].scrollIntoView();
 
-    window.scrollBy(0, -200); 
+    window.scrollBy(0, -200);
     elements[index].setAttribute( 'style', 'border: dashed 3px blue !important;' );
 
     console.group('Custom Element Locator');