Documentació de desenvolupament

Introducció

ExtensionPay és un marc de desenvolupament d'extensions de navegador dissenyat per a la IA. Podeu utilitzar la IA per crear aplicacions d'extensions purament funcionals i de funció única, cosa que actualment és una capacitat de la IA. Tanmateix, és poc probable que s'aconsegueixi a curt termini la construcció de sistemes complexos madurs i robustos amb IA. Hem desenvolupat aquest sistema d'arquitectura per maximitzar les capacitats existents de la IA. Quan desenvolupeu una aplicació purament funcional mitjançant la IA, les funcions d'inici de sessió i pagament es poden afegir automàticament amb un sol clic, i es poden traduir automàticament 55 idiomes amb un sol clic. Com a usuaris contractats exclusius, també gaudiu de la càrrega automatitzada amb un sol clic, cosa que escurça considerablement el procés i el temps de desenvolupament, eliminant la necessitat de crear serveis de backend. Aquest marc serveix principalment a aquells que no poden escriure codi però que poden desenvolupar programes mitjançant la IA, ajudant-los a monetitzar els seus programes dissenyats amb llenguatge natural.
本框架主要服务人群是哪些不会写代码，但可以使用Ai开发出程序的人群，协助他们通过自然语言设计出的程序可以盈利

curs

Cursos

Exemple de paraules clau d'IA

Aquest és un exemple de paraules clau canòniques per desenvolupar extensions de navegador.

你是一个开发Chrome扩展程序的专家，下方是开发Chrome扩展的规范化文档：

0、所有技术相关的都要用最新版本和最新信息，所有用户可见的文本必须使用多语言系统，包括js中动态显示的文本。
1、全局代码采用UTF-8编码
2、开发谷歌浏览器扩展之前，必须尽可能少的使用permissions权限，尽可能不使用，如果用户的需求必须使用敏感权限，你需要告知用户哪里使用的敏感权限坏处是什么，若必须使用你需要向我证明你使用权限的必要性理由
3、权限域名需要考虑国际化，例如test.de、de.test.com
4、代码需要简洁功能纯粹，非必要不额外增加代码，只需要最纯粹的纯功能，你需要向我证明代码是极简的没有多余的东西
5、扩展需要有popup.html页面，popup页面必须具备自适应，pupop页面必须要有一个纯a标签target="_blank"在新窗口打开的按钮，用户看起来是一个按钮，标题为示例网址，和使用教程的元素，点击示例网址跳转到示例页面
6、多语言_locales只需要创建zh_CN目录，并严格按照下方规范加入多语言，你需要向我证明所有代码中多语言正确加入没有遗漏
7、你需要使用纯原生Js开发浏览器扩展，注解是中文的
8、适当的增加一些必要的Css样式，保持基本的页面美观性，例如按钮标签图片的基本样式
9、这个文件夹里的代码是我自己后期手动加入的/nbsdk/，所有关于这个文件夹的代码直接跳过
10、每个界面上都需要有一个比较显眼位置例如页面下方文本显示：联系作者邮箱：9723331@gmail.com，售后邮箱：9723331@gmail.com
11、确保给我详细的项目文件目录结构，文件名，文件对应的内容
12、多语言只需要翻译用户可见的静态或动态ui显示的内容，console.log打印的日志报错之类的无须多语言

先不着急开发，先给我一份开发蓝图和目录结构，并依次向我证明你蓝图和我命令与规范化示例的对应关系





下方是必要的规范化示例，请务必按照规范化示例和其特定风格研发程序：
```
目录结构的规范化与命名示例：
├── _locales/
│   └── zh_CN/
│       └── messages.json
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
├── background.js
├── content.js
├── manifest.json
└── README.md
```


```
配置文件规范化格式示例：manifest.json
{
    "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:PLACEHOLDER_0_ab5ef4f4f41b202126ae3aa20f27369b
}
```
```
homepage_url里面只有带uninstall_url，才会卸载后跳转该链接
background配置必须按照正确示例设置
    ✅正确的background配置示例："background":{"service_worker":"background.js"}
    ❌错误的background配置示例："background":{"service_worker":"background.js","type":"module"}
    ✅正确的引用方法示例：importScripts("");
    ❌错误的引用方法示例：import("");
```
```
多语言文件 _locales/zh_CN/messages.json 必须严格遵循以下格式：

1. 文件结构要求：
    ✅HTML中的静态文本使用 data-i18n 属性
    ✅JavaScript中的动态文本使用 chrome.i18n.getMessage()，下方有示例
    ✅确保所有用户可见文本必须使用多语言系统，确保没有硬编码的中文文本
    ✅只允许出现键名如：app_name、 message 、placeholders字段
    ❌严禁使用，非标准格式外的，占位符、变量替换、参数等任何额外内容
    ❌不得出现 description等其他字段，必须保证语言包积极小
    ❌不得出现非可翻译中文语言类，例如网址链接，特殊符号等等，示例："message": "www.baidu.com"
   
2. 标准格式，多语言格式示例：\_locales\zh_CN\messages.json：
{
    "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"
            }
        }
    }
}




页面配置多语言Demo示例：popup.html
    
    
        ">
        
            ">界面文本1
            
            ">当前第0个
            
        
    
------------------------------
popup.js多语言Demo示例：
    var i = "5";
    const a = document.getElementById("test_i");
    a.textContent = chrome.i18n.getMessage("leng_3", [i]);
    PLACEHOLDER_1_3f2b0ab17855c3c33d913987e7cd7ad6
    function debugI18n(){
        document.querySelectorAll("[data-i18n]").forEach(element => {
            const message = chrome.i18n.getMessage(element.dataset.i18n);
            if(message){
                if(element.tagName.toLowerCase() === "optgroup"){
                    element.label = message;
                }else if(element.hasAttribute("placeholder")){
                    element.placeholder = message;
                }else{
                    element.textContent = message;
                }
            }
        });
    }
    document.addEventListener("DOMContentLoaded", debugI18n);// 在文档加载完成后调用I18n多语言
```

Entorn d'instal·lació

1. Instal·leu Google Chrome

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

2. Activa les extensions de fitxer de Windows

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

3. Instal·leu el 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

4. Instal·leu Python

下载链接： http://python.org/ftp/python/3.10.6/python-3.10.6-amd64.exe
以管理员身份运行，勾选下方出现的两个选项：
✓ [install launcher for all users]
✓ [Add Python 3.10 to PATH]，后点击上方[Customize installation]
之后勾选出现的所有选项，点击[Next]
之后可以看到安装路径，全选复制并记住路径，并点击[Install]
安装完成之后，若出现[Disable path length limit]，就点击
之后将刚复制的路径，在文件管理器打开，打开后点击文件路径，并全选删除文件路径
并输入cmd后点击键盘上的[Enter]，之后会弹出一个窗口
在窗口中依次输入以下两个命令,每次输入命令后需要等待1分钟后再输入新的命令：
python -m venv venv
venv\Scripts\activate

5. Instal·leu PyCharm

下载链接： jetbrains.com/zh-cn/pycharm/download
打开下载链接后，直接点击[下载]二字即可
下载完成后安装，安装时默认目录即可，之后页面勾选所有出现的选项：
✓ [PyCharm]
✓ [将bin文件夹添加到PATH]
✓ [添加将文件夹打开为项目]
✓ [.py]
勾选后点击 [下一步] -> [安装]
安装成功后打开，点击[新建项目] -> 勾选✓[创建欢迎脚本] -> [创建]
创建项目后，点击[main.py]，在代码框内，鼠标右键点击[运行main]
运行结果会显示在下方，如果运行结果是[Hi, PyCharm]就说明PyCharm安装成功
之后PyCharm左下角有一个选项叫[终端]点击打开，输入以下命令： pip install urllib3 requests beautifulsoup4
之后下载：[Hook注入扩展所需.py]
中国版： https://www.google.cn/
国际版： https://www.google.com/
下载完成后，右键选择该文件 -> [复制] -> 回到PyCharm，鼠标右键点击[main.py] -> [打开于] -> [资源管理器] -> 粘贴

6. Llocs web per descarregar icones

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

7. URL comunes d'IA

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

8. Dreceres de teclat habituals

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

9. Programari que impedeix les actualitzacions del sistema de Windows

中国下载链接： https://hefen.lanzoue.com/b00q0hgfab
国际下载链接： https://drive.google.com/file/d/1IwiI30Zg12DlggduaGGfG7G4Bh--7rhC

10. Eina de captura de pantalla

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

Pagament personalitzat_Web

通过浏览器扩展content.js注入到网页之中，在被注入网页中拉起支付示例： Feu clic per descarregar el codi font de demostració. pay_is()用于判断用户是否支付，如果没支付返回false，支付了返回true

async function pay_is() {
    const { userInfo } = await chrome.storage.local.get("userInfo");
    if (Math.floor(Date.now()/1000)  Math.floor(Date.now() / 1000))) {
        return true;
    }
    return false;
}

正常情况下当用户点击Web中扩展注入的按钮，可以直接使用功能：

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

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

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

Finestra emergent de pagament personalitzada

通过浏览器扩展popup页面中，通过js拉起支付示例：Feu clic per descarregar el codi font de demostració. pay_is()用于判断用户是否支付，如果没支付返回false，支付了返回true

async function pay_is() {
    const { userInfo } = await chrome.storage.local.get("userInfo");
    if (Math.floor(Date.now()/1000)  Math.floor(Date.now() / 1000))) {
        return true;
    }
    return false;
}

正常情况下当用户点击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

当我们加入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
        }
        //***************************************************************************
        
        for (let i = 0; i

Tutorial de càrrega

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

Exemple de fitxer de manifest estàndard

1、manifest.json

Aquesta és una demostració de fitxer de manifest d'extensió estàndard de Google d'exemple que es pot utilitzar com a referència.

paràmetre	il·lustrar
`version_name`	Si el valor és [1.8 npy], no es mostraran l'inici de sessió ni el pagament. Tanmateix, l'inici de sessió ni el pagament es poden iniciar mitjançant un pagament personalitzat. "npy" significa "NoPay", que desactiva el pagament. Si sou principiants i no ho enteneu, podeu optar per no fer res i utilitzar el valor per defecte.
`homepage_url`	Si el valor inclou `uninstall_url`, l'usuari serà redirigit a aquest enllaç després de la desinstal·lació; en cas contrari, s'utilitza la funció `homepage_url` per defecte tal com es defineix a la documentació oficial de Google.
`author`	`author=appid` és un camp obligatori i s'ha de definir de manera diferent per a cada extensió. S'utilitza principalment per identificar de quina extensió es tracta. El format del nom `appid` és: [Nom de l'autor_Nom de l'extensió_Tres números]
`__MSG_app_name__`	Aquest nom és un valor per defecte del sistema i no es pot personalitzar.
`__MSG_app_short_name__`	Aquest nom és un valor per defecte del sistema i no es pot personalitzar.
`__MSG_app_description__`	Aquest nom és un valor per defecte del sistema i no es pot personalitzar.

{
    "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

Aquesta és una demostració de fitxer multilingüe d'extensió estàndard de Google. El format següent es pot traduir automàticament i es pot utilitzar com a referència.

paràmetre	il·lustrar
`app_name`	El nom app_name és un valor fix per defecte establert pel sistema i no es pot personalitzar.
`app_short_name`	El nom app_short_name és un valor predeterminat fix establert pel sistema i no es pot personalitzar.
`app_description`	El nom `app_description` és un valor predeterminat fix establert pel sistema i no es pot personalitzar.

{
    "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"
            }
        }
    }
}