モジュールインポートでChrome拡張機能がクラッシュするのはなぜですか？

Question

私はSunCalc.jsコードの単純な使用のリファクタリングに取り組んでいます。当初、私はbackground.jsにSunCalcのコードをすべて持っていましたが（拡張機能も働いていましたが）、SunCalcのコードを別のファイルsuncalc.jsに入れたいと思います。私はthis questionなどMozilla's documentationのためのソリューションを実装しようとしてきた

/* --------------------------------------------------------------------------- 
* SunCalc 
* 
* SunCalc is a tiny BSD-licensed JavaScript library for calculating sun 
* position, sunlight phases (times for sunrise, sunset, dusk, etc.), moon 
* position and lunar phase for the given location and time, created by 
* Vladimir Agafonkin (http://agafonkin.com/en, https://github.com/mourner) as 
* a part of the [SunCalc.net project](http://suncalc.net). 
* 
* Most calculations are based on the formulas given on the site Astronomy 
* Answers and Wikipedia. 
* -------------------------------------------------------------------------*/ 

export var sunModule = (function() { 'use strict'; 

// shortcuts for easier to read formulas 

var PI = Math.PI, 
sin = Math.sin, 
cos = Math.cos, 
tan = Math.tan, 
asin = Math.asin, 
atan = Math.atan2, 
acos = Math.acos, 
rad = PI/180; 

// sun calculations are based on http://aa.quae.nl/en/reken/zonpositie.html formulas 


// date/time constants and conversions 

var dayMs = 1000 * 60 * 60 * 24, 
J1970 = 2440588, 
J2000 = 2451545; 

function toJulian(date) { return date.valueOf()/dayMs - 0.5 + J1970; } 
function fromJulian(j) { return new Date((j + 0.5 - J1970) * dayMs); } 
function toDays(date) { return toJulian(date) - J2000; } 


// general calculations for position 

var e = rad * 23.4397; // obliquity of the Earth 

function rightAscension(l, b) { return atan(sin(l) * cos(e) - tan(b) * sin(e), cos(l)); } 
function declination(l, b) { return asin(sin(b) * cos(e) + cos(b) * sin(e) * sin(l)); } 

function azimuth(H, phi, dec) { return atan(sin(H), cos(H) * sin(phi) - tan(dec) * cos(phi)); } 
function altitude(H, phi, dec) { return asin(sin(phi) * sin(dec) + cos(phi) * cos(dec) * cos(H)); } 

function siderealTime(d, lw) { return rad * (280.16 + 360.9856235 * d) - lw; } 

function astroRefraction(h) { 
    if (h < 0) // the following formula works for positive altitudes only. 
    h = 0; // if h = -0.08901179 a div/0 would occur. 

    // formula 16.4 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998. 
    // 1.02/tan(h + 10.26/(h + 5.10)) h in degrees, result in arc minutes -> converted to rad: 
    return 0.0002967/Math.tan(h + 0.00312536/(h + 0.08901179)); 
} 

// general sun calculations 

function solarMeanAnomaly(d) { return rad * (357.5291 + 0.98560028 * d); } 

function eclipticLongitude(M) { 

    var C = rad * (1.9148 * sin(M) + 0.02 * sin(2 * M) + 0.0003 * sin(3 * M)), // equation of center 
    P = rad * 102.9372; // perihelion of the Earth 

    return M + C + P + PI; 
} 

function sunCoords(d) { 

    var M = solarMeanAnomaly(d), 
    L = eclipticLongitude(M); 

    return { 
     dec: declination(L, 0), 
     ra: rightAscension(L, 0) 
    }; 
} 


var SunCalc = {}; 


// calculates sun position for a given date and latitude/longitude 

SunCalc.getPosition = function (date, lat, lng) { 

    var lw = rad * -lng, 
    phi = rad * lat, 
    d = toDays(date), 

    c = sunCoords(d), 
    H = siderealTime(d, lw) - c.ra; 

    return { 
     azimuth: azimuth(H, phi, c.dec), 
     altitude: altitude(H, phi, c.dec) 
    }; 
}; 


// sun times configuration (angle, morning name, evening name) 

var times = SunCalc.times = [ 
    [-0.833, 'sunrise',  'sunset'  ], 
    [ -0.3, 'sunriseEnd', 'sunsetStart' ], 
    [ -6, 'dawn',   'dusk'  ], 
    [ -12, 'nauticalDawn', 'nauticalDusk'], 
    [ -18, 'nightEnd',  'night'  ], 
    [  6, 'goldenHourEnd', 'goldenHour' ] 
]; 

// adds a custom time to the times config 

SunCalc.addTime = function (angle, riseName, setName) { 
    times.push([angle, riseName, setName]); 
}; 


// calculations for sun times 

var J0 = 0.0009; 

function julianCycle(d, lw) { return Math.round(d - J0 - lw/(2 * PI)); } 

function approxTransit(Ht, lw, n) { return J0 + (Ht + lw)/(2 * PI) + n; } 
function solarTransitJ(ds, M, L) { return J2000 + ds + 0.0053 * sin(M) - 0.0069 * sin(2 * L); } 

function hourAngle(h, phi, d) { return acos((sin(h) - sin(phi) * sin(d))/(cos(phi) * cos(d))); } 

// returns set time for the given sun altitude 
function getSetJ(h, lw, phi, dec, n, M, L) { 

    var w = hourAngle(h, phi, dec), 
    a = approxTransit(w, lw, n); 
    return solarTransitJ(a, M, L); 
} 


// calculates sun times for a given date and latitude/longitude 

SunCalc.getTimes = function (date, lat, lng) { 

    var lw = rad * -lng, 
    phi = rad * lat, 

    d = toDays(date), 
    n = julianCycle(d, lw), 
    ds = approxTransit(0, lw, n), 

    M = solarMeanAnomaly(ds), 
    L = eclipticLongitude(M), 
    dec = declination(L, 0), 

    Jnoon = solarTransitJ(ds, M, L), 

    i, len, time, Jset, Jrise; 


    var result = { 
     solarNoon: fromJulian(Jnoon), 
     nadir: fromJulian(Jnoon - 0.5) 
    }; 

    for (i = 0, len = times.length; i < len; i += 1) { 
     time = times[i]; 

     Jset = getSetJ(time[0] * rad, lw, phi, dec, n, M, L); 
     Jrise = Jnoon - (Jset - Jnoon); 

     result[time[1]] = fromJulian(Jrise); 
     result[time[2]] = fromJulian(Jset); 
    } 

    return result; 
}; 
// export as Node module/AMD module/browser variable 
if (typeof exports === 'object' && typeof module !== 'undefined') module.exports = SunCalc; 
else if (typeof define === 'function' && define.amd) define(SunCalc); 
else window.SunCalc = SunCalc; 

}()); 

、しかし：

import {sunModule as sunModule} from "./suncalc.js"; 

chrome.browserAction.onClicked.addListener(function(tab) { 
    alert("Running."); 
    // Note that this may take a second: 
    navigator.geolocation.getCurrentPosition(wasSuccessful, notSuccessful); 
}); 

function wasSuccessful(position) { 
    alert("Here"); 
    var theDate = new Date(); 
    var times = SunCalc.getTimes(new Date(), position.coords.latitude, position.coords.longitude); 

    if ((theDate <= times.sunrise) || (times.sunset <= theDate)) { 
     alert("It's night."); 
    } else { 
     alert("It's day."); 
    }; 
} 

function notSuccessful(err) { 
    alert("Not Successful."); 
} 

そして、ここではsuncalc.jsモジュールである：ここでは

は新しいbackground.jsですbackground.jsにインポート行を含めると、拡張機能はまったく機能しません。

ありがとうございました！

Answer 1

wxxxxと書いてあるように、ES6モジュラーシステムを使用する場合は、WebpackまたはRollup bundlersを使用する必要があります。 そうしないと、グローバルを使用してこれらのモジュールをリファクタリングし、manifest.jsonをにそれらを置くことができます。

"background": { 
    "scripts": ["background.js", "module1.js", "module2.js"] 
} 

代替の方法は、background.htmlファイルを作成し、<script>タグを経由して、必要なすべてのスクリプト（いつものように、指定することです）。 マニフェストのようになります：

"background": { 
    "page": "background.html" 
}