fix: Overlay didn't display "npmjs" pages that do not contain a repos…

…itory element (#149)

fix issue 148.
#148

**content.npmjs.js** - mount Overlay based on h3 element title "install"
instead of repository element.
**utils.js** - if the element is not in the page. reject timeout after
10 seconds.
make bugs like this more easy to detect next time.
**.gitignore** - not pull cache and autogenerated files

---------

Co-authored-by: Baruch Odem (Rothkoff) <[email protected]>

.gitignore

@@ -33,6 +33,7 @@ typings/
 .node_repl_history
 *.tgz
 .yarn-integrity
+.yarn/*
 .env
 .env.test
 .cache

package.json

@@ -64,5 +64,6 @@
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown",
     "{src,tests}/**/*.js": "eslint --fix"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/background/cache.js

@@ -1,7 +1,5 @@
 import LRUCache from 'lru-cache';
-
-const SECOND = 1000;
-const MINUTE = 60 * SECOND;
+import { MINUTE } from '../globals';
 
 const _cache = new LRUCache({
   max: 500,

src/content/content.npmjs.js

@@ -4,18 +4,23 @@ import { mountContentScript, reloadWhenURLChanged } from './content';
 import { fetchPackageInfo } from './content-events';
 import { urlParsers } from './registry/npm';
 
+const CSS_SELECTOR_COLLABORATORS = '#collaborators';
+
 const addPackageReport = async (packageID) => {
   // remove an old package report (if exists)
   const currPackageReport = document.getElementsByTagName(packageReportTagName);
   if (currPackageReport?.length) {
     currPackageReport.item(0).remove();
   }
 
-  const repository = await waitForElement('#repository', document.querySelector('#main'));
+  const collaborators = await waitForElement(CSS_SELECTOR_COLLABORATORS, document.querySelector('#main'));
   const packageReport = document.createElement(packageReportTagName);
   packageReport.setAttribute('package-type', packageID.type);
   packageReport.setAttribute('package-name', packageID.name);
-  repository.parentElement.insertBefore(packageReport, repository);
+
+  const properties = collaborators.parentElement.parentElement;
+  const install = properties.querySelector('p');
+  install.after(packageReport);
 };
 
 const loadPackageInfo = async () => {

src/globals.js

@@ -1,10 +1,13 @@
+export const SECOND = 1000;
+export const MINUTE = 60 * SECOND;
+
 export const advisories = {
   snyk: 'Snyk Advisor',
   depsDev: 'OpenSSF Scorecard',
   socket: 'Socket',
   debricked: 'Debricked',
 };
-export const advisoriesNames = Object.keys(advisories);
 
+export const advisoriesNames = Object.keys(advisories);
 export const indicatorTagName = 'overlay-indicator';
 export const packageReportTagName = 'overlay-package-report';

src/utils/utils.js

@@ -4,8 +4,16 @@
  * @param {Node} target A DOM Node (which may be an Element) within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched.
  *
  */
+import { SECOND } from '../globals';
+
+const waitElementTimeOot = 10 * SECOND;
+
 const waitForElement = (selector, target) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject(new Error('Time out to wait for the element ' + selector));
+    }, waitElementTimeOot);
+
     if (document.querySelector(selector)) {
       return resolve(document.querySelector(selector));
     }