Chrome扩展中如何动态创建可关闭的列表项？

嘿，作为jQuery新手能搞定价格抓取已经超棒啦！我来帮你一步步实现popup里的可关闭动态列表，整个流程分为几个核心部分，咱们慢慢拆解～

首先得给popup.html写好HTML和基础样式，确保列表能正常显示，还能支持关闭按钮：

<!DOCTYPE html>
<html>
<head>
  <title>商品价格追踪</title>
  <!-- 引入jQuery，你也可以下载本地版本放到扩展文件夹里 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 简单美化，让列表更友好 */
    body {
      width: 280px;
      margin: 0;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    .price-list {
      list-style: none;
      padding: 0;
      margin-top: 10px;
    }
    .price-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      margin-bottom: 5px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .close-btn {
      background: #ff5252;
      color: white;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .close-btn:hover {
      background: #ff1744;
    }
  </style>
</head>
<body>
  <h3>抓取到的商品价格</h3>
  <!-- 列表容器，用来动态添加项 -->
  <ul id="priceContainer" class="price-list"></ul>
  <!-- 引入popup的逻辑脚本 -->
  <script src="popup.js"></script>
</body>
</html>

接下来写popup.js，这里要做两件事：接收从页面抓取到的价格数据，然后动态生成可关闭的列表项：

$(document).ready(function() {
  // 1. 监听来自内容脚本的价格数据
  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    // 确认消息类型是价格数据
    if (message.type === 'priceData') {
      // 调用函数添加列表项
      addPriceToList(message.productName, message.price);
    }
  });

  // 2. 动态添加列表项的核心函数
  function addPriceToList(productName, price) {
    // 创建列表项元素
    const $listItem = $('<li class="price-item"></li>');
    
    // 商品信息文本
    const $productInfo = $('<span></span>').text(`${productName}: ₹${price}`);
    
    // 关闭按钮
    const $closeBtn = $('<button class="close-btn">×</button>');
    
    // 给关闭按钮绑定点击事件：移除当前列表项
    $closeBtn.on('click', function() {
      $(this).parent().remove();
    });

    // 把文本和按钮组装到列表项，再添加到容器里
    $listItem.append($productInfo).append($closeBtn);
    $('#priceContainer').append($listItem);
  }

  // 3. Popup打开时，主动向当前页面的内容脚本请求价格数据
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {type: 'requestPrice'});
  });
});

你已经能抓取价格了，现在只需要把抓取到的数据发送给Popup。假设你的内容脚本叫content.js，修改它来支持消息通信：

// 监听来自Popup的请求
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.type === 'requestPrice') {
    // 这里替换成你实际抓取Flipkart价格的代码
    const productName = $('.B_NuCI').text().trim(); // Flipkart商品名称的选择器
    const productPrice = $('.Nx9bqj').text().trim(); // Flipkart价格的选择器

    // 把数据发送回Popup
    chrome.runtime.sendMessage({
      type: 'priceData',
      productName: productName,
      price: productPrice
    });
  }
});

最后要确保你的manifest.json（用V3版本，现在Chrome推荐）配置正确，让内容脚本和Popup能正常工作：

{
  "manifest_version": 3,
  "name": "Flipkart价格抓取器",
  "version": "1.0",
  "description": "抓取Flipkart商品价格并在Popup显示",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["https://www.flipkart.com/*"], // 只在Flipkart页面运行内容脚本
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

• 如果你的选择器不对，价格或商品名称抓不到，可以用Chrome开发者工具（F12）的元素选择器来获取正确的CSS选择器
• 测试时，在Chrome扩展页面开启“开发者模式”，加载已解压的扩展文件夹
• 如果用Manifest V2，把manifest_version改成2，content_scripts和action的配置稍微调整（比如browser_action代替action）

内容的提问来源于stack exchange，提问作者Dev Solanki