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

@@ -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()],
   });

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"
   },

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);
+});

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');
 });

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": {

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": {