WWWISHLIST是一个Chrome扩展名,能够从网络上的任何网站保存愿望到Chrome浏览器的本地存储。因此,您的数据完全私密。
该扩展程序目前已发布未列出,一旦我的朋友对其进行了1-2个月的测试,将完全公开。
有关更详细的说明,请参见Chrome Storepage。
在下面,您会找到有关内部运作的简要概述,计划的内容以及您想成为贡献者,一些文档和许可证内容。
wwwishlists的心脏是弹出窗口(HTML,控制器和视图)与刮板一起。
刮板将代码从打开的弹出窗口返回图像的地方将代码注入到网站中。我尝试抓住价格,但我很快了解到价格通常不只是文本字段(或多个)。图像略微过滤,以删除绝对不是产品图像的图像。我决定不将其注入页面上的每个iframe,因为我遇到了Amazon.de网站上的问题。如果您知道为什么存在这个问题,请让我的一天告诉我。用户输入所有数据并保存后,将所选图像绘制到帆布缩小为200x200像素并转换为base64数据,因为Chrome Extension API仅允许一个大JSON文件用于本地存储。如果此过程陷入CORS问题,则图像URL将被保险。
我没有计划任何重大功能更新。我对任何扩展名无法执行的网站都非常感兴趣。接下来我可能会写的是功能的适当单位测试。我在让所有工作工作的同时进行了测试,并后悔没有自动化我在此期间写的伪测试。我真的很想节省更高的价格/货币(现在只是一个字符串),但是要对我想使用它感到满意,这意味着我可能希望能够在愿望清单上添加所有项目总数最多可达一个(用于项目愿望清单)。为此,我需要调用货币转换器API。我想念的另一个大功能是一种简单的共享方法,不涉及我运行服务器。
如果您想从事新功能,请提出一个GitHub问题,我想与您合作,以最终批准您的拉力请求。如果您只想进行错误修复或更新DOCS拖拉请求,则非常欢迎。如果您想从该项目中构建/分叉:整个项目都在GPL 2下发布。我选择了GNU,以使代码无吸引力用于商业化,而不限制非商业共享和更改。如果您想提供帮助但不知道什么,请在“计划中的内容”中以上。
为了在计算机上设置项目,您需要NPM 10.5或更高版本。一旦您运行代码
npm install
为了安装依赖项, bulma和node-sass在package.json中指定。如果您想从SASS更改中生成新的Bulma文件,只需运行
npm css-build
或者,如果您希望这种情况在Sass Run工作时自动发生
npm start
连续构建Bulma。
为了将此Chrome扩展添加到您的Chrome Store中,请单击右上角的拼图图标 - >管理扩展名 - >打开开发人员模式 - >加载打开包装,然后在您的目录中选择全球愿望清单文件夹。
因此,您安装了开发人员版本。
Chrome存储API是邪恶的,因为它仅允许您存储到一个大单个.json文件中。该文件可通过开发工具访问,但更重要的是在Storagetemplate中。您可以看到DB结构。
该存储只能从模型和数据库手工访问。
我目前不相信人们会想做出贡献,所以现在我不会解释每个功能,而是更多的结构。如果您真的想这样做,请告诉我,我很高兴解释您不了解的任何内容(并写更多详尽的文档)。
我主要遵循代码中的MVC模式。总结每个页面都有一个控制器和一个视图,而每个数据点都有一个模型。每个模型都负责属于它的CRUD(创建读取更新删除)操作。每个视图仅显示数据或从用户中检索数据。每个控制器都在等待用户操作,并呼吁视图和模型从事各自的工作。版本控制是根据语义版本2.0.0进行的
目前,程序结构如下:
安装或更新背景。mjs调用dbmanager.mjs设置数据库。除此之外,Background.mjs使上下文菜单条目发生在右键单击的扩展图标菜单中。
从安装时从background.mjs调用以设置本地存储JSON,以便DB工作。如果要更改数据库结构的功能,则在此处也会发生更新的迁移。
在这里,数据库值的所有限制(最小值和最大值)实时。
该扩展名使用UUID V7,这意味着ID以UNIX时间戳开头,并以随机数继续。这对于正确导入数据很重要(IE唯一数据实际上是唯一的)。
您猜到了此文件规则如何导入和导出数据。这就是该扩展名使用下载权限的原因。用户仅从“设置”页面访问该功能。
这些文件是处理愿望和愿望列表对象的CRUD操作的类。
现在,settingscontroller.mjs现在只能真正用于调用导出导入功能(加上按钮链接)。目前没有设置,但也许您可以更改它!
用户通过这两个文件与myWishList.html进行交互。编辑,删除,删除,移动的愿望,创建愿望清单都在这里发生。
如果单击弹出窗口,控制器会调用scraper.mjs,并使用刮板检索的数据填充视图,然后填充弹出窗口,以便用户可以决定要保存哪个图片以及要添加哪些信息。用户完成视图获取该数据的功能后,将相应图片转换为base64,然后回复控制器以保存。
刮板将代码从打开的弹出窗口返回图像的地方将代码注入到网站中。我尝试抓住价格,但我很快了解到价格通常不只是文本字段(或多个)。图像略微过滤,以删除绝对不是产品图像的图像。我决定不将其注入页面上的每个iframe,因为我遇到了Amazon.de网站上的问题。如果您知道为什么存在这个问题,请让我的一天告诉我。
感谢Kjeld Schmidt在整个项目中一直是一名不断的导师和耐心的老师。没有您的指导,我什至不会开始编码。
感谢Huddel为我提供了一个很棒的图像未发现的鳄鱼。
感谢我所有其他朋友,家人和互联网陌生人,以帮助测试。
感谢Jason Thor Hall建立了一个很棒的程序员社区,并允许将其商店用作我的教程屏幕截图材料。