Highlight all custom elements on a page

.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 4
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

README.md

@@ -0,0 +1,39 @@
+# Chrome WebComponents
+
+![Banner](https://cloud.githubusercontent.com/assets/398893/3009132/cd9cc212-dee8-11e3-8c2b-867857a32cdf.png)
+
+> Google Chrome extension to identify all Custom Elements used on a site.
+
+## Install
+
+[![Screenshot](https://cloud.githubusercontent.com/assets/398893/3009122/cdf4bf2c-dee7-11e3-95d7-14da0cd79171.png)](https://chrome.google.com/webstore/detail/web-components/filcobblndaenakhejinpjdblekilpgn)
+
+## Roadmap
+
+- [x] Show all Custom Elements used on a site
+- [ ] Detect if a site is using Polymer or X-Tag
+- [ ] Identify other Web Component's functionalities (e.g. Shadow DOM, HTML Imports, etc)
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## Team
+
+This extension was made with love by these guys and a bunch of awesome [contributors](https://github.com/webcomponents/chrome-webcomponents/graphs/contributors).
+
+[![Zeno Rocha](https://2.gravatar.com/avatar/e190023b66e2b8aa73a842b106920c93)](https://github.com/zenorocha) | [![Eric Bidelman](https://2.gravatar.com/avatar/e7948aac7c52b26470be80311873a398)](https://github.com/ebidel)
+--- | --- | --- | --- | ---
+[Zeno Rocha](https://github.com/zenorocha) | [Eric Bidelman](https://github.com/ebidel)
+
+## History
+
+For detailed changelog, check [Releases](https://github.com/webcomponents/chrome-webcomponents/releases).
+
+## License
+
+[MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org

js/background.js

@@ -0,0 +1,18 @@
+'use strict';
+
+chrome.runtime.onConnect.addListener(function(port) {
+    // Listens to messages from content.js
+    port.onMessage.addListener(function(msg) {
+        // Shows the icon if there's a custom element
+        if (msg.hasElements) {
+            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+                chrome.pageAction.show(tabs[0].id);
+            });
+        }
+    });
+
+    // Sends a message when the icon is clicked
+    chrome.pageAction.onClicked.addListener(function(tab) {
+        port.postMessage({open: true});
+    });
+});

js/content.js

@@ -0,0 +1,32 @@
+'use strict';
+
+// Opens a port to communicate messages
+var port = chrome.runtime.connect({name: "channel"});
+
+// Filters all custom elements in the DOM
+var allElements = document.all;
+
+allElements = Array.prototype.slice.call(allElements).filter(function(el) {
+    return el.localName.indexOf('-') != -1 || el.getAttribute('is');
+});
+
+// Detects if there's a custom element
+var hasElements = false;
+
+if (allElements.length > 0) {
+    hasElements = true;
+}
+
+// Sends a message to background.js
+port.postMessage({hasElements: hasElements});
+
+// Listens to messages from background.js
+port.onMessage.addListener(function(msg) {
+    // Highlights all custom elements on the page
+    if (msg.open) {
+        allElements.forEach(function(element, i) {
+            element.style.outline = '1px dashed red';
+            element.style.backgroundColor = 'rgba(255,0,0,0.1)';
+        });
+    }
+});

manifest.json

@@ -0,0 +1,37 @@
+{
+    "name": "Web Components",
+    "version": "0.1.0",
+    "manifest_version": 2,
+    "description": "Identify all Custom Elements used on a site.",
+    "icons": {
+        "16": "img/logo_16x16.png",
+        "48": "img/logo_48x48.png",
+        "128": "img/logo_128x128.png"
+    },
+    "background": {
+        "scripts": [
+            "js/background.js"
+        ],
+        "persistent": false
+    },
+    "page_action": {
+        "default_icon": {
+            "19": "img/logo_19x19.png",
+            "38": "img/logo_38x38.png"
+        }
+    },
+    "permissions": [
+        "tabs"
+    ],
+    "content_scripts": [{
+        "matches": [
+            "http://*/*",
+            "https://*/*"
+        ],
+        "js": [
+            "js/content.js"
+        ],
+        "run_at": "document_end",
+        "all_frames": false
+    }]
+}