Я использую vue-cli 3.5.1 для моего расширения Chrome.Вот мой файл vue.config.js:
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";`
}
}
}
}
Все работает в режиме «разработки», но не в режиме «производства».
Я думаю, что проблема в файле background.js.Это не выполняется правильно.Вы можете посмотреть файл ниже.
Кажется, что метод fe77 никогда не выполняется.Я поместил в нее журнал консоли, а в консоли браузера ничего не было.Также я заменил содержимое скомпилированного background.js на сырой код из моей папки src, и все заработало.Нет ошибокЯ пытался решить эту проблему в Google, но это не повезло, так как речь идет не о написании расширений Chrome с помощью vue cli 3 ... Любая помощь будет принята с благодарностью.
Мой вывод background.js в производственном режиме():
(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
ожидается: background.js должен работать как в режиме разработки, так и в режиме производства.актуально: background.js работает только в режиме разработки
UPD1 Это мой 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
}