Блог

Я создаю веб-расширения с помощью Vue 2 и использую Webpack для сборки. Проблема в том, что в выходных файлах есть Function и innerHTML в нем, и я не знаю, как это предотвратить, и магазин Mozilla не принимает мой плагин, пока они присутствуют в выходных файлах… У него также была проблема с eval() выходными файлами, но я решил ее, добавив node: {global: false} в конфигурацию webpack.

Вот как я монтирую свой App.vue скрипт in content:

 import Vue from 'vue';
import App from './App';
import VTooltip from 'v-tooltip';

Vue.use(VTooltip);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    render: h => h(App),
});
 

Вот мои зависимости от package.json файла:

 "dependencies": {
    "axios": "^0.21.1",
    "v-tooltip": "^2.1.2",
    "vue": "^2.6.10"
},
"devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime-corejs3": "^7.4.0",
    "archiver": "^3.0.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.2",
    "copy-webpack-plugin": "^5.1.1",
    "core-js": "^3.0.1",
    "cross-env": "^5.2.0",
    "css-loader": "^3.4.0",
    "ejs": "^2.6.1",
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.0.1",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^0.9.0",
    "prettier": "^1.17.1",
    "replace-in-file-webpack-plugin": "^1.0.6",
    "sass-loader": "^7.1.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.10",
    "web-ext-types": "^2.1.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.3.10",
    "webpack-extension-reloader": "^1.1.0"
}
 

и вот мое webpack.config.js досье:

 const webpack = require('webpack');
const ejs = require('ejs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtensionReloader = require('webpack-extension-reloader');
const { VueLoaderPlugin } = require('vue-loader');
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
const { version } = require('./package.json');

const config = {
    mode: process.env.NODE_ENV,
    node: {
        global: false,
    },
    context: __dirname   '/src',
    entry: {
        background: './background.js',
        'popup/popup': './popup/index.js',
        content: './content.js',
    },
output: {
    path: __dirname   '/dist',
    filename: '[name].js',
},
resolve: {
    extensions: ['.js', '.vue'],
},
module: {
    rules: [
        {
            test: /.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        },
        {
            test: /.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        {
            test: /.(png|jpg|jpeg|gif|svg|ico)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: '/images/',
                emitFile: true,
                esModule: false,
            },
        },
        {
            test: /.(woff(2)?|ttf|eot|svg)(?v=d .d .d )?$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: '/fonts/',
                emitFile: true,
                esModule: false,
            },
        },
    ],
},
plugins: [
    new webpack.DefinePlugin({
        global: 'window',
    }),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
        filename: '[name].css',
    }),
    new CopyPlugin([
        { from: 'icons', to: 'icons' },
        { from: 'popup/fonts', to: 'popup/fonts' },
        { from: 'popup/images', to: 'popup/images' },
        { from: 'popup/index.html', to: 'popup/popup.html', transform: transformHtml },
        {
            from: 'manifest.json',
            to: 'manifest.json',
        }
    ]),
],
};

function transformHtml(content) {
    return ejs.render(content.toString(), {
        ...process.env,
    });
}

module.exports = config;