不容错过的Vite+Vue3开发谷歌浏览器插件指南

2023-10-18 15:55:19

Vite+Vue3凭借其出色的性能和易用性，已成为构建现代网络应用程序的绝佳选择。如今，随着谷歌浏览器插件（尤其是V3版本）的兴起，使用Vite+Vue3开发浏览器插件也变得越来越流行。

本文将为您提供使用Vite+Vue3开发谷歌浏览器插件的实用指南。无论您是经验丰富的开发人员还是初学者，都能从本文中有所收获。

项目初始化

首先，创建一个新的Vite项目：

npm create vite-app my-browser-extension

进入项目目录：

cd my-browser-extension

在package.json文件中添加以下依赖项：

{
  "dependencies": {
    "vue": "^3.2.31",
    "vite": "^3.0.7",
    "@vue/compiler-sfc": "^3.2.31"
  }
}

然后，安装依赖项：

npm install

创建插件清单文件

接下来，需要创建一个插件清单文件（manifest.json）。该文件用于定义插件的基本信息，包括名称、版本、权限等。

{
  "manifest_version": 3,
  "name": "My Browser Extension",
  "version": "1.0.0",
  "description": "This is a sample browser extension.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["contentScript.js"]
    }
  ]
}

创建插件组件

接下来，需要创建插件组件。插件组件可以是任何Vue组件，但通常情况下，它们会非常简单，只包含一些基本的功能。

<template>
  <div id="my-extension">
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
export default {
  name: 'MyExtension',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>