Including NPM package into tampermonkey script

Question

I want to create a TamperMonkey script that parses some ABI data from EtherScan.io (See: https://github.com/devedse/DeveEtherscanParser).

I now did some poormans ABI decoding but I found out there's a library to do that: https://github.com/jacogr/ethabi-js

How would I go about including this NPM package into my tampermonkey script?

Answer 1

In my case, I was able to fetch the package at runtime as an ECMAScript module from jsdelivr's CDN at "https://cdn.jsdelivr.net/npm/<packageName>@<version>/+esm".

From there, I could import what I needed from the package via dynamic import and use it just as in node:

// ==UserScript==
// @name         Dynamic Module Import Demo
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Import NPM modules via ESM directly in tampermonkey scripts
// @author       Luke Redmore
// @match        https://*/*
// @license      MIT; https://opensource.org/licenses/MIT
// ==/UserScript==

(async function() {
    'use strict';
    const { v4: uuidv4 } = await import("https://cdn.jsdelivr.net/npm/[email protected]/+esm");
    console.log(uuidv4());
})();

jsdelivr creates these modules with Rollup, which unfortunately fails for https://cdn.jsdelivr.net/npm/ethabi-js/+esm. However, its successor, https://cdn.jsdelivr.net/npm/parity/+esm, seems to bundle fine, but I haven't tried it out in a script.