npm 包 bigroom-vue-chrome-extension 使用教程

前言

Chrome 扩展程序是 Chrome 浏览器的一种拓展，可以添加新功能、改变外观或者实现某些网站的自动化操作。使用 Vue.js 开发 Chrome 扩展程序，可以更快速、高效地构建一个功能完善的扩展程序。本文将介绍如何使用 bigroom-vue-chrome-extension 这一 npm 包，来快速开发一个基于 Vue.js 的 Chrome 扩展程序。

bigroom-vue-chrome-extension 简介

bigroom-vue-chrome-extension 是一个基于 Vue.js 的 Chrome 扩展程序开发框架。它利用 Vue.js 的响应式数据绑定和组件化开发思想，能够更加快速、高效地开发 Chrome 扩展程序。同时，它提供了一系列的脚手架工具和组件库，使得开发者可以更加便捷地构建 Chrome 扩展程序。

安装

安装 bigroom-vue-chrome-extension 非常简单，只需要使用 npm 命令即可。在终端中输入以下命令即可安装：

--- ------- ---------------------------- ----------

创建项目

bigroom-vue-chrome-extension 使用 vue-cli-service 渲染模板，并使用 webpack 进行打包。因此，在创建项目之前，需要先安装 @vue/cli 和 @vue/cli-service-global 这两个 npm 包。如果已经安装过，可以跳过该步骤。

--- ------- -- --------
--- ------- -- -----------------------

然后，在命令行中输入以下命令来创建一个 bigroom-vue-chrome-extension 项目：

--- ------ -------------------

接着，选择使用 Manually select features 来手动选择要使用的功能，勾选 Babel、Router、Vuex 和 CSS Pre-processors。

-----
------
----
----------------

最后，选择 SASS/SCSS (with dart-sass) 作为 CSS 预处理器，并完成项目的创建。

配置文件

在创建好项目后，需要配置一些文件，以便我们能够使用 bigroom-vue-chrome-extension 的脚手架工具和组件库。

vue.config.js

在项目的根目录下创建一个 vue.config.js 文件，用来配置 webpack 和 vue-cli-service。以下是最基本的 vue.config.js 配置：

-------------- - -
  ----------------- -
    ------ -
      ----------- ----------------------
      ------ ----------------
    --
    ------- -
      --------- -----------
    -
  --
  ------ -
    ------ -
      ------ -----------------
      --------- ----------------------
      --------- ------------
    -
  --
  -------------- -
    ---------------- -
      -------------- -----------------
      ---------------- -------------
      ------------- -----------------------
      ----------- -------
      ----------------------- ----
    -
  -
-

在以上配置中，我们使用了 configureWebpack、pages 和 pluginOptions 三个属性，其中：

  • configureWebpack：配置 webpack，以便将多个入口文件打包成多个输出文件。
  • pages：定义了三个 Vue.js 页面（popup.html、options.html 和 background.html）的入口文件、模板文件和输出文件名。
  • pluginOptions：配置 bigroom-vue-chrome-extension 的参数，以便于使用脚手架工具和组件库。

public/manifest.json

在 public 目录下创建一个 manifest.json 文件，用于定义 Chrome 扩展程序的各种属性，如：

-
  ------------------- --
  ------- --- ------ -----------
  ---------- --------
  -------------- ----- -- -- ------ ------------
  ----------------- -
    ---------------- -------------
    ---------------- --- ------ ----------
  -
-

在以上属性中：

  • manifest_version：表示使用的 manifest 版本（这里使用的是 2）。
  • name：扩展程序的名称。
  • version：扩展程序的版本。
  • description：扩展程序的简介。
  • browser_action：定义了扩展程序的浏览器动作，并提供了一个默认的弹出页面和标题。

组件库

bigroom-vue-chrome-extension 提供了一系列在 Chrome 中使用的组件，如：Button、Input、Select、Tabs、Message、Notification、Storage 等。这些组件可以很方便地使我们能够更快速、更有效地实现某些功能。

Button

Button 组件用于构建一个按钮。

----------
  ------- -------------- ---------------------- ------------
-----------

--------
------ - ------ - ---- ------------------------------

------ ------- -
  ----------- -
    ------
  --

  -------- -
    --------- -
      ------------------- ----------
    -
  -
-
---------

在以上代码中，我们使用了 Button 组件，并设置了一个主要按钮（type="primary"），当该按钮被点击时，将会触发 onClick() 方法。

Input

Input 组件用于构建一个输入框。

----------
  ------ --------------- ------------------- ------ --
-----------

--------
------ - ----- - ---- ------------------------------

------ ------- -
  ----------- -
    -----
  --

  ------ -
    ------ -
      ------ --
    -
  -
-
---------

在以上代码中，我们使用了 Input 组件，并使用 v-model 将输入的值绑定到了 value 变量上。

Select

Select 组件用于构建一个下拉选择框。

----------
  ------- --------------- ----------
    ------- ----------- -- -------- ----------------- --------------------
      -- ---------- --
    ---------
  ---------
-----------

--------
------ - ------- ------ - ---- ------------------------------

------ ------- -
  ----------- -
    -------
    ------
  --

  ------ -
    ------ -
      ------ ---
      -------- -
        - ------ -------- ------ ------- --
        - ------ --------- ------ -------- --
        - ------ --------- ------ -------- --
        - ------ ------- ------ ------ -
      -
    -
  -
-
---------

在以上代码中，我们使用了 Select 组件，并设置了一个可清空的下拉选择框。通过循环遍历 options 数组，将每个选项作为一个 Option 组件添加到了下拉选择框中。

Tabs

Tabs 组件用于构建一个选项卡页签。

----------
  ----- ------------------------ ------------------------
    -------- ---------- -- ------------
      --- - -------
    ----------
    -------- ---------- -- ------------
      --- - -------
    ----------
    -------- ---------- -- ------------
      --- - -------
    ----------
  -------
-----------

--------
------ - ----- ------- - ---- ------------------------------

------ ------- -
  ----------- -
    -----
    -------
  --

  ------ -
    ------ -
      ----------- ------
    -
  --

  -------- -
    ------------------- -
      ---------------- -------- -- --------
    -
  -
-
---------

在以上代码中，我们使用了 Tabs 组件，并设置了三个选项卡页签。当某个选项卡被点击时，将会触发 onTabClick() 方法。

Message 和 Notification

Message 组件用于显示一条消息，Notification 组件用于显示一条系统通知。

----------
  ------- -------------- --------------------------- ----------------
-----------

--------
------ - ------- -------- ------------ - ---- ------------------------------

------ ------- -
  ----------- -
    ------
  --

  -------- -
    --------------- -
      --------------------- -- - ----------
      ----------------------
        ------ ------------- -------
        -------- ----- -- - --------------
      --
    -
  -
-
---------

在以上代码中，我们创建了一个按钮，并在其点击后，使用 Message.success() 得到一条成功类型的消息，使用 Notification.success() 得到一条成功类型的系统通知。

Storage

Storage 组件用于读写 Chrome 扩展程序的存储。

----------
  ------- -------------- --------------------------- -------------
-----------

--------
------ - ------- ------- - ---- ------------------------------

------ ------- -
  ----------- -
    ------
  --

  -------- -
    --------------- -
      ------------------ -------- -- -- -
        ----------------- --------
      --
      ------------------ ------- -- -
        ----------------- ---------- -- ------
      --
    -
  -
-
---------

在以上代码中，我们创建了一个按钮，并在其点击后，使用 Storage.set() 保存了一条数据，使用 Storage.get() 获取了保存的数据。

使用脚手架工具

bigroom-vue-chrome-extension 提供了以下脚手架工具：

  • vue-cli-service chrome：用于构建 Chrome 扩展程序，并将构建结果输出到 dist 目录中。

    --------------- ------

  • vue-cli-service zip：用于将构建结果打包成 ZIP 文件，并输出到根目录中。

    --------------- ---

  • vue-cli-service crx：用于将构建结果打包成 CRX 文件，并输出到根目录中。

    --------------- ---

示例代码

在本文的最后，提供一个完整的示例代码，供读者参考和学习。

----------
  ---- ------------------
    ------ ------ --------------
    ------- -------------- --------------------------- -------------
    ------ --------------- ------------------- ------ --
    ------- ------------------ ----------
      ------- ----------- -- -------- ----------------- --------------------
        -- ---------- --
      ---------
    ---------
    ----- ------------------------ ------------------------
      -------- ---------- -- ------------
        ------ - -----------
      ----------
      -------- ---------- -- ------------
        ------ - -----------
      ----------
      -------- ---------- -- ------------
        ------ - -----------
      ----------
    -------
  ------
-----------

--------
------ - ------- ------ ------- ------- ----- -------- ------- - ---- ------------------------------

------ ------- -
  ----------- -
    -------
    ------
    -------
    -------
    -----
    -------
  --

  ------ -
    ------ -
      ----------- -------
      ------ ---
      --------- ---
      -------- -
        - ------ -------- ------ ------- --
        - ------ --------- ------ -------- --
        - ------ --------- ------ -------- --
        - ------ ------- ------ ------ -
      -
    -
  --

  -------- -
    --------------- -
      ------------------ ----------- -- -- -
        ----------------- --------
      --
      ------------------ ------- -- -
        ----------------- ---------- -- ------
      --
    --
    ------------------- -
      ---------------- -------- -- --------
    -
  -
-
---------

-------
---------- -
  ------- -----
-
--------

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668fad9381d61a3540fd3

阅读全文

猜你喜欢

  • npm 包 bplokjs 使用教程

    在开发前端项目时，我们经常需要进行 DOM 元素的定位和操作，而这时候 bplokjs 就是一个非常有用的 npm 包。bplokjs 是一个使用 JavaScript 封装了 puppeteer A...

    3 年前
  • npm 包 markov-json 使用教程

    什么是 markov-json Markov-json 是一个基于 Markov 链生成随机文本的 Node.js 包。使用该包可以生成类似于所提供的文本文件的随机文本。

    3 年前
  • npm 包 tencent-wx-jssdk 使用教程

    tencent-wx-jssdk 是腾讯开放平台提供的基于微信 JS SDK 的前端工具包，它提供了更加方便的微信 JSSDK 使用方式和更加简洁的 API 接口，同时其支持 TypeScript，使...

    3 年前
  • npm 包 remote-select 使用教程

    前言 在前端开发中，我们经常会用到下拉框选择框等多种表单控件。其中，remote-select 是一种方便快捷的控件，可以实现远程获取数据并选择的功能。在本教程中，我们将讲解如何使用 npm 包 re...

    3 年前
  • npm 包 node-unihan-etl 使用教程

    node-unihan-etl 是一个基于 Node.js 的 npm 包，它可以帮助开发者在前端项目中轻松地使用 UNIHAN 数据库中的中文字符。本文将介绍如何使用 node-unihan-etl...

    3 年前
  • npm 包 crud-ajax-simples 使用教程

    前言 在前端开发中，我们经常会用到 AJAX 技术，用于与后端服务器进行数据交互。而使用 AJAX 进行 CRUD 操作的场景也是经常出现的，比如我们需要对用户信息、商品信息等进行增删改查。

    3 年前
  • npm 包 @bon3s/input-validation 使用教程

    在前端开发中，输入验证是一个关键的过程。为了提高前端开发的效率和减少重复工作，可以通过使用 npm 包减少输入验证的代码编写。其中一个方便的 npm 包就是 @bon3s/input-validati...

    3 年前
  • npm 包 netcat-repl 使用教程

    在前端开发中，我们经常需要使用命令行工具来进行一些操作，例如启动服务、打包代码等等。而 netcat-repl 就是一个非常便捷的命令行工具，它可以让我们在命令行中直接与服务器进行交互，而无需打开一个...

    3 年前
  • npm 包 bbs-graphql-iso-date 使用教程

    简介 在现代 Web 应用中，时间戳是非常常见的数据类型。而在 GraphQL 中，日期和时间是以 ISO 格式呈现的。因此，将日期和时间转换成 ISO 格式是很常见的任务，而 bbs-graphql...

    3 年前
  • npm 包 ckeditor5-supsub 使用教程

    介绍 CKEditor5 是一款现代化的富文本编辑器，可以在 Web 应用程序中的任何位置使用。CKEditor5-supsub 是 CKEditor5 中的一个子包（subpackage），用于添加...

    3 年前
  • npm 包 react-native-fix-third-party 使用教程

    随着 React Native 在移动开发中的广泛应用，越来越多的第三方库也被引入了项目中。但是，这些库的质量和兼容性并不总是那么好。我们可能会在使用这些库的过程中遇到各种诡异的问题，例如运行时崩溃、...

    3 年前
  • npm 包 react-native-web-image-old 使用教程

    React Native 是一种用于构建跨平台原生应用程序的开源框架，它基于 React 库并允许开发人员使用相同的编程语言编写应用程序的各个部分。但是，有时候你可能需要在 Web 端使用 React...

    3 年前
  • npm 包 safe-prop 使用教程

    在前端开发项目中，我们经常需要从深层嵌套的对象或数组中获取数据。在这个过程中，我们可能会遇到对象不存在、数组越界等异常情况。为了避免这些异常情况，我们可以使用 npm 包 safe-prop，它提供了...

    3 年前
  • npm 包 url-md-fs 使用教程

    什么是 url-md-fs？ url-md-fs 是一个 Node.js 模块，它可以使你从互联网上获取 Markdown 格式的文件并保存到本地文件系统中。该模块可以接受一个 URL 参数，并从该 ...

    3 年前
  • npm 包 alfred-newrelic 使用教程

    在前端开发中，优化网站性能是一个重要的技能，而 New Relic 是一个专业的性能分析工具。本文将介绍一个 npm 包——alfred-newrelic，它可以让我们更方便地使用 New Relic...

    3 年前
  • npm 包 react-native-sliding-drawer 使用教程

    前言 在 React Native 开发中，我们经常需要使用到侧滑抽屉效果。而 react-native-sliding-drawer 是一个很好的侧滑抽屉组件，它可以帮助我们快速实现这个功能，同时也...

    3 年前
  • `@beattyml1/flint` npm包的使用教程

    介绍 @beattyml1/flint 是一个轻量级的前端框架，它提供了一个易于使用的、快速的、可扩展的系统来构建 Web 应用程序。 这个框架是由Beatty Liu开发的，并作为一个公共仓库的 n...

    3 年前
  • npm 包 @redux-orchestrate/core 使用教程

    前言 @redux-orchestrate/core 作为一个 Redux 中间件，能够帮助我们管理 Redux 中的异步流程，在我们的应用程序中起到很大的作用。在本篇文章中，我们将深入介绍 @red...

    3 年前
  • npm 包 fetch-github-graphql 使用教程

    前言 在前端开发时，我们经常需要从 GitHub API 中获取数据。但是，在进行数据获取时，我们往往会因为请求过于频繁而被封禁，或者将太多请求发送到服务器而导致服务器压力增大。

    3 年前
  • npm 包 img2teletext 使用教程

    什么是 img2teletext？ img2teletext 是一个 npm 包，可以将图片转换成 ASCII 码，并生成纯文本的 ASCII 艺术，也被称为电视文本。

    3 年前

相关推荐

    暂无文章