Clever Geek Handbook

Escribiendo su complemento para VueJS. ¿Cómo transformar un proyecto de VueJS en una extensión de navegador?



Introducción



En este artículo, escribiremos nuestro propio complemento para proyectos de VueJS , que transforma el proyecto en una extensión de navegador. Aprendamos a cambiar las reglas de compilación de paquetes web y a generar una estructura adicional de archivos y carpetas.



, . , , . VueJS. vue-cli VueJS . . validauto.ru Google Chrome, Mozilla Firefox Microsoft Edge " | (validauto.ru)"



vue-cli



vue-cli-plugin-simple-extension. vue-cli-plugin npm vue add simple-extension.

package 



npm init




├── README.md
├── generator/ 
        ├── template/   #   
        └── index.js     # 
├── index.js             #   
└── package.json


. template generator. src.



template/
└── extension/ 
        ├── background/
         |      ├── background.html
         |      └── background.js
        ├── content/
         |      └── content.js
        └── manifest.json


content.js



-. -, . .



background.js



. content.js.



manifest.json



{
  "author": "",
  "name": "",
  "description": "",
  "version": "1.0",
  "minimum_chrome_version": "26.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html"
  },
  "background": {
    "page": "background.html",
    "persistent": true
  },
  "icons" : {},
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "content_security_policy": "script-src 'self'; object-src 'self'",
  "web_accessible_resources": [
  ],
  "optional_permissions": [],
  "permissions": []
}


manifest.json , . "default_popup": "index.html" index.html . Vue , - public.



generator/index.js. api.render('./template') . 



module.exports = api => {
    api.render('./template');
};


webpack. index.js 



const CopyPlugin = require('copy-webpack-plugin');

module.exports = (api, options) => {
    api.chainWebpack((config) => {
        config
            .entry('content')
            .add('./src/extension/content/content.js');
        config
            .entry('background')
            .add('./src/extension/background/background.js');
        config.output.filename('[name].js');
    });

    api.configureWebpack((config) => {
        // No need for splitting
        config.optimization = {
            splitChunks: false,
        };
        config.plugins = config.plugins.concat(
            new CopyPlugin([
                { from: 'src/extension/background/background.html', to: 'background.html' },
                { from: 'src/extension/manifest.json', to: 'manifest.json', force: true },
            ]),
        );
    });
};


entry content.js background.js. manifest.json background.html dist . copy-webpack-plugin. 



npm install copy-webpack-plugin --save-dev


. api.extendPackage generator/index.js.



module.exports = api => {
    api.extendPackage({
        devDependencies: {
            'copy-webpack-plugin': '^5.1.1',
        },
    });
    ...
};




npm git . package vue add simple-extension. : npm. 



npm install [   ] --save-dev


, . 



vue add simple-extension


, 



npm run build


npm 



vue add simple-extension


dist Google Chrome Firefox. , !





, VueJS . VueJS . , webpack .







More articles:


All Articles