From 1ad422d41c3ff10a1a41341fbe1b2e8404f06d73 Mon Sep 17 00:00:00 2001
From: "Baruch Odem (Rothkoff)" <baruchiro@gmail.com>
Date: Mon, 15 May 2023 11:37:41 +0300
Subject: [PATCH] feat: embed Overlay as static view in npmjs.com (#79)

Close #74


https://user-images.githubusercontent.com/17686879/236685287-108bddaf-1831-4d7e-be0b-2695a4449137.mp4

Waiting for #78 to be merged.
---
 gulpfile.js                  | 27 ++++++++++++++++-----------
 package.json                 |  2 +-
 src/content/content.npmjs.js | 22 ++++++++++++++++++++++
 src/custom-elements/index.js |  3 +++
 src/manifest.chrome.json     |  4 ++++
 src/manifest.firefox.json    |  4 ++++
 6 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 src/content/content.npmjs.js

diff --git a/gulpfile.js b/gulpfile.js
index 9b2c1d9..f53415a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -87,8 +87,18 @@ async function buildPopup(outputDirPath) {
   });
 }
 
+async function buildContentScript(contentFilePath, outputDirPath) {
+  const bundle = await rollup({
+    input: contentFilePath,
+  });
+  await bundle.write({
+    dir: outputDirPath,
+    format: 'iife',
+  });
+}
+
 async function buildBrowserExtension(browserType, version, fileExtension) {
-  let outputDirPath = path.join(distDirPath, browserType);
+  const outputDirPath = path.join(distDirPath, browserType);
 
   // --------------
   // icons dir
@@ -105,7 +115,7 @@ async function buildBrowserExtension(browserType, version, fileExtension) {
 
   // --------------
   // manifest.json
-  let manifestFilename = `manifest.${browserType}.json`;
+  const manifestFilename = `manifest.${browserType}.json`;
   await gulp
     .src(path.join(srcDirPath, manifestFilename))
     .pipe(rename('manifest.json'))
@@ -114,18 +124,13 @@ async function buildBrowserExtension(browserType, version, fileExtension) {
     .pipe(gulp.dest(outputDirPath));
 
   // --------------
-  // content.stackoverflow.js
-  let bundle = await rollup({
-    input: path.join(srcDirPath, 'content', 'content.stackoverflow.js'),
-  });
-  await bundle.write({
-    file: path.join(outputDirPath, 'content.stackoverflow.js'),
-    format: 'iife',
-  });
+  // content script
+  buildContentScript(path.join(srcDirPath, 'content', 'content.stackoverflow.js'), outputDirPath);
+  buildContentScript(path.join(srcDirPath, 'content', 'content.npmjs.js'), outputDirPath);
 
   // --------------
   // background.js
-  bundle = await rollup({
+  const bundle = await rollup({
     input: path.join(srcDirPath, 'background', 'background.js'),
     plugins: [commonjs(), nodeResolve()],
   });
diff --git a/package.json b/package.json
index d725acf..dfce401 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "lint:fix": "yarn lint --fix",
     "lint:lockfile": "lockfile-lint --path yarn.lock --allowed-hosts npm yarn --validate-https --validate-package-names --validate-integrity --empty-hostname false",
     "lint:firefox": "yarn build && web-ext lint --source-dir ./dist/firefox",
-    "__start": "web-ext run --devtools --start-url https://stackoverflow.com/questions/33527653",
+    "__start": "web-ext run --start-url https://www.npmjs.com/package/node-sass",
     "start:chrome": "yarn __start --source-dir ./dist/chrome --target chromium",
     "start:firefox": "yarn __start --source-dir ./dist/firefox"
   },
diff --git a/src/content/content.npmjs.js b/src/content/content.npmjs.js
new file mode 100644
index 0000000..3996ead
--- /dev/null
+++ b/src/content/content.npmjs.js
@@ -0,0 +1,22 @@
+import { mountContentScript } from './content';
+import { fetchPackageInfo } from './content-events';
+import { urlParsers } from './registry/npm';
+
+const addPackageReport = (packageID) => {
+  const packageReport = document.createElement('overlay-package-report');
+  packageReport.setAttribute('package-type', packageID.type);
+  packageReport.setAttribute('package-name', packageID.name);
+
+  const repository = document.querySelector('#repository');
+  if (repository) {
+    repository.parentElement.insertBefore(packageReport, repository);
+  }
+};
+
+mountContentScript(async () => {
+  const packageId = urlParsers[location.hostname.replace('www.', '')]?.(location);
+  if (!packageId) return;
+
+  addPackageReport(packageId);
+  fetchPackageInfo(packageId);
+});
diff --git a/src/custom-elements/index.js b/src/custom-elements/index.js
index b085085..451dec4 100644
--- a/src/custom-elements/index.js
+++ b/src/custom-elements/index.js
@@ -1,6 +1,7 @@
 import '@webcomponents/custom-elements';
 import { defineCustomElement } from 'vue';
 import Indicator from './Indicator.vue';
+import PackageReport from './PackageReport.vue';
 import { initEventListenersAndStore } from './webapp-events';
 
 initEventListenersAndStore();
@@ -13,6 +14,8 @@ Promise.all(Object.values(modules).map((module) => module())).then((modules) =>
 
   const indicatorCustomElement = defineCustomElement(Indicator);
   customElements.define('overlay-indicator', indicatorCustomElement);
+  const packageReportCustomElement = defineCustomElement(PackageReport);
+  customElements.define('overlay-package-report', packageReportCustomElement);
 
   console.log('Custom element defined');
 });
diff --git a/src/manifest.chrome.json b/src/manifest.chrome.json
index f8c3c9c..23cd2fe 100644
--- a/src/manifest.chrome.json
+++ b/src/manifest.chrome.json
@@ -10,6 +10,10 @@
     {
       "matches": ["*://stackoverflow.com/*"],
       "js": ["content.stackoverflow.js"]
+    },
+    {
+      "matches": ["*://www.npmjs.com/package/*"],
+      "js": ["content.npmjs.js"]
     }
   ],
   "background": {
diff --git a/src/manifest.firefox.json b/src/manifest.firefox.json
index 79460e8..5b52225 100644
--- a/src/manifest.firefox.json
+++ b/src/manifest.firefox.json
@@ -10,6 +10,10 @@
     {
       "matches": ["*://stackoverflow.com/*"],
       "js": ["content.stackoverflow.js"]
+    },
+    {
+      "matches": ["*://www.npmjs.com/package/*"],
+      "js": ["content.npmjs.js"]
     }
   ],
   "background": {