diff --git a/extension/js/content.js b/extension/js/content.js
index c7e2d8d..9e34653 100644
--- a/extension/js/content.js
+++ b/extension/js/content.js
@@ -1,13 +1,13 @@
-const getBundlephobiaLink = package => `https://bundlephobia.com/result?p=${package}`
+const getBundlephobiaLink = (package) => `https://bundlephobia.com/result?p=${package}`;
+const getBundlephobiaAPI = (package) => `https://bundlephobia.com/api/size?package=${package}`;
+const errorHandler = (err) => console.warn('Retrieving JS bundle size failed', { err });
const sizeTransformer = ({ gzip, size }) => {
- const parse = input => parseFloat(input).toFixed(1)
- const format = input => input > 1048576
- ? `${parse(input / 1048576)} MB` : input > 1024
- ? `${parse(input / 1024)} KB` : `${input} B`
+ const parse = (input) => parseFloat(input).toFixed(1);
+ const format = (input) => (input > 1048576 ? `${parse(input / 1048576)} MB` : input > 1024 ? `${parse(input / 1024)} KB` : `${input} B`);
return {
gzip: format(gzip),
size: format(size),
- }
-}
+ };
+};
diff --git a/extension/js/github-content.js b/extension/js/github-content.js
index 55a7bdb..addd6ba 100644
--- a/extension/js/github-content.js
+++ b/extension/js/github-content.js
@@ -1,36 +1,45 @@
-const getPackageNameFromGithubBody = bodyText => {
- if (!bodyText) return
-
- const npmOrYarnMatch = bodyText.match(/((npm i\w*)( )(-[a-zA-Z-]+\s)*([a-z0-9-\.\_\@\/]+))|(yarn add ([a-z0-9-\.\_\@\/]+))/i)
- return npmOrYarnMatch && (npmOrYarnMatch[7] || npmOrYarnMatch[5])
-}
-
-const githubTransformer = npmPackage => ({ gzip, size }) => {
- const badgeGenerator = (href, name, value) => ``
-
- const article = document.querySelector('article.markdown-body')
- if (!article) return
-
- const link = getBundlephobiaLink(npmPackage)
- const div = document.createElement('div')
- div.className = 'jsbs-github-container'
- div.innerHTML = badgeGenerator(link, 'minified', size)
- + badgeGenerator(link, 'minified + gzipped', gzip)
-
- article.insertBefore(div, article.firstChild)
-}
+const getPackageNameFromGithubBody = (bodyText) => {
+ if (!bodyText) return;
+
+ const npmOrYarnMatch = bodyText.match(/((npm i\w*)( )(-[a-zA-Z-]+\s)*([a-z0-9-\.\_\@\/]+))|(yarn add ([a-z0-9-\.\_\@\/]+))/i);
+ return npmOrYarnMatch && (npmOrYarnMatch[7] || npmOrYarnMatch[5]);
+};
+
+const getGithubPlaceholder = () => {
+ const container = document.querySelector('article.markdown-body');
+ if (container) {
+ return {
+ container: container,
+ nearestElement: container.firstChild,
+ };
+ }
+};
+
+const githubTransformer = (npmPackage, { container, nearestElement }) => ({ gzip, size }) => {
+ const badgeGenerator = (href, name, value) =>
+ ``;
+
+ const link = getBundlephobiaLink(npmPackage);
+ const div = document.createElement('div');
+ div.className = 'jsbs-github-container';
+ div.innerHTML = badgeGenerator(link, 'minified', size) + badgeGenerator(link, 'minified + gzipped', gzip);
+
+ container.insertBefore(div, nearestElement);
+};
const main = () => {
- const package = getPackageNameFromGithubBody(document.querySelector('body').innerHTML)
- if (!package) return
+ const package = getPackageNameFromGithubBody(document.querySelector('body').innerHTML);
+ const placeholder = getGithubPlaceholder();
- const transformer = githubTransformer(package)
+ if (package && placeholder) {
+ const transformer = githubTransformer(package, placeholder);
- fetch(`https://bundlephobia.com/api/size?package=${package}`)
- .then(response => response.json())
- .then(sizeTransformer)
- .then(transformer)
- .catch(err => console.warn('Retrieving JS bundle size failed', { err }))
-}
+ fetch(getBundlephobiaAPI(package))
+ .then((response) => response.json())
+ .then(sizeTransformer)
+ .then(transformer)
+ .catch(errorHandler);
+ }
+};
-main()
+main();
diff --git a/extension/js/npmjs-content.js b/extension/js/npmjs-content.js
index 99d13b0..f4d0471 100644
--- a/extension/js/npmjs-content.js
+++ b/extension/js/npmjs-content.js
@@ -1,41 +1,52 @@
-const getPackageNameFromNpm = url => {
- if (!url) return
-
- const match = url.match(/(https:\/\/www.npmjs.com\/package\/)(.+)/i)
- return match && match[2]
-}
-
-const npmTransformer = npmPackage => ({ gzip, size }) => {
- const npmDivClassList = 'dib w-50 bb b--black-10 pr2'
- const npmInnerHTMLGenerator = (header, package, value) => `
${header}
${value}
`
-
- const sidebarDivs = document.querySelectorAll('div.pr2')
- if (!sidebarDivs.length) return
-
- const lastElement = sidebarDivs[sidebarDivs.length - 1]
- const container = lastElement.parentNode
- const sizeDiv = document.createElement('div')
- container.insertBefore(sizeDiv, lastElement)
- sizeDiv.classList = npmDivClassList
- sizeDiv.innerHTML = npmInnerHTMLGenerator('minified', npmPackage, size)
-
- const gzipDiv = document.createElement('div')
- container.insertBefore(gzipDiv, lastElement)
- gzipDiv.classList = npmDivClassList
- gzipDiv.innerHTML = npmInnerHTMLGenerator('minified + gzipped', npmPackage, gzip)
-}
+const getPackageNameFromNpm = (url) => {
+ if (!url) return;
+
+ const match = url.match(/(https:\/\/www.npmjs.com\/package\/)(.+)/i);
+ return match && match[2];
+};
+
+const getNpmPlaceholder = () => {
+ const sidebarDivs = document.querySelectorAll('div.pr2');
+ const nearestElement = sidebarDivs[sidebarDivs.length - 5];
+ if (nearestElement) {
+ return {
+ container: nearestElement.parentNode,
+ nearestElement,
+ };
+ }
+};
+
+const npmTransformer = (npmPackage, { container, nearestElement }) => ({ gzip, size }) => {
+ const npmDivClassList = 'dib w-50 bb b--black-10 pr2';
+ const npmInnerHTMLGenerator = (header, package, value) =>
+ `${header}
${value}
`;
+
+ const sizeDiv = document.createElement('div');
+ container.insertBefore(sizeDiv, nearestElement);
+ sizeDiv.classList = npmDivClassList;
+ sizeDiv.innerHTML = npmInnerHTMLGenerator('Minified', npmPackage, size);
+
+ const gzipDiv = document.createElement('div');
+ container.insertBefore(gzipDiv, nearestElement);
+ gzipDiv.classList = npmDivClassList;
+ gzipDiv.innerHTML = npmInnerHTMLGenerator('Minified + Gzipped', npmPackage, gzip);
+};
const main = () => {
- const package = getPackageNameFromNpm(window.location.href)
- if (!package) return
+ const package = getPackageNameFromNpm(window.location.href);
+ const placeholder = getNpmPlaceholder();
- const transformer = npmTransformer(package)
+ if (package && placeholder) {
+ const transformer = npmTransformer(package, placeholder);
- fetch(`https://bundlephobia.com/api/size?package=${package}`)
- .then(response => response.json())
- .then(sizeTransformer)
- .then(transformer)
- .catch(err => console.warn('Retrieving JS bundle size failed', { err }))
-}
+ fetch(getBundlephobiaAPI(package))
+ .then((response) => response.json())
+ .then(sizeTransformer)
+ .then(transformer)
+ .catch(errorHandler);
+ }
+};
-main()
+main();
diff --git a/extension/manifest.json b/extension/manifest.json
index 1d91be5..59c957d 100644
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -5,26 +5,35 @@
"description": "Automatically adds javascript bundle size data to npm and github project pages",
"homepage_url": "https://github.com/vicrazumov/js-bundle-size",
"version": "0.1.0",
- "content_scripts": [{
- "css": ["css/style.css"],
- "js": [
- "js/content.js",
- "js/github-content.js"
- ],
- "matches": ["https://github.com/*/*"]
- },
- {
- "css": ["css/style.css"],
- "js": [
- "js/content.js",
- "js/npmjs-content.js"
- ],
- "matches": ["https://www.npmjs.com/package/*"]
- }],
+ "content_scripts": [
+ {
+ "css": [
+ "css/style.css"
+ ],
+ "js": [
+ "js/content.js",
+ "js/github-content.js"
+ ],
+ "matches": [
+ "https://github.com/*/*"
+ ]
+ },
+ {
+ "js": [
+ "js/content.js",
+ "js/npmjs-content.js"
+ ],
+ "matches": [
+ "https://www.npmjs.com/package/*"
+ ]
+ }
+ ],
"icons": {
"16": "/icons/icon16.png",
"48": "icons/icon48.png",
- "128": "icons/icon128.png"
+ "128": "icons/icon128.png"
},
- "permissions": ["https://bundlephobia.com/api/size"]
-}
+ "permissions": [
+ "https://bundlephobia.com/api/size"
+ ]
+}
\ No newline at end of file