前言

浏览器插件是前端领域比较小众的应用范畴，我们所说的浏览器插件指的就是Chrome 插件。在Chrome 插件市场上有非常多有趣又实用的Chrome 插件，比如octotree(显示github代码树)、Adblock Plus(拦截广告)等。

目前笔者接触Chrome 插件开发也有一年时间，最初团队中使用原生js+jquery的方式开发插件，后来考虑使用Vue重构插件，主要原因在于:

• 插件的功能日益增多
• 原生开发效率低下
• 没有模块，不易维护
• 团队技术栈偏Vue

因此本篇文章旨在分享笔者在基于vue-cli开发浏览器插件的工程化实践经验以及部分功能的思考与实现，在整理Vue开发插件的有关知识的同时提供给想尝试浏览器插件开发的开发者Vue开发插件的一点思路。如果你还未熟悉浏览器插件开发，请先借助这篇文章了解插件开发的基础知识(本篇文章默认你已认真读完)，再进行Vue开发插件的实践。

项目工程化

改造vue.config.js

插件中必不可少的文件是manifest.json(必须放在项目根目录)，我们知道package.json是项目的基本配置文件，那manifest.json就是chrome 插件中最重要的配置文件。这个文件记录插件里background、content_scripts、browser_action等配置的相关规则和文件摆放位置。

假如有这样一个manifest.json文件:

{

  "manifest_version": 2,

  "name": "vue-chrome-extension",

  "description": "基于vue的chrome插件",

  "version": "1.0.0",

  "browser_action": {

    "default_title": "vue-chrome-extension",

    "default_icon": "assets/logo.png",

    "default_popup": "popup.html"

  },

  "permissions": [

    "webRequestBlocking",

    "notifications",

    "tabs",

    "webRequest",

    "http://*/",

    "https://*/",

    "<all_urls>",

    "storage",

    "activeTab"

  ],

  "background": {

    "scripts": ["js/background.js"]

  },

  "icons": {

    "16": "assets/logo.png",

    "48": "assets/logo.png",

    "128": "assets/logo.png"

  },

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "content_scripts": [

    {

      "matches": [

        "https://*.baidu.com/*"

      ],

      "css": [

        "css/content.css"

      ],

      "js": [

        "js/content.js"

      ],

      "run_at": "document_end"

    }

  ],

  "web_accessible_resources": ["fonts/*", "inject.js"]

}

复制代码