Chrome插件变现的极简实践方案在面对Chrome插件变现难题时，本文探讨了收费模式、挑战与困境。作者介绍了插件变现的

第一章：Chrome插件变现的挑战与困难

博主专注于做插件开发工作，插件用户量还算比较大，所以最近研究插件如何收费，市场上插件根据收费形式大体分为三种形式

插件本身不收费 - 通过导流到具体的商品、网站及其他周边内容等获客进一步收费
捐赠模式
通过插件的功能提供订阅、一次性买断的形式进行收费

对于我自身来说，做免费插件并没有相关的周边商品进行导流，捐赠模式也不怎么靠谱（国内用户还是比较喜欢白嫖的），所以考虑通过做功能的限制引导用户进行付费来获得收入经过上周前一篇对于插件付费的调研，得出一个结论，对于我们这种中小开发者来说，接入其他的支付平台需要提供资质、购买服务器、控制风险等，难度实在太大，就营业执照来说就已经刷掉一中小开发者了。好在发现了2款针对插件收费的产品，我部分插件已经开始接入了，还算顺畅。本文将通过一个极简的示例来记录我的接入kodepay的过程，供大家参考

第二章：插件接入kodepay

1. 准备一个空白的插件

直接使用我之前使用Vue.js开发Chrome浏览器插件：从零到一的Demo插件

2. 注册kodepay的账号

跟着引导步骤走就能创建好套餐和插件了。插件名称、套餐名称在测试模式下可以随便填写，后续能够更正引导步骤需要确定套餐定价时，出现的选项都是美金，看起来这个产品面向的主要群体是国外的开发者，不过我在支付套餐菜单中找到了人民币，也就是说能够支持人民币收款的，具体的需要咨询一下该网站的所有者

3. 接入kodepay的npm包

根据它提供的引导步骤中的接入提示来，先安装npm包

安装还是比较顺畅的

4. 插件中集成kodepay的支付功能

根据引导页的提示，创建一个kodepayContent.js，并且粘贴上引导中提示的代码

background.js 中也粘贴一下

manifest.json 中修改一下

这里主要是增加了一个注入kodepay.io/* 网域下的JS，估计是用来监听一些页面消息的，注意content_scripts是一个数组，是可以添加多个注入脚本的

vue.config.js 中增加kodepayContent.js的打包配置

我们在原有代码的基础上，增加了一个kodepayContent.js的文件，但是我们的打包配置中并没有告知webpack需要将这个文件打包放置在js/kodepayContent.js的位置上，大家可以根据自己的需求进行打包。

对popup页面进行一些简单的修改

<template>  
<div class="example">  
hello, this is chrome extension vue  
<button @click="openPaymentPage('prod_640ff4a7dc6b4a13')">打开支付页面</button>  
<button @click="openLoginPage">打开登录页面</button>  
<button @click="openBillManagementPage">打开账单页面</button>  
</div>  
</template>  
<script>  
export default {  
data () {  
return {  
  
}  
},  
methods : {  
openPaymentPage(price_id) {  
// 当你有多个套餐时，可以将套餐的ID作为参数传递给kodepay,我这里只有一个示例，  
/* eslint-disable */  
chrome.runtime.sendMessage({target:'BACKGROUND', type:'open-payment-page', 'price_id': price_id}, function(response) {  
console.log(response);  
});  
},  
openLoginPage() {  
/* eslint-disable */  
chrome.runtime.sendMessage({target:'BACKGROUND', type:'open-login-page'}, function(response) {  
console.log(response);  
});  
},  
openBillManagementPage() {  
/* eslint-disable */  
chrome.runtime.sendMessage({target:'BACKGROUND', type:'open-bill-management-page'}, function(response) {  
console.log(response);  
});  
}  
},  
}  
</script>  
<style scoped>  
.example {  
align-items: center;  
display: flex;  
position: relative;  
margin: 0 16px;  
}  
</style>