vicrazumov · bharathvaj-ganesan · Apr 18, 2021
diff --git 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
@@ -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) => `<a href="${href}"><div class="jsbs-badge-container"><div class="jsbs-badge-label">${name}</div><div class="jsbs-badge-value">${value}</div></div></a>`
-
-  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) =>
+    `<a href="${href}"><div class="jsbs-badge-container"><div class="jsbs-badge-label">${name}</div><div class="jsbs-badge-value">${value}</div></div></a>`;
+
+  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
@@ -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) => `<h3 class="f5 mt2 pt2 mb0 black-50">${header}</h3><p class="fw6 mb3 mt2 truncate black-80 f4"><a class="fw6 mb3 mt2 truncate black-80 f4 link" href="${getBundlephobiaLink(package)}">${value}</a></p>`
-
-  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) =>
+    `<h3 class="f5 mt2 pt2 mb0 black-50">${header}</h3><p class="fw6 mb3 mt2 truncate black-80 f4"><a class="fw6 mb3 mt2 truncate black-80 f4 link" href="${getBundlephobiaLink(
+      package
+    )}">${value}</a></p>`;
+
+  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
@@ -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"
+  ]
+}