Automa扩展开发指南：从环境搭建到浏览器部署-优快云博客

Automa扩展开发指南：从环境搭建到浏览器部署

【免费下载链接】automa A browser extension for automating your browser by connecting blocks 项目地址: https://gitcode.com/gh_mirrors/au/automa

Automa是一款通过连接模块实现浏览器自动化的扩展工具，支持表单自动填充、重复任务执行、网页截图和数据抓取等功能。本文将详细介绍如何从零开始搭建开发环境、构建扩展包并部署到Chrome和Firefox浏览器。

开发环境准备

系统要求

Node.js（≥14.18.1）
pnpm包管理器
Git

源码获取

通过Git克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/au/automa.git
cd automa

依赖安装

# 安装项目依赖
pnpm install

配置密钥文件

创建src/utils/getPassKey.js文件并添加以下内容：

export default function() {
  return 'anything-you-want'; // 自定义密钥
}

项目结构解析

Automa采用模块化架构设计，核心目录结构如下：

src/
├── assets/           # 静态资源
│   ├── images/       # 图标和图片资源
│   │   ├── icon-128.png      # 扩展图标
│   │   ├── theme-dark.png    # 深色主题图标
│   │   └── theme-light.png   # 浅色主题图标
├── background/       # 后台服务逻辑
├── components/       # UI组件
├── content/          # 内容脚本
├── manifest.chrome.json  # Chrome扩展配置
└── manifest.firefox.json # Firefox扩展配置

开发与调试

开发模式启动

# Chrome浏览器开发模式
pnpm dev

# Firefox浏览器开发模式
pnpm dev:firefox

开发服务器启动后，会在build目录生成未压缩的扩展文件，并支持热重载功能。

浏览器加载扩展

Chrome浏览器

打开chrome://extensions页面
启用"开发者模式"
点击"加载已解压的扩展程序"，选择项目的build目录

Firefox浏览器

打开about:debugging#/runtime/this-firefox页面
点击"临时载入附加组件"
选择build/manifest.json文件

构建与打包

生产版本构建

# 构建Chrome扩展
pnpm build

# 构建Firefox扩展
pnpm build:firefox

构建流程由utils/build.js脚本控制，通过Webpack将源代码编译、压缩并输出到build目录：

// utils/build.js核心逻辑
process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const config = require('../webpack.config');
webpack(config, function (err) {
  if (err) throw err;
});

打包为ZIP文件

# 生成Chrome扩展ZIP包
pnpm build:zip

# 生成Firefox扩展ZIP包
pnpm build:prod-firefox

打包后的文件位于项目根目录，可直接提交到浏览器扩展商店。

功能扩展开发

模块开发示例

Automa的核心是模块化设计，每个功能通过模块实现。以下是一个简单的模块示例：

// src/components/block/BlockBasic.vue
<template>
  <div class="block-basic">
    <!-- 模块UI组件 -->
  </div>
</template>

<script>
export default {
  name: 'BlockBasic',
  props: ['data'],
  methods: {
    // 模块逻辑实现
    execute() {
      console.log('执行基础模块');
      return Promise.resolve();
    }
  }
};
</script>

工作流引擎

工作流执行逻辑位于src/workflowEngine/WorkflowEngine.js，核心代码结构：

class WorkflowEngine {
  constructor(workflow) {
    this.workflow = workflow;
    this.blocks = workflow.blocks;
  }
  
  async run() {
    for (const block of this.blocks) {
      await this.executeBlock(block);
    }
  }
  
  async executeBlock(block) {
    // 执行具体模块
    const blockComponent = this.getBlockComponent(block.type);
    return blockComponent.execute(block.data);
  }
}

部署与发布

浏览器扩展商店发布

Chrome Web Store
- 准备128x128像素图标（src/assets/images/icon-128.png）
- 打包扩展为ZIP文件
- 提交到Chrome开发者控制台
Firefox Add-ons
- 使用Firefox专用构建命令：pnpm build:firefox
- 打包为ZIP文件
- 提交到Firefox开发者中心

企业内部部署

对于企业内部使用，可以通过以下方式部署：

Chrome企业策略部署
Firefox组策略部署
自建扩展更新服务器

常见问题解决

构建失败

检查Node.js版本是否符合要求
删除node_modules目录后重新安装依赖
确认getPassKey.js文件已正确配置

扩展加载失败

检查浏览器开发者模式是否启用
清除浏览器缓存
验证manifest.json文件格式

结语

通过本文的指南，你可以快速掌握Automa扩展的开发、构建和部署流程。Automa的模块化设计使得扩展功能变得简单，无论是个人使用还是企业级部署，都能满足不同场景的自动化需求。

Automa扩展开发指南：从环境搭建到浏览器部署