jsdelivr / extension-chrome Goto Github PK

• Improve Readme with more details and screenshots
• Add the addon under Tools on the main site
• Add a tooltip to the main site announcing it
• Write a blog announcement

This is a discussion on jsDelivr Extension features and how we can implement it.

Features

• Provide a CDN link on GitHub and NPM pages
• Provide an option to download ZIP file on GitHub page

Implementation

Feature 1: CDN link on GitHub repository

To form a project's CDN link (https://cdn.jsdelivr.net/npm/package@version/file) we need 3 parameters:

• package
• version
• file

Proposal 1: Get package name from repository URL

GitHub repository URL has below patterns:

• /:user/:repo
• /:org/:repo

We can assume that a repository's package name would be same as repository's name and evaluate it from URL.

Example:
For jQuery's GitHub repository with URL - https://github.com/jquery/jquery; its package name would be jquery.

Problems
This proposal fails for scoped package names and when package name differ from their repository name.

Example 1:
For Slick Carousel's GitHub repository with URL - https://github.com/kenwheeler/slick; we would evaluate its package name as slick.
But its name defined in package.json file is slick-carousel.

Example 2:
For a scoped package like - @sindresorhus/class-names; we won't be able to correctly evaluate its package name from its GitHub URL - https://github.com/sindresorhus/class-names

Conclusion: Not a good approach.

Proposal 2: Get package name by fetching repository's package.json file from jsDelivr CDN

We can fetch repository's package.json file from CDN with URL - https://cdn.jsdelivr.net/gh/:user/:repo@:version/package.json, for which we will require user, repo and version. We can get user and repo from URL, but not version parameter, so we will have to call an API to get version and then fetch package.json file.

The steps will be:
Step 1: Get version from v1/package/gh/:user/:repo API
Step 2: Fetch package.json file
Step 3: Read name, version and default file name from package.json file
Step 4: Generate a CDN URL

And if a user wants a specific version of project from GitHub's Release tags, we can skip Step 1 and get version from its GitHub URL.

Example:
For Slick Carousel version 1.5.8, its GitHub URL is - https://github.com/kenwheeler/slick/tree/1.5.8.
From this URL we can evaluate version parameter to be 1.5.8.

Proposal 3: Get package name by fetching repository's package.json file from GitHub repository

We can fetch a RAW package.json file from GitHub repository itself.

The steps will be:
Step 1: Fetch RAW package.json file from https://raw.githubusercontent.com/:user/:repo/master/package.json file
Step 2: Read name, version and default file name from package.json file
Step 3: Generate a CDN URL

And if a user wants a specific version of project from GitHub's Release tags, we can get version from its GitHub URL and fetch its package.json file.

Example:
For Slick Carousel version 1.5.8, its GitHub URL is - https://github.com/kenwheeler/slick/tree/1.5.8.
And its RAW package.json file URL will be - https://raw.githubusercontent.com/kenwheeler/slick/1.5.8/package.json.

Question: Proposal 2 and 3 provides us with default file name as well. So should we use it and rename it with minified file name convention or call jsDelivr API (/package/npm/:name@:version/:structure?) to get the default file name?

Note: Both Proposal 2 and 3 fails for repositories that use Lerna tool. Popular repositories using Lerna: React, Babel.
We have to think for an approach to handle such scenario.

Feature 2: CDN link on NPM

To form a project's CDN link (https://cdn.jsdelivr.net/npm/package@version/file) we need 3 parameters:

• package
• version
• file

Proposal: Get required parameters from NPM URL and HTML page

We can get package name from URL and version from sidebar under "version" heading.
And then get default file name from jsDelivr API - /package/npm/:name@:version/:structure?.

Feature 3: Download ZIP link on GitHub Repository

To generate a project's download link (https://registry.npmjs.org/package/-/package-version.tgz) we need 2 parameters:

• package
• version

We can re-use package and version parameters which we got while generating CDN link from Feature 1.
And then generate a download link.

The difference between this link and GitHub's own download link is that it will not have Git instance.

https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

@dutiyesh Please check if you can do this.