☰

亚马逊搜索结果添加序号和广告ID

为亚马逊搜索结果页面上的广告和自然搜索结果添加序号, 并为广告结果添加广告ID和活动ID

当前为 2024-05-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         亚马逊搜索结果添加序号和广告ID
  3. // @namespace    https://noobbei.top
  4. // @version      1.1.1
  5. // @description  为亚马逊搜索结果页面上的广告和自然搜索结果添加序号, 并为广告结果添加广告ID和活动ID
  6. // @author       noobbei
  7. // @match        https://www.amazon.com/*
  8. // @match        https://www.amazon.co.uk/*
  9. // @match        https://www.amazon.de/*
  10. // @match        https://www.amazon.it/*
  11. // @match        https://www.amazon.fr/*
  12. // @match        https://www.amazon.es/*
  13. // @match        https://www.amazon.se/*
  14. // @match        https://www.amazon.com.mx/*
  15. // @match        https://www.amazon.co.jp/*
  16. // @match        https://www.amazon.ca/*
  17. // @icon         https://www.amazon.com/favicon.ico
  18. // @license      MIT
  19. // @grant        none
  20. // ==/UserScript==
  21.  
  22.  
  23. (function() {
  24.     'use strict';
  25.  
  26.     // 封装逻辑于一个函数中
  27.     const applyLabelsAndIds = () => {
  28.         // 计数器重置
  29.         let adCounter = 1;
  30.         let searchResultCounter = 1;
  31.  
  32.         // 获取所有搜索结果的元素
  33.         let searchResults = document.querySelectorAll('div[data-component-type="s-search-result"], .sbv-video-single-product');
  34.  
  35.         searchResults.forEach(result => {
  36.             let label;
  37.             let adIdElement;
  38.             let campaignIdElement;
  39.  
  40.             // 检查是否已添加过标签
  41.             if(result.querySelector('.ad-counter-label, .search-result-counter-label')) {
  42.                 return; // 如果已添加标签，跳过这个元素
  43.             }
  44.  
  45.             // 检查是否是广告
  46.             if (result.classList.contains('AdHolder') || result.classList.contains('sbv-video-single-product')) {
  47.  
  48.                 // 创建序号标签
  49.                 label = createLabel(`${adCounter}`, 'gold');
  50.                 label.classList.add('ad-counter-label'); // 添加自定义类以避免重复添加
  51.  
  52.  
  53.                 // 从data-s-safe-ajax-modal-trigger属性获取广告ID
  54.                 let adDataAttribute = result.querySelector('[data-s-safe-ajax-modal-trigger]');
  55.                 // console.log('adData');
  56.                 // console.log(adDataAttribute);
  57.                 let adId = null;
  58.                 let campaignId = null;
  59.                 if (adDataAttribute) {
  60.                     // 解码HTML实体，然后解析JSON
  61.                     const adData = JSON.parse(adDataAttribute.getAttribute('data-s-safe-ajax-modal-trigger'));
  62.                     let ajaxUrl = adData.ajaxUrl;
  63.                     adId = decodeURIComponent(ajaxUrl).match(/"adId":"([^"]*)"/)[1];
  64.                     campaignId = decodeURIComponent(ajaxUrl).match(/"campaignId":"([^"]*)"/)[1];
  65.  
  66.                 }
  67.  
  68.                 // 如果找到广告ID，则创建并添加一个包含广告ID的标签
  69.                 if (adId) {
  70.                     adIdElement = createIdElement(`广告Id: ${adId}`);
  71.  
  72.                 }
  73.  
  74.                 if (campaignId) {
  75.                     campaignIdElement = createIdElement(`活动Id: ${campaignId}`);
  76.  
  77.                 }
  78.  
  79.  
  80.                 // 增加广告计数器
  81.                 adCounter++;
  82.  
  83.             } else {
  84.                 // 创建序号标签
  85.                 label = createLabel(`${searchResultCounter}`, 'green');
  86.                 label.classList.add('search-result-counter-label'); // 添加自定义类以避免重复添加
  87.  
  88.                 // 增加搜索结果计数器
  89.                 searchResultCounter++;
  90.             }
  91.  
  92.             // 将序号标签预置到搜索结果元素的顶部
  93.             result.insertBefore(label, result.firstChild);
  94.             if(adIdElement){
  95.                 // 将广告ID标签插入到广告序号标签之后
  96.                 result.insertBefore(adIdElement, label.nextSibling);
  97.             }
  98.  
  99.             if(campaignIdElement){
  100.                 // 将活动ID标签插入到广告序号标签之后
  101.                 result.insertBefore(campaignIdElement, adIdElement.nextSibling);
  102.             }
  103.         });
  104.     };
  105.  
  106.     // 创建标签的函数，避免重复代码
  107.     function createLabel(text, backgroundColor) {
  108.         let label = document.createElement('span');
  109.         label.textContent = text;
  110.         // 样式设置
  111.         label.style.backgroundColor = backgroundColor;
  112.         label.style.borderRadius = '50%';
  113.         label.style.color = '#000';
  114.         label.style.display = 'inline-table';
  115.         label.style.width = '25px';
  116.         label.style.height = '25px';
  117.         label.style.textAlign = 'center';
  118.         label.style.marginLeft = '10px';
  119.         label.style.marginRight = '5px';
  120.         label.style.lineHeight = '25px';
  121.         label.style.verticalAlign = 'middle';
  122.         return label;
  123.     }
  124.  
  125.     // 创建广告id或活动id元素的函数，避免重复代码
  126.     function createIdElement(text) {
  127.         let idElement = document.createElement('span');
  128.  
  129.         idElement = document.createElement('span');
  130.         idElement .textContent = text;
  131.         idElement .style.backgroundColor = '#DAA520'; // 金色背景色
  132.         idElement .style.color = '#FFFFFF'; // 白色字体
  133.         idElement .style.fontWeight = 'bold'; // 字体加粗
  134.         idElement .style.padding = '3px 6px'; // 内边距
  135.         idElement .style.marginLeft = '10px'; // 左边距
  136.         idElement .style.borderRadius = '4px'; // 边框圆角
  137.         idElement .style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.3)'; // 简单阴影效果
  138.         idElement .style.fontSize = '0.75rem'; // 字体大小
  139.         idElement .style.textAlign = 'center'; // 文本居中
  140.         idElement .style.verticalAlign = 'middle'; // 垂直居中
  141.         idElement .style.display = 'inline-block'; // 使用inline-block以便应用宽高、边距等
  142.         idElement .style.minWidth = '80px'; // 最小宽度，保证布局的一致性
  143.         idElement .style.height = '20px'; // 元素高度
  144.         idElement .style.lineHeight = '20px'; // 行高与元素高度一致以垂直居中文本
  145.         return idElement;
  146.  
  147.  
  148.     }
  149.  
  150.     // 使用MutationObserver来监视DOM的变化
  151.     let observer = new MutationObserver((mutations) => {
  152.         mutations.forEach((mutation) => {
  153.             if (mutation.addedNodes.length) {
  154.                 applyLabelsAndIds();
  155.             }
  156.         });
  157.     });
  158.  
  159.     // 监视整个body的变化
  160.     observer.observe(document.body, {childList: true, subtree: true});
  161.  
  162.     // 初次调用
  163.     applyLabelsAndIds();
  164. })();