I am using vue-cli 3.5.1 for my chrome extension. Here is my vue.config.js file:

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
function setWebpack() {
  let config = {}
  config.plugins = [
    new ChromeExtensionReloader({
      entries: {
        background: 'background.js'
      }
    })
  ]
  config.entry = {
    background: './src/background.js',
    inpage: './src/inpage.js'
  }
  if (process.env.NODE_ENV === 'development') {
    config.output = {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js'
    }
  }
  return config
}
module.exports = {
  configureWebpack: setWebpack(),
  filenameHashing: process.env.NODE_ENV === 'development',
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    notification: {
      entry: 'src/main.js',
      template: 'public/notification.html',
      filename: 'notification.html'
    }
  },
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/index.scss";`
      }
    }
  }
}

Everything works in 'development' mode, but not in 'production' mode.

I think the problem is in the background.js file. It is not executing correctly. You can look at the file below.

The fe77 method seems to be never executed. I put a console log inside it, and there was nothing in my browser console. Also I replaced the content of compiled background.js with the raw code from my src folder and everything worked. No errors. I have tried to google this problem, but it no luck, since it's not that much about writing chrome extensions with vue cli 3... Any help would be much appreciated.

My background.js output in production mode ():

(function (e) {
  function r(r) {
    for (var n, c, i = r[0], a = r[1], s = r[2], l = 0, p = []; l < i.length; l++) c = i[l], o[c] && p.push(o[c][0]), o[c] = 0;
    for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]);
    f && f(r);
    while (p.length) p.shift()();
    return u.push.apply(u, s || []), t()
  }

  function t() {
    for (var e, r = 0; r < u.length; r++) {
      for (var t = u[r], n = !0, i = 1; i < t.length; i++) {
        var a = t[i];
        0 !== o[a] && (n = !1)
      }
      n && (u.splice(r--, 1), e = c(c.s = t[0]))
    }
    return e
  }

  var n = {}, o = {background: 0}, u = [];

  function c(r) {
    if (n[r]) return n[r].exports;
    var t = n[r] = {i: r, l: !1, exports: {}};
    return e[r].call(t.exports, t, t.exports, c), t.l = !0, t.exports
  }

  c.e = function () {
    return Promise.resolve()
  }, c.m = e, c.c = n, c.d = function (e, r, t) {
    c.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: t})
  }, c.r = function (e) {
    "undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
  }, c.t = function (e, r) {
    if (1 & r && (e = c(e)), 8 & r) return e;
    if (4 & r && "object" === typeof e && e && e.__esModule) return e;
    var t = Object.create(null);
    if (c.r(t), Object.defineProperty(t, "default", {
      enumerable: !0,
      value: e
    }), 2 & r && "string" != typeof e) for (var n in e) c.d(t, n, function (r) {
      return e[r]
    }.bind(null, n));
    return t
  }, c.n = function (e) {
    var r = e && e.__esModule ? function () {
      return e["default"]
    } : function () {
      return e
    };
    return c.d(r, "a", r), r
  }, c.o = function (e, r) {
    return Object.prototype.hasOwnProperty.call(e, r)
  }, c.p = "/";
  var i = window["webpackJsonp"] = window["webpackJsonp"] || [], a = i.push.bind(i);
  i.push = r, i = i.slice();
  for (var s = 0; s < i.length; s++) r(i[s]);
  var f = a;
  u.push(["fe77", "chunk-vendors", "chunk-common"]), t()
})({
  fe77: function (e, r, t) {
    "use strict";
    t.r(r);
    t("cadf"), t("551c"), t("f751"), t("097d");
    var n = {pass: "123123"};
    chrome.runtime.onMessage.addListener(function (e, r, t) {
      var o = r.url || r.tab.url, u = /^chrome-extension/.test(o);
      if (!u) return "getNetAddress" === e.type ? (chrome.storage.local.get("currentNet", function (e) {
        var r = e.currentNet;
        t({type: "netAddress", address: r})
      }), !0) : (chrome.tabs.create({url: chrome.extension.getURL("notification.html"), active: !1}, function (n) {
        chrome.windows.create({tabId: n.id, type: "popup", focused: !0, width: 400, height: 600}, function () {
          e.sender = r, console.log(e), setTimeout(function () {
            chrome.runtime.sendMessage(e, function (e) {
              if (chrome.runtime.lastError) return console.error(chrome.runtime.lastError.message);
              t(e)
            })
          }, 1e3)
        })
      }), !0);
      switch (e.type) {
        case"setState":
          return void (n[e.prop] = e.data);
        case"getState":
          return void t(n[e.prop]);
        default:
          return
      }
    })
  }
});
//# sourceMappingURL=background.js.map

expected: background.js should work in both development and production modes. actual: background.js works only in development mode

UPD1 This is my manifest.json:

{
  "name": "web-wallet",
  "version": "0.1.0",
  "description": "Nerthus web wallet extension",
  "background": {
    "scripts": ["js/background.js"],
    "persistent": false
  },
  "permissions": [
    "activeTab",
    "storage",
    "*://*/",
    "notifications",
    "tabs"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'",
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "logo/16.png",
      "32": "logo/32.png",
      "48": "logo/48.png",
      "128": "logo/128.png"
    }
  },
  "content_scripts": [
    {
      "matches": [
        "file://*/*",
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_end"
    }
  ],
  "web_accessible_resources": [
    "js/inpage.js",
    "backend.js"
  ],
  "manifest_version": 2
}

0 Answers