使用Vue开发自己的Chrome扩展程序过程详解

使用Vue开发自己的Chrome扩展程序

开发Chrome扩展程序可以用于个性化配置Chrome浏览器功能,同时也是Chrome浏览器生态中非常重要的一部分。本篇文章将会向你详细讲解如何使用Vue开发自己的Chrome扩展程序。

准备工作

首先,需要安装最新版的Node.jsVue CLI工具。安装完成后,使用以下命令创建一个基于 Vue 的 Chrome 扩展程序模板:

vue create --preset jeneser/chrome-extension my-extension

该命令将使用预先设定好的Vue CLI插件(preset)来自动生成基本的Chrome扩展程序骨架,省去了繁琐的基础应用搭建环节。这个骨架中包含了一个完整的Vue应用,并且已经预置了对Chrome扩展程序的处理方式。

基础骨架

模板创建成功后,我们可以看到以下内容:

my-extension
├── public
│   ├── manifest.json
│   └── index.html
│
├── src
│   ├── background.js
│   ├── components
│   │   └── HelloWorld.vue
│   ├── options
│   │   ├── index.js
│   │   └── Options.vue
│   ├── popup
│   │   ├── index.html
│   │   ├── index.js
│   │   └── Popup.vue
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── package.json

所有Chrome扩展程序都需要一个manifest.json文件来描述扩展。Vue CLI 模板已经为我们设置好了manifest.json文件。现在,应该可以通过在Google chrome上,选择“扩展程序”,检查你的新项目是否已经出现在扩展程序管理器中了。

开始开发

Vue CLI的骨架提供了许多方便的功能。我们在src目录下可以看到background.js文件,用于处理Chrome扩展程序的后台任务;popup目录下存放的是当前激活标签页的弹出窗口;。

我们可以使用Vue框架轻松地为我们的扩展添加组件。在components目录下我们可以创建类似Vue组件的文件,该文件应该具有以下特征:

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
module.exports = {
  props: ['name']
};
</script>

<style scoped>
div {
  font-weight: bold;
}
</style>

通过上述代码可以看出,Vue组件与网站中的普通组件开发是相似的。另外,需要特别注意的是,为了确保作用域不互相干扰,我们会在样式上使用scoped关键字。这使得样式只会作用于当前组件内部。

示例1 - 扩展程序选项页

从示例中我们可以看出,Vue CLI创建的基础骨架提供了一个名为Options的组件,并且已经为我们设置好了快捷键。该组件在options目录下,而且指定为扩展程序的选项页面。我们可以在src/options/Options.vue文件中列出所有需要在选项页上列出的选项。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="enabled" />
      {{ 'Enable feature' }}
    </label>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      enabled: false
    };
  }
};
</script>

在返回的JS对象中,数据里存储了需要在页面上显示的数据,比如全局的选项、复选框的选中状态等。

需要注意的是,在使用v-model时,该变量的值通常应该存储在Vue实例的data中(如示例中的enabled变量)。这样,如果该值发生变化,页面也将相应地更新。现在,只需稍作修改,就能添加更多可供自定义的选项,完成一个功能完备的选项页。

示例2 - 弹出窗口

开发弹出窗口与开发选项页的方式基本相同。下面是一个我们添加到./popup/Popup.vue文件的简单组件的示例:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
      this.message = `Active tab title: ${tabs[0].title}`
    })
  }
}
</script>

该组件会获取当前页面中的标签页地址,并在弹出窗口中显示出来。在background.js文件中设置监听器即可在浏览器标签页上激活弹出窗口:

chrome.browserAction.onClicked.addListener(() => {
  chrome.windows.create({
    url: chrome.runtime.getURL('popup/index.html'),
    type: 'popup',
    width: 360,
    height: 240
  })
})

这段代码监听浏览器当前激活的标签页上的用户单击事件。当用户单击扩展程序图标时,将启动一个新的标签页,并在其中加载popup/index.html文件,最后弹出窗口的大小是360x240像素(需要注意的是,该值不能大于当前屏幕窗口大小)。

打包和发布

在这里我会简单提一下如何打包Vue构建,并在Chrome商店发布扩展程序。

首先需要在manifest.json文件中指定扩展程序的版本号:

{
  "version": "1.0.0",
  // ...
}

然后使用以下命令打包扩展程序:

npm run build

打包完毕后,可以在dist目录下找到生成的所有生产文件。将其压缩为一个zip包,换名为 my-extension.zip

最终将zip包上传到Chrome 开发者控制台中,即可使用Chrome开发者控制台提供的服务进行发布。

结语

Vue CLI 模板大大简化了创建 Chrome 扩展的过程。即使你不熟悉Chrome扩展程序的工作原理,只要你掌握了Vue框架的相关知识,你依然可以使用它轻松创建扩展程序。祝愿你创建出一个功能完备、简单易用的扩展程序。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用Vue开发自己的Chrome扩展程序过程详解 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • TypeScript类型声明书写详解

    TypeScript类型声明书写详解 在使用TypeScript开发时,类型声明是一种非常重要的工具,它可以帮助我们检查代码中的类型错误,并提供代码补全的功能,提高开发效率。本文将详细讲解TypeScript类型声明的书写方法,帮助读者能够更加熟练地使用TypeScript进行开发。 简单类型声明 在TypeScript中,我们可以使用“:`符号来定义变量的…

    Vue 2023年5月27日
    00
  • 关于Element UI table 顺序拖动方式

    关于Element UI table顺序拖动方式,我们需要进行如下步骤: 1. 引入sortablejs和vuedraggable 我们需要先引入sortablejs和vuedraggable这两个库,它们可以帮助我们实现拖拽排序的功能。具体引入方式可以使用CDN或直接下载到本地,这里以使用CDN为例: <!–引入sortablejs–> &…

    Vue 2023年5月27日
    00
  • vue3项目中引入ts的详细图文教程

    请允许我为您详细讲解“vue3项目中引入ts的详细图文教程”的完整攻略。 1. 创建Vue3项目 首先,我们需要使用Vue CLI创建一个Vue3项目。在终端输入以下命令: vue create vue3-ts-demo 在创建项目时,我们需要选择手动模式,以便为项目启用TypeScript选项。选择手动模式后,我们需要勾选typescript选项,请确保选…

    Vue 2023年5月28日
    00
  • axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    axios封装,使用拦截器统一处理接口,超详细的教程 为什么需要封装、使用拦截器统一处理接口? 在实际开发中,我们经常会使用到Ajax技术,而Axios是一个比较好用的Ajax库。但是,使用 Axios 发送请求的时候,我们遇到的一些问题: 大量重复代码:每次请求都要写一堆重复的代码,如设置 headers,处理错误等。 统一处理后端返回的数据:由于每个接口…

    Vue 2023年5月28日
    00
  • Vue首屏加载过慢出现白屏的6种优化方案汇总

    当使用Vue.js开发网站时,如果页面首屏加载过慢,会出现白屏现象,这不仅对用户体验不友好,还会影响搜索引擎收录等问题。为了解决这个问题,我们可以尝试以下6种优化方案。 1. 使用首屏骨架屏 在页面白屏的情况下,优化方案之一是使用首屏骨架屏。骨架屏是一种占位符,能够显示页面主要内容的布局和结构,让用户能够感知到页面加载的进度,提高用户体验。我们可以使用Vue…

    Vue 2023年5月28日
    00
  • vue实现集成腾讯TIM即时通讯

    vue实现集成腾讯TIM即时通讯 1. 安装TIM SDK 首先,我们需要在项目中安装TIM SDK,在项目根目录下执行以下命令: npm install tim-js-sdk –save 2. 创建TIM实例 安装完成TIM SDK后,我们需要在项目中创建TIM实例,代码示例如下: import TIM from ‘tim-js-sdk’; const …

    Vue 2023年5月27日
    00
  • VUE render函数使用和详解

    VUE render函数使用和详解 什么是render函数? Vue.js 是一个数据驱动的 web 框架。其核心思想是将页面上的 DOM 和数据绑定在一起,当数据变化时,就会自动更新 DOM 以保证页面内容的及时更新。 Vue.js 默认使用 template 语法来声明页面结构,但是在某些情况下,我们可能需要手动渲染页面结构。这个时候,就需要用到 Vue…

    Vue 2023年5月27日
    00
  • 详解auto-vue-file:一个自动创建vue组件的包

    下面是详细讲解 “详解auto-vue-file:一个自动创建vue组件的包” 的完整攻略: 什么是auto-vue-file auto-vue-file是一个自动创建Vue组件文件的Node.js包。使用auto-vue-file,你可以快速地创建Vue组件文件,省去手动创建文件的繁琐步骤。 安装auto-vue-file 要安装auto-vue-file…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部