Clever Geek Handbook

Writing your plugin for VueJS. How to transform a VueJS project into a browser extension?



Introduction



In this article, we will write our own plugin for VueJS projects , which transforms the project into a browser extension. Let's learn how to change webpack build rules and generate additional file and folder structure.



, . , , . 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