feat: support www.npmjs.com

src/index.js

@@ -189,6 +189,131 @@ class CrateProvider extends Provider {
   }
 }
 
+class NpmProvider extends Provider {
+  constructor(props) {
+    super(props);
+    this.trigger();
+  }
+
+  trigger() {
+    if (window.location.href === 'https://www.npmjs.com/') {
+      this.createFirstLoadObserver();
+    }
+    this.createObserver();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async getSearchedResult() {
+    return fetch(window.location.href, {
+      headers: {
+        'x-spiferack': '1',
+      },
+      method: 'GET',
+      credentials: 'include',
+    }).then(async response => {
+      if (!response.ok) {
+        return null;
+      }
+
+      return response.json();
+    });
+  }
+
+  injectGithubData(packageEls) {
+    this.getSearchedResult().then(async searchResult => {
+      if (!searchResult || !searchResult.objects) {
+        return;
+      }
+      searchResult.objects.forEach((item, index) => {
+        const { repository, npm } = item.package.links;
+        const detailUrl = new URL(npm).pathname;
+        const packageEl = packageEls[index];
+        if (!packageEl) {
+          return;
+        }
+        const pkg = new Package(detailUrl, {
+          el: packageEl,
+          detailUrl,
+        });
+        pkg.repoUrl = repository;
+        this.pkgs.set(pkg.name, pkg);
+
+        const options = {
+          getGithubData(repoUrl) {
+            return getGithubRepoData(repoUrl, pkg.el);
+          },
+        };
+        pkg.el.style.position = 'relative';
+        if (pkg.repoUrl) {
+          const repoComponent = new GithubRepository(options);
+          repoComponent.render(pkg.el, {
+            url: pkg.repoUrl,
+            starCount: '',
+            forkCount: '',
+          });
+        }
+      });
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  createFirstLoadObserver() {
+    const config = { childList: true, subtree: true };
+
+    const callback = mutationList => {
+      mutationList.forEach(mutation => {
+        const { length } = mutation.addedNodes;
+        if (length === 0 || length !== 1) {
+          return;
+        }
+        if (mutation.target && mutation.target.getAttribute('id') !== 'main') {
+          return;
+        }
+        const node = mutation.addedNodes[0];
+        if (!node.classList.contains('center')) {
+          return;
+        }
+
+        const packageEls = node.querySelectorAll('section');
+        this.injectGithubData(packageEls);
+      });
+    };
+
+    const observer = new MutationObserver(callback);
+    const target = document.body;
+    observer.observe(target, config);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  createObserver() {
+    const config = { childList: true, subtree: true };
+
+    const callback = mutationList => {
+      const pkgEls = [];
+      mutationList.forEach(mutation => {
+        const { length } = mutation.addedNodes;
+        if (length === 0 || length !== 1) {
+          return;
+        }
+        const node = mutation.addedNodes[0];
+        if (
+          !(node.tagName === 'SECTION') &&
+          !node.parentElement.classList.contains('center')
+        ) {
+          return;
+        }
+        pkgEls.push(node);
+      });
+
+      this.injectGithubData(pkgEls);
+    };
+
+    const observer = new MutationObserver(callback);
+    const target = document.getElementById('main');
+    observer.observe(target, config);
+  }
+}
+
 function convertRepoData(repoData) {
   const {
     forkCount,
@@ -294,10 +419,12 @@ function observeRepoElement() {
 let provider;
 
 function createProvider() {
-  if (location.host === 'pypi.org') {
+  if (location.hostname === 'pypi.org') {
     return new PypiProvider('#content .left-layout__main ul.unstyled')
-  } else if (location.host === 'crates.io') {
+  } else if (location.hostname === 'crates.io') {
     return new CrateProvider('[class^=_crate-row_]')
+  } else if (location.hostname === 'www.npmjs.com') {
+    return new NpmProvider('')
   }
 }
 

src/manifest.json

@@ -5,7 +5,7 @@
   "version": "1.2.1",
   "content_scripts": [
     {
-      "matches": ["*://pypi.org/search/?*", "*://crates.io/search*"],
+      "matches": ["*://pypi.org/search/?*", "*://crates.io/search*", "*://www.npmjs.com/*"],
       "css": ["assets/styles.css"],
       "js": ["index.js"]
     }