เอกสารประกอบการพัฒนา

การแนะนำ

ExtensionPay คือเฟรมเวิร์กสำหรับการพัฒนาส่วนขยายเบราว์เซอร์ที่ออกแบบมาสำหรับ AI ช่วยให้คุณสร้างแอปพลิเคชันส่วนขยายที่มีฟังก์ชันเดียวและใช้งานได้จริง ซึ่งเป็นความสามารถของ AI ในปัจจุบัน อย่างไรก็ตาม การสร้างระบบที่ซับซ้อนและแข็งแกร่งด้วย AI นั้นไม่น่าจะทำได้ในระยะเวลาอันสั้น ดังนั้นเราจึงได้พัฒนาระบบสถาปัตยกรรมนี้ขึ้นมาเพื่อเพิ่มขีดความสามารถที่มีอยู่ของ AI ให้สูงสุด เมื่อคุณพัฒนาแอปพลิเคชันที่มีฟังก์ชันเดียวโดยใช้ AI ฟีเจอร์การเข้าสู่ระบบและการชำระเงินสามารถเพิ่มได้โดยอัตโนมัติด้วยการคลิกเพียงครั้งเดียว และสามารถแปลภาษาได้ 55 ภาษาโดยอัตโนมัติด้วยการคลิกเพียงครั้งเดียว สมาชิกพิเศษยังได้รับประโยชน์จากฟังก์ชันการอัปโหลดแอปอัตโนมัติด้วยการคลิกเพียงครั้งเดียว ซึ่งช่วยลดขั้นตอนและเวลาในการพัฒนาได้อย่างมาก และไม่จำเป็นต้องสร้างบริการแบ็กเอนด์ เฟรมเวิร์กนี้เหมาะสำหรับผู้ที่ไม่สามารถเขียนโค้ดได้ แต่สามารถพัฒนาโปรแกรมโดยใช้ AI ได้ โดยช่วยให้พวกเขาสามารถสร้างรายได้จากโปรแกรมที่ออกแบบโดยใช้ภาษาธรรมชาติได้
本框架主要服务人群是哪些不会写代码，但可以使用Ai开发出程序的人群，协助他们通过自然语言设计出的程序可以盈利

คำสั่งทั่วไป

คลิกเพื่อดาวน์โหลดข้อความแจ้งเตือน

สภาพแวดล้อมการติดตั้ง

1. ติดตั้ง Google Chrome

中国版：https://www.google.cn/intl/zh-CN/chrome
国际版：https://www.google.com/chrome

2. เปิดใช้งานส่วนขยายไฟล์ของ Windows

文件夹 -> 查看 -> 勾选这俩：1.✓[文件扩展名] -> 2.✓[隐藏的项目]

3. ติดตั้ง Notepad++

全球下载链接：http://notepad-plus-plus.org/downloads/v8.8.5/
中国下载链接：https://pan.baidu.com/s/1VnjDZAVh5xrMz6KJE9Z1Og?pwd=q83q
安装成功后，新建几个后缀的文件：txt、js、css、json
右键 -> 打开方式 -> [选择其他应用] -> 并勾选[始终使用此应用打开] -> 更多应用 -> 在这台电脑上查找其他应用 -> Notepad++ -> Notepad++.exe

6. เว็บไซต์สำหรับดาวน์โหลดไอคอน

中国版：https://www.iconfont.cn
国际版：https://www.flaticon.com

7. URL ที่ใช้ AI ทั่วไป

deepseek.com
yuanbao.tencent.com
chatgpt.com
claude.ai
gemini.google.com

8. คีย์ลัดที่ใช้บ่อย

Ctrl+C 复制
Ctrl+V 粘贴
Ctrl+F 搜索
Ctrl+A 全选

10. เครื่องมือจับภาพหน้าจอ

中国下载链接：https://pan.baidu.com/s/1rHUvbnfBHPEOuldKKfxi0A?pwd=p76p
国际下载链接：https://drive.google.com/file/d/1b8Ono9pnM8P0p1ossQmueEUDKP4D-3ar

คู่มือการใช้งานการอัปโหลด

上架网址：https://chrome.google.com/webstore/devconsole

1、确保Gmail邮箱是通过你【长期】使用可接收短信验证码的手机号注册绑定的
2、gmail安全设置中的所有设置都绑定：myaccount.google.com/security
以上配置好了之后，下方链接打开谷歌扩展开发者后台，注册并支付5美金，如果您没有可付款的银行账户可以在您所在国家的电商平台或者Google搜索代付、代充值、Visa、Mastercard之类的关键词，找到代付完成付款。
3、注册开发者账户之后选择[非交易者]，点击[账户] -> 绑定[联系电子邮件地址] 绑定完成后到网页底部勾选开启所有通知并点击[保持更改]

ตัวอย่างไฟล์ manifest มาตรฐาน

1、manifest.json

นี่คือตัวอย่างไฟล์ manifest มาตรฐานของส่วนขยาย Google ที่สามารถใช้เป็นข้อมูลอ้างอิงได้

พารามิเตอร์	แสดงให้เห็น
`version_name`	หากค่าเป็น [1.8 npy] การเข้าสู่ระบบและการชำระเงินจะไม่แสดงขึ้น อย่างไรก็ตาม คุณสามารถเริ่มการเข้าสู่ระบบและการชำระเงินผ่านการชำระเงินแบบกำหนดเองได้ "npy" หมายถึง "NoPay" ซึ่งจะปิดใช้งานการชำระเงิน หากคุณเป็นมือใหม่และไม่เข้าใจ คุณสามารถเลือกที่จะไม่ทำอะไรเลยและใช้ค่าเริ่มต้นได้
`homepage_url`	หากค่าที่ระบุมี `uninstall_url` อยู่ด้วย ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังลิงก์นี้หลังจากถอนการติดตั้ง มิฉะนั้นจะใช้ฟังก์ชัน `homepage_url` ตามค่าเริ่มต้นที่กำหนดไว้ในเอกสารอย่างเป็นทางการของ Google
`author`	`author=appid` เป็นฟิลด์ที่จำเป็น แต่ละส่วนขยายต้องมี `appid` ที่ไม่ซ้ำกัน ซึ่งใช้เพื่อระบุว่าส่วนขยายนั้นเป็นของส่วนขยายใด รูปแบบชื่อของ `appid` คือ: [ชื่อผู้เขียน_ชื่อส่วนขยาย_ตัวเลขสามตัว] `appid` รองรับเฉพาะตัวอักษรพิมพ์เล็กและตัวเลขเท่านั้น และต้องมีเครื่องหมายขีดล่างอยู่ด้านบนเพื่อแยกความแตกต่าง
`__MSG_app_name__`	ชื่อนี้เป็นค่าเริ่มต้นของระบบและไม่สามารถปรับแต่งได้
`__MSG_app_short_name__`	ชื่อนี้เป็นค่าเริ่มต้นของระบบและไม่สามารถปรับแต่งได้
`__MSG_app_description__`	ชื่อนี้เป็นค่าเริ่มต้นของระบบและไม่สามารถปรับแต่งได้

{
    "manifest_version":3,
    "name":"__MSG_app_name__",
    "short_name": "__MSG_app_short_name__",
    "description":"__MSG_app_description__",
    "version":"1.8",
    "version_name": "1.8",
    "permissions":["tabs","storage"],
    "icons":{
        "16":"icons/icon16.png",
        "48":"icons/icon48.png",
        "128":"icons/icon128.png"
    },
    "action":{
        "default_icon":{
            "16":"icons/icon16.png",
            "48":"icons/icon48.png",
            "128":"icons/icon128.png"
        },
        "default_popup":"popup/popup.html"
    },
    "background":{
        "service_worker":"background.js"
    },
    "content_scripts":[{
        "matches":["*://*.test.com/*","*://*.test.de/*","*://*.test.co.jp/*","*://de.test.com/*","*://jp.test.com/*"],
        "js":["content.js"]
    }],
    "host_permissions":["*://*.test.com/*","*://*.test.de/*","*://*.test.co.jp/*","*://de.test.com/*","*://jp.test.com/*"],
    "default_locale":"zh_CN",
    "update_url":"https://clients2.google.com/service/update2/crx",
    "homepage_url": "https://docs.google.com/forms/d/e/xxxxx&uninstall_url",
    "author":"xiaoqian_amazon_001"
}

2、_locales\zh_CN\messages.json

นี่คือตัวอย่างไฟล์สาธิตการใช้งานส่วนขยาย Google มาตรฐานแบบหลายภาษา รูปแบบด้านล่างสามารถแปลได้โดยอัตโนมัติและสามารถใช้เป็นข้อมูลอ้างอิงได้

พารามิเตอร์	แสดงให้เห็น
`app_name`	ชื่อ app_name เป็นค่าเริ่มต้นคงที่ที่ระบบกำหนดไว้ และไม่สามารถปรับแต่งได้
`app_short_name`	ชื่อ app_short_name เป็นค่าเริ่มต้นคงที่ที่ระบบกำหนดไว้ และไม่สามารถปรับแต่งได้
`app_description`	ชื่อ `app_description` เป็นค่าเริ่มต้นคงที่ที่ระบบกำหนดไว้ และไม่สามารถปรับแต่งได้

{
    "app_name": {
        "message": "扩展名"
    },
    "app_short_name": {
        "message": "扩展简称"
    },
    "app_description": {
        "message": "扩展介绍"
    },
    "leng_1": {
        "message": "界面文本1"
    },
    "leng_2": {
        "message": "界面文本2"
    },
    "leng_3": {
        "message": "总共 $ 个"
    },
    "leng_4": {
        "message": "当前第 $i$ 个",
        "placeholders": {
            "i": {
                "content": "$1"
            }
        }
    },
    "test_1": {
        "message": "测试 $ass$ 第二",
        "placeholders": {
            "ass": {
                "content": "$1"
            }
        }
    },
    "test_2": {
        "message": "$option$换行开始\\n 换行\\n结束",
        "placeholders": {
            "option": {
                "content": "$1"
            }
        }
    },
    "test_3": {
        "message": "版权所有© $year$ 保留所有权利。 ",
        "placeholders": {
            "year": {
                "content": "$1",
                "example": "1984"
            }
        }
    },
    "test_4": {
        "message": "当前 $ 第几 $ 个"
    },
    "test_5": {
        "message": "$1 / $2"
    },
    "test_6": {
        "message": "测试 $ass$ 尾 $bbb$ 多 $ccc$ 组",
        "placeholders": {
            "ass": {
                "content": "$1"
            },
            "bbb": {
                "content": "$2"
            },
            "ccc": {
                "content": "$3"
            }
        }
    }
}

การชำระเงินแบบกำหนดเอง_เว็บ

自定义支付是高级玩法，如果你是初级玩家请忽略！通过浏览器扩展content.js注入到网页之中，在被注入网页中拉起支付示例： คลิกที่นี่เพื่อดาวน์โหลดซอร์สโค้ดตัวอย่าง
正常情况下当用户点击Web中扩展注入的按钮，可以直接使用功能：

button.addEventListener("click", () => {//网页上注入的按钮被点击
    pay_ok();
});

当我们加入Web拉起支付，就像下方代码一样写

button.addEventListener("click", async() => {//网页上注入的按钮被点击
    if (await pay_is()) {// ✅ 判断是会员则
        pay_ok();
    }else{//不是会员则
        chrome.runtime.sendMessage({ action: "OpenPopupPay" });//拉起支付
    }
});

ป๊อปอัพการชำระเงินแบบกำหนดเอง

自定义支付是高级玩法，如果你是初级玩家请忽略！通过浏览器扩展popup页面中，通过js拉起支付示例： คลิกที่นี่เพื่อดาวน์โหลดซอร์สโค้ดตัวอย่าง
正常情况下当用户点击Popup中的按钮，可以直接使用功能：

document.getElementById('btn').addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
    chrome.tabs.sendMessage(tab.id, {action: 'getImages'}, async (images) => {
        let limit = images.length;
        for (let i = 0; i < limit; i++) {
            chrome.downloads.download({url: images[i], filename: `image_${i+1}.jpg`});
        }
    });
});

当我们加入Popup拉起支付，就像下方代码一样写，其中showVipDialog()方法是用户使用Ai生成的弹窗页面，该页面用于弹窗用户当前并非会员是否充值会员，下方有两个按钮：1[充值会员] -> 2[继续使用免费功能]

document.getElementById('btn').addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
    chrome.tabs.sendMessage(tab.id, {action: 'getImages'}, async (images) => {
        let limit = images.length;
        
        //*********************************************************
        if (!await pay_is()) {//判断不是会员，则
            const choice = await showVipDialog();
            if (choice === '用户点击了升级会员按钮'){
                chrome.runtime.sendMessage({ action: "OpenPopupPay" });//拉起支付
                return; // 拉起支付，不下载
            }
            limit = 5;//不是会员就将数组数量设置为5，意思是免费下载5次，之后的收费
        }
        //***************************************************************************
        
        for (let i = 0; i < limit; i++) {
            chrome.downloads.download({url: images[i], filename: `image_${i+1}.jpg`});
        }
    });
});