├── README.md ├── background.js ├── favicon-32x32.png ├── icon-128x128.png ├── icon-256x256.png ├── manifest.json ├── package.json ├── popup.html └── popup.js /README.md: -------------------------------------------------------------------------------- 1 | # Bundlephobia Web Extension 2 | 3 | This is a web extension that wraps the super awesome tool, **Bundlephobia(https://bundlephobia.com/)**. You can check the size of a package directly in your tab, without the need to open a new one. The extension is available when viewing packages on **github** or **npmjs**. It's easier than ever! 4 | 5 | Checkout the video below: 6 | 7 | ![](https://i.imgur.com/3rRHD2L.gif) 8 | 9 | ## How to get it 10 | You can install it via the Chrome Web Store link https://chrome.google.com/webstore/detail/bundlephobia-web-extension/dliifhggbnajibohfjcpiedlfjmoneko or download the crx file manually from releases. 11 | 12 | ## Usage 13 | Simply navigate to a certain repo either on github or on npmjs and click on the icon in your browser bar. 14 | 15 | A popup should appear with your results. 16 | 17 | ## Credits 18 | This could've not been made without the work of Shubham Kanodia (https://github.com/pastelsky) who created Bundlephobia. Such a great tool! Thank you! 19 | 20 | ## Only github and npmjs? 21 | Well, yarn reports the size already. I was thinking to add gitlab and bitbucket maybe? Let me know if these are of interest, and as always feel free to raise issues where needed. -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | chrome.runtime.onInstalled.addListener(function() { 2 | chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { 3 | chrome.declarativeContent.onPageChanged.addRules([{ 4 | conditions: [ 5 | new chrome.declarativeContent.PageStateMatcher({ 6 | pageUrl: { 7 | urlContains: 'npmjs.com/package/' 8 | }, 9 | }), 10 | new chrome.declarativeContent.PageStateMatcher({ 11 | pageUrl: { 12 | urlContains: 'github.com' 13 | }, 14 | }) 15 | ], 16 | actions: [ 17 | new chrome.declarativeContent.ShowPageAction() 18 | ] 19 | }]); 20 | }); 21 | }); -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristianbote/bundlephobia-extension/f527d54dbba5f1dfd12ebbea7d37c3bb8a7c6e24/favicon-32x32.png -------------------------------------------------------------------------------- /icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristianbote/bundlephobia-extension/f527d54dbba5f1dfd12ebbea7d37c3bb8a7c6e24/icon-128x128.png -------------------------------------------------------------------------------- /icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristianbote/bundlephobia-extension/f527d54dbba5f1dfd12ebbea7d37c3bb8a7c6e24/icon-256x256.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Bundlephobia Web Extension", 3 | "version": "1.0", 4 | "description": "Bundlephobia extension to check the size of a package.", 5 | "manifest_version": 2, 6 | "background": { 7 | "scripts": [ 8 | "background.js" 9 | ], 10 | "persistent": false 11 | }, 12 | "page_action": { 13 | "default_popup": "popup.html", 14 | "default_icon": "favicon-32x32.png" 15 | }, 16 | "permissions": [ 17 | "activeTab", 18 | "declarativeContent" 19 | ], 20 | "icons": { 21 | "32": "favicon-32x32.png", 22 | "256": "icon-256x256.png" 23 | } 24 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bundlephobia-extension", 3 | "version": "1.0.0", 4 | "description": "Bundlephobia web extension to easily check the size of a package", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "Cristian Bote (https://github.com/cristianbote)", 11 | "license": "ISC", 12 | "homepage": "https://github.com/cristianbote/bundlephobia-extension", 13 | "repository": { 14 | "type" : "git", 15 | "url" : "https://github.com/cristianbote/bundlephobia-extension" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bundlephobia 5 | 72 | 73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /popup.js: -------------------------------------------------------------------------------- 1 | const getPackageName = url => url.split('/').filter(Boolean).slice(0, 4).slice(-1); 2 | const getBundlephobiaUrl = name => `https://bundlephobia.com/result?p=${name}&src=bundlephobia-extension`; 3 | const getIframe = () => document.querySelector('iframe'); 4 | 5 | chrome.tabs.query({ 6 | active: true, 7 | currentWindow: true 8 | }, ([currentTab]) => { 9 | const url = currentTab.url; 10 | const packageName = getPackageName(url); 11 | const iframe = getIframe(); 12 | 13 | iframe.onload = () => { 14 | document.body.className = ""; 15 | iframe.onload = null; 16 | }; 17 | 18 | iframe.src = getBundlephobiaUrl(packageName); 19 | }); 20 | --------------------------------------------------------------------------------