当前位置:首页 > 每日看点

如何编写一个chrome和edge可以使用的扩展程序?

卡卷网2年前 (2025-01-10)每日看点277

开发背景

最近学习了Csor,又想开发一个Chrome扩展,可以方便地下载网页中的图片和视频,最后上传到应用市场,总结一下这次的经验。

开发过程

第一阶段:实现基础图片下载

    首先我们实现了最基本的图片拖拽功能

创建了一个固定在右上角的下载区域

遇到第一个问题:图片拖到区域后会在新标签页打开

让AI改进代码,使用chrome.downloadsAPI实现直接下载

分析发现某些的图片被特殊处理过

尝试了多种方案:

克隆节点方案(失败)

修改事件方案(部分成功)

直接设置属性方案(最终采用)

优化了下载区域的视觉反馈

添加了下载状态提示

这一块较简单,和csor口语化对话提要求,十分钟就完成了。

第二阶段:添加站视频解析

实现了基本的视频解析功能

添加了一个的工具按钮

    发现布局问题:两个功能区域重叠4.优化布局:

图片下载区域放在右上角

视频解析按钮放在右下角

使用站主题色

添加交互动效

这个阶段出了一点问题,csor无法理解如何直接从视频下载视频,抓取解析的节点无法下载,所以我找了现成的发给csor让它模仿学习,还是挺有效果的。

第三阶段:学习工具经验

分析了下载工具的实现方式

观察它们的网络请求和志

学习到了一些技巧:

如何正确解析视频

如何处理特殊的图片元素

如何优化用户体验

通过这次与Csor协作的经验

有效的沟通方式

清晰描述当前问题

提供具体的错误信息

说明期望的效果

分享参考实现的例子

开发策略

每次只解决一个问题

先实现基本功能再优化

及时和验证

保留已经可用的代码

AI的优势

快速生成基础代码

提供多种解决方案

帮助解决技术难点

可以学习和分析代码

实用技巧

开发过程中的技巧

使用console.log跟踪问题

观察工具的实现方式

分步骤推进开发

及时处理发现的问题

调试技巧

查看网络请求了解API

分析工具的志

各种特殊情况

在不同验证功能

总结

这次开发经历让我深刻体会到:

AI是很好的编程助手,但需要学会如何与它协作

观察和学习他人的实现很重要

开发过程要循序渐进

持续优化才能做好产品

推荐一个csor-固定ruless://kdo/l/cqCaEsjlTcwK

Chrome扩展上传应用市场的曲折之路

初次尝试:GoogleChrome网上应用店

作为一个新手开发者,我首选的当然是Chrome网上应用店。然而现实很快给了我一记重拳:

需要支付5美元的开发者注册费

支付过程中遇到交易失败

即使按提示去个人中心查看,依然显示"正在审核资料"

最终不得不暂时放弃这条路

转战Edge插件市场

既然Chrome之路暂时受阻,我决定尝试Edge插件市场。但是这个过程同样充满了挑战。

注册步骤详解

基础准备

首先需要注册Microsoft账号

访问Edge插件市场:s://microsoftedge.microsoft/addons/Microsoft-Edge-Extensions-Home

点击"发布扩展"进入详情页

开发者账号注册

可直接访问注册页面:s://partner.microsoft/zh-cn/dashoard/registration/AccountInfo

选择个人开发者身份

选择国家为中国

填写基本信息

关键注意事项

如果提交不通过,将语言标记修改为"en-us"

多次尝试无效可以切换:

不同

热点

关闭

最终切换成才有

State/Province必须使用浏览器作,因为只有端显示下拉选择框(我的电脑这个必填,没有下拉框,每次都会报错,最终换才成功)

支付环节

成功提交后会跳转到支付页面

需要支付约100多元的账号费用

支付完成后自动进入发布流程(我直接关闭了,也可以发布插件包)

发布流程

准备材料

代码打包成zip文件,包含:

manifest.json

ackground.js

content.js

styles.s

images/icon.svg

在iconfont准备应用图标

编写应用详情描述

提交审核

上传zip包

上传应用图标

填写详细信息

点击发布等待审核

结语

从构思需求、开发实现,到最后的应用市场发布,整个过程既有技术层面的挑战,也有流程上的波折。虽然过程曲折,但最终看到自己的作品上线还是很有成就感的。希望这些经验能帮助到想要发布浏览器扩展的开发者,少走一些弯路。

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2025/01/8580.html

分享给朋友:

相关文章

200+ 工具,这个网站堪称最强

200+ 工具,这个网站堪称最强

作为一个乱七八糟什么都懂一点的电脑小白,日常经常被别人增加些临时任务,比如PDF转Word,提取视频里的音频,图片加个边框。之前,电脑里安装了不少这类的软件,虽然能满足要求,但装的多了,总感觉电脑卡卡的。最近发现了一个超强的在线工具网站,首…

马云也搞不明白:为什么现在用户偏爱微信支付,而不是支付宝?

这题我会,我教马云一招。 你直接把你那破比支付宝的代码全删了,重新写一个。 打开支付宝直接就是一个大大的支付码,然后右上角按一下就是扫一扫。你要是还想保留你的其他那些乱七八糟的功能,麻烦将他们全部做到下拉菜单里。你这么设计我不说你能干死微信…

程序员都有自己的服务器吗?

程序员都有自己的服务器吗?

2024.9. 24,有朋友咨询功耗,我没有单独给服务器弄智能插座,系统做的 esxi 也看不到,所以只能用其他角度判断供大家参考。 我有一个餐边柜改的机柜,里面白裙两盘,黑群晖 4 机械 1 mvme,一个爱快硬路由,一个联通光猫,一个…

客观的讲,华为是不是真的遥遥领先?

客观的讲,华为是不是真的遥遥领先?

最近,华为上市了最新款的三折叠屏手机,于是很多大V们把这款手机吹上了天,吹成是技术上遥遥领先于全世界。谁要是敢质疑华而不实,就会被人扣上一顶汉奸卖国贼美狗的帽子。把一个商品捧成了宗教和菩萨,你只能说好,不能说不好。其实这个世界上,只要是人和…

怎样使自己处于高能量状态?

1、 不要习惯性的回顾过去那些让你尴尬和犯了错误的事情,不要嫌弃自己蠢。 学会原谅自己,当你不断回忆那些错误和囧事的时候,告诉自己:自己确实做错了,下次不要再犯即可,不需一遍遍的回忆。 这件事情已经发生,不要再一遍遍的折磨自己,不断回忆一点…

本专业是电气的,请问入门plc 必须要从电工接线开始吗,我怕被公司骗了,想请教各位?

本专业是电气的,请问入门plc 必须要从电工接线开始吗,我怕被公司骗了,想请教各位?

开关接线图 PART 01一开单控开关接线图 二三开连体单控开关接线图 四开连体单控开关接线图 一开五孔单控插座接线图 二开五孔单控插座接线图 一开双控开关接线图 二三开单控开关接线图 四开单控开关接线图 一…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。