Wie wird eine JavaScript-Quellkartendatei in eine Firefox-WebExtension eingebunden?

Question

Beim Versuch, eine Bibliothek mit einer Quellzuordnung innerhalb einer WebExtension zu verwenden, tritt dieser Fehler auf.

Source map error: TypeError: NetworkError when attempting to fetch resource. 
Resource URL: moz-extension://090d55cc-e9cf-4627-9511-ce49ed5b54c8/source.js 
Source Map URL: source.map 

Nach MDN's How to - "Use a Source Map",

Sie einen Kommentar am Ende der Datei setzen müssen.

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map 

Bei Arbeiten an einem Firefox WebExtension mit lokalen Kopien von externen Bibliotheken (wie für die Sicherheit wird empfohlen, und wie für die Geschwindigkeit und vorhersagbare Verfügbarkeit gewünscht wird, und das notwendig sein kann, wenn die Bibliothek selbst geschrieben ist und Sie Sie haben keinen Zugriff auf CDN-Netzwerke oder die CDN-Version muss angepasst werden usw.). Dies schlägt fehl.

// At the bottom of source.js 
//# sourceMappingURL=source.map 

Da alle Erweiterung URI leben in einem Browser-Profil irgendwo und muss explizit mit dem entsprechenden absoluten Pfad auf einem UUID basiert vorangestellt werden, die zufällig bei jedem Durchlauf des WebExtension erzeugt wird. Daher müssten Sie Folgendes dynamisch angeben.

// At the bottom of source.js 
//# sourceMappingURL=moz-extension://090d55cc-e9cf-4627-9511-ce49ed5b54c8/source.map 

Der einzige Weg, den Weg zu bekommen, ist zur Laufzeit durch browser.runtime.getURL() Aufruf, die nicht verwendet werden kann - entweder inline oder vorher mit Ergebnis gespeichert auf eine Variable mit dem Namen hier zugreifen - denn dies ist ein Kommentar und Kommentare werden ignoriert.

GENIUS Mechanismus zum Angeben einer Map-Datei. Nicht!

Wie kann dies erreicht werden? Oder kann nur bestätigt werden, dass es nicht funktioniert? Gibt es eine andere Technik? Ist das Teil einer W3C-Spezifikation Working Group? Wurde dies überhaupt diskutiert oder erwogen? Die Suche ergab keine relevanten Links.

Answer 1

Auch wenn Sie Ihre Erweiterungs-ID während der Entwicklung nicht manuell festlegen müssen, empfehle ich Ihnen, dies zu tun, da einige Speicher-API-Methoden nicht nur mit der zufälligen internen temporären UUID verfügbar sind.

Wie auch immer, etwas scheint mit Ihren Quellkartendateien nicht in Ordnung zu sein. Wenn Sie Webpack verwenden, sollte diese einfache Konfiguration funktionieren.

webpack.config.dev.js

output: { 
    sourceMapFilename: '[name].map.js', 
    filename: '[name].js', 
    path: path.resolve(__dirname, `your_output_dir`) 
}, 

devtool: 'cheap-module-source-map' 

Devtools debugging tab

Auch, wenn Sie Ihre Erweiterung interne UUID in die Firefox adrress Bar einfügen, werden Sie Ihre Erweiterungsdateien mit Quellen Karten bekommen. Zum Beispiel:

moz-extension://7c26e712-c8ac-41ef-b074-500f40601ab2/