Add Files tab in npm

npmbrowse.user.js

// ==UserScript==
// @name         NPM Browse Files
// @namespace    https://gist.github.com/HelloWorld017/3a5460ce41db861d4d0f4550289b10c7/
// @version      1.0
// @description  Browse files on npm
// @author       Khinenw
// @match        *://*.npmjs.com/package/*
// @grant        none
// ==/UserScript==

(() => {
	const $ = document.querySelector.bind(document);

	const packageName = $('[class*="package__name___"]');
	if(!packageName) return;

	const tabs = $('[class*="package__root___"] > [class*="tabs__tabs___"]');
	const readmeTab = tabs.querySelector('li');
	const readmeText = readmeTab.querySelector('a');


	const tab = document.createElement('li');
	[...readmeTab.classList]
		.filter(cls => {
			if(cls.includes('yellow')) return false;
			if(cls.includes('Active')) return false;
			return true;
		})
		.forEach(cls => {
			tab.classList.add(cls);
		});

	tab.style.borderColor = '#4caf50';


	const text = document.createElement('a');
	[...readmeText.classList]
		.forEach(cls => {
			text.classList.add(cls);
		});

	text.style.color = '#4caf50';
	text.href = `https://cdn.jsdelivr.net/npm/${packageName.innerText}/`;


	const textContent = document.createElement('span');
	textContent.innerText = 'Files';


	text.appendChild(textContent);
	tab.appendChild(text);
	tabs.appendChild(tab);
})();