javascript - 为什么模块导入会导致 Chrome 扩展程序崩溃？

Question

我正在致力于重构 SunCalc.js 代码的简单使用。最初，我的 background.js 中有所有 SunCalc 代码(并且扩展有效)，但我想将 SunCalc 代码放在单独的文件 suncalc.js 中>。

这是新的 background.js:

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 模块:

/* ---------------------------------------------------------------------------
 * 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;

}());

我一直在尝试实现 this question 的解决方案以及Mozilla's documentation ，但每当我在 background.js 中包含导入行时，该扩展就根本不起作用。

感谢您的帮助!

Answer 1

正如wOxxOm所说，如果你想使用ES6模块化系统，你必须使用Webpack或Rollup bundler 。否则，您可以重构这些模块以使用全局变量并将它们放入manifest.json中:

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

另一种方法是创建 background.html 文件并指定所有需要的脚本(像往常一样，通过 <script> 标记)。 list 将类似于:

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