diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..407f794 --- /dev/null +++ b/.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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..1e815a0 --- /dev/null +++ b/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 diff --git a/img/logo_128x128.png b/img/logo_128x128.png new file mode 100644 index 0000000..66b19de Binary files /dev/null and b/img/logo_128x128.png differ diff --git a/img/logo_16x16.png b/img/logo_16x16.png new file mode 100644 index 0000000..2c8fe39 Binary files /dev/null and b/img/logo_16x16.png differ diff --git a/img/logo_19x19.png b/img/logo_19x19.png new file mode 100644 index 0000000..b3f4a14 Binary files /dev/null and b/img/logo_19x19.png differ diff --git a/img/logo_38x38.png b/img/logo_38x38.png new file mode 100644 index 0000000..b2ebd7f Binary files /dev/null and b/img/logo_38x38.png differ diff --git a/img/logo_48x48.png b/img/logo_48x48.png new file mode 100644 index 0000000..f4e5538 Binary files /dev/null and b/img/logo_48x48.png differ diff --git a/js/background.js b/js/background.js new file mode 100644 index 0000000..ee35a92 --- /dev/null +++ b/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}); + }); +}); diff --git a/js/content.js b/js/content.js new file mode 100644 index 0000000..5488293 --- /dev/null +++ b/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)'; + }); + } +}); diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..e8d4047 --- /dev/null +++ b/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 + }] +}