企业官网建设流程全解析

ExtensionPay.js完全入门：从安装到收款的完整步骤（附示例代码）

【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPay

ExtensionPay.js是一款专为浏览器扩展开发者设计的JavaScript库，能帮助开发者轻松实现扩展的支付功能，无需自建服务器。通过ExtensionPay.com服务，开发者可以快速为扩展添加订阅或一次性付款功能，目前已帮助扩展创作者获得超过50万美元的收入。

快速了解ExtensionPay.js

ExtensionPay.js的核心优势在于简单集成和零服务器配置。只需几行代码，就能为你的浏览器扩展添加专业的支付系统，支持多种支付方式和订阅管理。无论你是开发Manifest V2还是V3扩展，都能轻松适配。

为什么选择ExtensionPay.js？

• 无需后端开发：所有支付逻辑由ExtensionPay.com处理，开发者只需专注前端集成
• 支持多种支付模式：订阅制（月付/年付）和终身购买模式
• 跨浏览器兼容：支持Chrome、Firefox等主流浏览器
• 完整的订阅管理：用户可随时查看和管理自己的订阅状态
• 详细的用户数据：获取用户支付状态、订阅信息等关键数据

准备工作：安装与环境配置

1. 安装ExtensionPay.js

最简便的安装方式是使用npm：

npm install extpay --save

如果你不使用打包工具，可以直接复制项目中的ExtPay.js文件到你的扩展目录。项目提供了多种版本：

• ExtPay.js - 标准版本
• ExtPay.module.js - ESM模块版本
• ExtPay.common.js - CommonJS版本

2. 配置manifest.json

无论你使用Manifest V2还是V3，都需要在manifest.json中添加必要的权限：

{ "permissions": ["storage"] }

对于Firefox用户，还需要添加额外的权限：

{ "permissions": ["https://extensionpay.com/*"] }

如果你的扩展使用了内容安全策略（CSP），请确保添加以下配置：

"content_security_policy": "connect-src https://extensionpay.com"

核心实现：从初始化到收款

1. 初始化ExtensionPay（必做！）

首先需要在ExtensionPay.com注册账号并创建扩展，获取你的扩展ID。然后在background.js中初始化ExtPay：

Manifest V3示例：

// background.js importScripts('ExtPay.js'); const extpay = ExtPay('your-extension-id'); extpay.startBackground();

Manifest V2示例：

// background.js const extpay = ExtPay('your-extension-id'); extpay.startBackground();

⚠️ 注意：extpay.startBackground()必须在background文件中调用，且只能调用一次，这是确保支付系统正常工作的关键步骤。

2. 检查用户支付状态

使用extpay.getUser()方法可以获取用户的支付状态和相关信息：

extpay.getUser().then(user => { if (user.paid) { // 用户已付费，开启高级功能 console.log('用户已付费，到期时间：', user.subscriptionCancelAt); } else { // 用户未付费，引导至支付页面 extpay.openPaymentPage(); } }).catch(error => { // 处理网络错误等异常情况 console.error('获取用户信息失败：', error); });

用户对象（user）包含以下关键属性：

• paid: 布尔值，表示用户是否已付费
• plan: 用户当前订阅的计划信息（如价格、周期）
• subscriptionStatus: 订阅状态（active/past_due/canceled）
• email: 用户邮箱（如果用户已登录）

3. 创建支付页面

调用extpay.openPaymentPage()会打开一个新标签页，展示你的支付计划供用户选择：

// 在按钮点击事件中调用 document.getElementById('upgrade-btn').addEventListener('click', () => { extpay.openPaymentPage(); });

用户将看到类似以下的支付计划选择页面：

选择计划后，用户会进入Stripe支付页面完成付款：

4. 订阅管理功能

已付费用户可以通过同样的extpay.openPaymentPage()方法管理他们的订阅：

// 提供"管理订阅"按钮 document.getElementById('manage-subscription').addEventListener('click', () => { extpay.openPaymentPage(); });

用户将看到他们的订阅详情页面，可以更新支付方式或取消订阅：

高级功能：提升用户转化率

1. 折扣码功能

ExtensionPay支持创建折扣码，吸引更多用户购买。在ExtensionPay后台创建折扣码后，用户可以在支付页面输入：

2. 免费试用功能

你可以提供免费试用期来让用户体验扩展的全部功能，使用extpay.openTrialPage()方法：

// 引导用户开始免费试用 document.getElementById('start-trial').addEventListener('click', () => { extpay.openTrialPage('7-day'); // 显示"7-day"提示文本 });

3. 支付成功回调

使用onPaid监听器在用户完成支付时执行特定操作：

extpay.onPaid.addListener(user => { console.log('用户已成功支付！', user); // 可以在这里发送欢迎邮件或提供使用指南 });

要使用此功能，需要在manifest.json中添加内容脚本配置：

{ "content_scripts": [ { "matches": ["https://extensionpay.com/*"], "js": ["ExtPay.js"], "run_at": "document_start" } ] }

示例项目参考

项目提供了完整的示例扩展，你可以直接参考或作为模板使用：

• Manifest V2示例
• Manifest V3示例

安装示例扩展的步骤：

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/ex/ExtPay
2. 打开浏览器扩展页面（chrome://extensions/）
3. 启用"开发者模式"
4. 点击"加载已解压的扩展程序"，选择示例文件夹

总结

通过ExtensionPay.js，你可以在不到一小时内为浏览器扩展添加专业的支付系统。无需处理复杂的后端逻辑和支付安全问题，让你专注于扩展功能的开发。无论是订阅制还是一次性购买，ExtensionPay都能满足你的需求，帮助你将创意转化为收入。

"如果必须直接使用Stripe，我可能根本不会尝试 monetize我的扩展。ExtensionPay让整个过程变得如此简单，设置和测试不到一个小时就完成了。" — 开发者David

【免费下载链接】ExtPayThe JavaScript library for ExtensionPay.com — payments for your browser extensions, no server needed.项目地址: https://gitcode.com/gh_mirrors/ex/ExtPay