Menulis plugin Anda untuk VueJS. Bagaimana cara mengubah proyek VueJS menjadi ekstensi browser?

pengantar

Pada artikel ini, kami akan menulis plugin kami sendiri untuk proyek VueJS , yang mengubah proyek menjadi ekstensi browser. Mari pelajari cara mengubah aturan build webpack dan membuat file dan struktur folder tambahan.

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

• https://github.com/markovroma/vue-cli-plugin-browser-extension
• https://www.npmjs.com/package/vue-cli-plugin-simple-extension