feat: embed Overlay as static view in pypi.org (#80)

Close #75


https://user-images.githubusercontent.com/17686879/236821652-c851b860-f269-41a3-a320-3a9475810591.mp4


Waiting for #79 to be merged.

---------

Co-authored-by: Jossef Harush Kadouri <jossef12@gmail.com>

Author: baruchiro

gulpfile.js

@@ -49,7 +49,7 @@ async function buildCustomElements(outputDirPath) {
 
   // --------------
   // Recompile without customElement: true to extract css
-  let results = await vite.build({
+  const results = await vite.build({
     build: {
       emptyOutDir: false,
       write: false,
@@ -62,14 +62,14 @@ async function buildCustomElements(outputDirPath) {
     plugins: [vue(), svgLoader()],
   });
 
-  let customElementsCssOutputFilePath = path.join(distDirPath, 'custom-elements.css');
+  const customElementsCssOutputFilePath = path.join(distDirPath, 'custom-elements.css');
 
-  let files = results[0].output;
+  const files = results[0].output;
   for (const file of files) {
     if (file.name !== 'style.css') {
       continue;
     }
-    let cssFileContent = file.source;
+    const cssFileContent = file.source;
     await fs.writeFile(customElementsCssOutputFilePath, cssFileContent, 'utf8');
   }
 }
@@ -127,6 +127,7 @@ async function buildBrowserExtension(browserType, version, fileExtension) {
   // content script
   buildContentScript(path.join(srcDirPath, 'content', 'content.stackoverflow.js'), outputDirPath);
   buildContentScript(path.join(srcDirPath, 'content', 'content.npmjs.js'), outputDirPath);
+  buildContentScript(path.join(srcDirPath, 'content', 'content.pypi.js'), outputDirPath);
 
   // --------------
   // background.js
@@ -148,7 +149,7 @@ async function buildBrowserExtension(browserType, version, fileExtension) {
 }
 
 gulp.task('compile', async () => {
-  let version = process.env['BUILD_VERSION'] || DEV_VERSION;
+  const version = process.env['BUILD_VERSION'] || DEV_VERSION;
   console.log(`compiling version ${version}`);
 
   await buildCustomElements(distDirPath);

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 --start-url https://www.npmjs.com/package/node-sass",
+    "__start": "web-ext run --start-url https://pypi.org/project/pandas/ --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.js

@@ -7,6 +7,7 @@ const injectScriptTag = () => {
   (document.head || document.documentElement).appendChild(script);
   console.log('Injected script tag', script);
 
+  // Inject the custom-element css to the head to affect the Teleport part.
   const link = document.createElement('link');
   link.rel = 'stylesheet';
   link.href = browser.runtime.getURL('custom-elements.css');

src/content/content.pypi.js

@@ -0,0 +1,32 @@
+import browser from '../browser';
+import { mountContentScript } from './content';
+import { fetchPackageInfo } from './content-events';
+import { urlParsers } from './registry/python';
+
+const addPackageReport = (packageID) => {
+  const packageReport = document.createElement('overlay-package-report');
+  packageReport.setAttribute('package-type', packageID.type);
+  packageReport.setAttribute('package-name', packageID.name);
+  packageReport.setAttribute('stylesheet-url', browser.runtime.getURL('custom-elements.css'));
+
+  const sidebar = document.querySelector('.vertical-tabs__tabs');
+  const sidebarSection = sidebar?.querySelectorAll('.sidebar-section')[1];
+  if (!sidebarSection) {
+    console.log('No side section found (parent of .github-repo-info)');
+    return;
+  }
+
+  sidebar.insertBefore(packageReport, sidebarSection);
+};
+
+mountContentScript(async () => {
+  console.log('Running content script for PyPI');
+  const packageId = urlParsers[location.hostname.replace('www.', '')]?.(location);
+  if (!packageId) {
+    console.log('No package found', packageId);
+    return;
+  }
+
+  addPackageReport(packageId);
+  fetchPackageInfo(packageId);
+});

src/custom-elements/PackageReport.vue

@@ -94,13 +94,30 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    stylesheetUrl: {
+      type: String,
+      required: false,
+    },
   },
 
   setup(props) {
     const packageInfo = usePackageInfo(props.packageType, props.packageName);
     return { packageInfo };
   },
 
+  mounted() {
+    if (!this.stylesheetUrl) return;
+
+    // Pypi: CSP: The page’s settings blocked the loading of a resource at inline (“style-src”)
+    // We need to load the stylesheet as a file, inside the custom-element.
+    // https://github.com/os-scar/overlay/issues/75#issuecomment-1538224560
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = this.stylesheetUrl;
+    this.$el.parentNode.appendChild(link);
+  },
+
   computed: {
     packageLicense() {
       return this.packageInfo?.licenses?.[0] || '';

src/manifest.chrome.json

@@ -14,6 +14,10 @@
     {
       "matches": ["*://www.npmjs.com/package/*"],
       "js": ["content.npmjs.js"]
+    },
+    {
+      "matches": ["*://pypi.org/project/*"],
+      "js": ["content.pypi.js"]
     }
   ],
   "background": {

src/manifest.firefox.json

@@ -14,6 +14,10 @@
     {
       "matches": ["*://www.npmjs.com/package/*"],
       "js": ["content.npmjs.js"]
+    },
+    {
+      "matches": ["*://pypi.org/project/*"],
+      "js": ["content.pypi.js"]
     }
   ],
   "background": {