宽版显示
收藏主题
复制链接
回复
15
查看
879
收藏
6
返回列表 发新帖
960666

13

赠楼

2%

赠楼率

1178

蒸汽

171

主题

1827

帖子

4888

积分
发表于 昨天 11:33 · 重庆 | 显示全部楼层 |阅读模式
本文为 其乐用户(UID:960666) 发布的原创文章，转摘前请联系该用户获得许可
本帖最后由 960666 于 2025-5-22 23:00 编辑

有时候想给京东购物车商品加点备注，可用场景包括但不限于加购物车的原因、心理价位、用途备忘等等，（顺带一提，我觉得这是京东本来就应该有的功能，也给过京东反馈，然并卵）
于是在Deepseek的帮助下简单写了个Tampermonkey脚本，可以跨设备同步备注(非自动，需要借助Tampermonkey备份手动同步，可以用Dropbox、OneDrive、Google网盘、WebDAV等)，因为纯粹读取的页面元素，靠商品ID识别，没有调用任何京东API和账号信息，理论上没什么安全漏洞（但还是欢迎大佬检查）。

源码如下：





  1. // ==UserScript==
  2. // @name         京东购物车商品备注
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  为京东购物车商品添加持久化备注标签
  6. // @author       https://space.bilibili.com/32200385
  7. // @match        https://cart.jd.com/cart_index*
  8. // @grant        GM_setValue
  9. // @grant        GM_getValue
  10. // ==/UserScript==


  13. (function() {
  14.     'use strict';


  17.     // 自定义样式
  18.     const style = document.createElement('style');
  19.     style.textContent = `
  20.         .remark-container {
  21.             margin-top: 8px;
  22.             color: #e4393c;
  23.             font-size: 12px;
  24.             cursor: pointer;
  25.             padding: 2px 5px;
  26.             border-radius: 3px;
  27.             background-color: #fff7f8;
  28.             border: 1px solid #ffd6d8;
  29.         }
  30.         .remark-container:hover {
  31.             background-color: #ffeef0;
  32.         }
  33.     `;
  34.     document.head.appendChild(style);


  37.     // 初始化备注系统
  38.     function initRemarks() {
  39.         // 使用MutationObserver监听DOM变化
  40.         const observer = new MutationObserver(mutations => {
  41.             mutations.forEach(mutation => {
  42.                 if (mutation.addedNodes.length) {
  43.                     processItems();
  44.                 }
  45.             });
  46.         });


  49.         observer.observe(document.body, {
  50.             childList: true,
  51.             subtree: true
  52.         });


  55.         // 初始处理
  56.         processItems();
  57.     }


  60.     // 处理所有商品项
  61.     function processItems() {
  62.         document.querySelectorAll('div.item-item[data-sku]').forEach(item => {
  63.             const sku = item.dataset.sku;
  64.             const pPropsDiv = item.querySelector('.cell.p-props');


  67.             // 防止重复添加
  68.             if (!pPropsDiv.querySelector('.remark-container')) {
  69.                 // 创建备注容器
  70.                 const remarkDiv = document.createElement('div');
  71.                 remarkDiv.className = 'remark-container';
  72.                 remarkDiv.textContent = GM_getValue(`remark_${sku}`, '双击添加备注');


  75.                 // 添加双击事件
  76.                 remarkDiv.addEventListener('dblclick', function() {
  77.                     const remark = prompt('请输入商品备注:', GM_getValue(`remark_${sku}`) || '');
  78.                     if (remark !== null) {
  79.                         GM_setValue(`remark_${sku}`, remark.trim());
  80.                         this.textContent = remark.trim() || '双击添加备注';
  81.                     }
  82.                 });


  85.                 pPropsDiv.appendChild(remarkDiv);
  86.             }
  87.         });
  88.     }


  91.     // 等待购物车加载完成
  92.     const checkExist = setInterval(() => {
  93.         if (document.querySelector('.item-item')) {
  94.             clearInterval(checkExist);
  95.             initRemarks();
  96.         }
  97.     }, 500);
  98. })();
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？注册

×
回复

使用道具 举报

浏览本版块需要：
1. 初阶会员或更高等级；
2. （点击此处）绑定Steam账号
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

欢迎发帖参与讨论 o(*≧▽≦)ツ，请注意
1. 寻求帮助或答案的帖子请发到问题互助版块，悬赏有助于问题解决的速度。发错可能失去在该板块发布主题的权限（了解更多）
2. 表达观点可以，也请务必注意语气和用词，以免影响他人浏览，特别是针对其他会员的内容。如觉得违规可使用举报功能 交由管理人员处理，请勿引用对方的内容。
3. 开箱晒物，交易中心，游戏互鉴和福利放送版块请注意额外的置顶版规。
4. 除了提问帖和交易帖以外，不确认发在哪个版块的帖子可以先发在谈天说地。
　　作为民间站点，自 2004 年起为广大中文 Steam 用户提供技术支持与讨论空间。历经二十余载风雨，如今已发展为国内最大的正版玩家据点。

列表模式 ·
微信公众号
· 微博 · Bilibili频道 · Steam 群组 · 贴吧 · QQ群 
Keylol 其乐 ©2004-2025 Chinese Steam User Fan Site.
Designed by Lee in Balestier, Powered by Discuz!
推荐使用 Chrome 或 Microsoft Edge 来浏览本站
广告投放|手机版|广州数趣信息科技有限公司 版权所有|其乐 Keylol ( 粤ICP备17068105号 )
GMT+8, 2025-5-23 12:12
快速回复 返回顶部 返回列表