能否开发一款可修改网站CSS的Web服务？需实现电商价格隐藏功能

核心实现路径 #

1. 前端浏览器扩展（轻量化方案） #

无需搭建后端，通过浏览器扩展注入代码实现价格隐藏和分享链接生成，适合个人或小范围使用。

• 核心逻辑：
  • 检测URL中的自定义参数（如?no-price=1），触发价格隐藏逻辑
  • 向页面添加「生成无价格链接」按钮，自动给当前URL添加参数并复制到剪贴板
• 关键代码示例：

// 检测参数并隐藏价格
const params = new URLSearchParams(window.location.search);
if (params.has('no-price')) {
  // 适配主流电商的价格选择器，可根据需求扩展
  const priceSelectors = ['.price', '.product-price', '.amount', '.J_price'];
  priceSelectors.forEach(selector => {
    document.querySelectorAll(selector).forEach(el => {
      // 替换为占位文本，也可直接设置display: none
      const placeholder = document.createElement('span');
      placeholder.textContent = '[价格已隐藏]';
      placeholder.style.color = '#666';
      el.parentNode.replaceChild(placeholder, el);
    });
  });
}

// 添加分享按钮
const shareBtn = document.createElement('button');
shareBtn.textContent = '复制无价格链接';
shareBtn.style.cssText = 'position:fixed;top:20px;right:20px;padding:8px 12px;background:#2563eb;color:white;border:none;border-radius:4px;cursor:pointer;z-index:9999';
shareBtn.onclick = () => {
  const url = new URL(window.location.href);
  url.searchParams.set('no-price', '1');
  navigator.clipboard.writeText(url.toString()).then(() => {
    shareBtn.textContent = '已复制！';
    setTimeout(() => shareBtn.textContent = '复制无价格链接', 2000);
  });
};
document.body.appendChild(shareBtn);

• 优势：开发快、无服务器成本；劣势：分享对象也需要安装同款扩展才能看到无价格页面。

2. 后端代理渲染方案（通用方案） #

搭建后端服务，通过无头浏览器加载并处理电商页面，生成无价格的静态页面或直接返回渲染结果，分享对象无需额外工具即可访问。

• 核心逻辑：
  • 用户提交电商链接到后端接口
  • 后端用无头浏览器（如Puppeteer）加载页面，移除价格元素
  • 返回处理后的页面，或生成短链接指向处理后的内容
• 关键代码示例（Node.js + Puppeteer）：

const puppeteer = require('puppeteer');
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));

// 处理价格隐藏的接口
app.get('/hide-price', async (req, res) => {
  const targetUrl = req.query.url;
  if (!targetUrl || !targetUrl.startsWith('http')) {
    return res.status(400).send('请提供有效的电商链接');
  }

  try {
    const browser = await puppeteer.launch({ headless: 'new' });
    const page = await browser.newPage();
    // 模拟普通浏览器请求，避免反爬
    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');
    await page.goto(targetUrl, { waitUntil: 'networkidle2' });

    // 移除价格元素，可根据电商平台扩展选择器
    await page.evaluate(() => {
      document.querySelectorAll('.price, .product-price, .amount, .J_price').forEach(el => el.remove());
    });

    const processedHtml = await page.content();
    await browser.close();

    // 直接返回处理后的页面，也可存储到CDN生成短链接
    res.send(processedHtml);
  } catch (err) {
    res.status(500).send('处理失败：' + err.message);
  }
});

app.listen(3000, () => console.log('服务已启动在 http://localhost:3000'));

• 优势：分享对象无需安装任何工具；劣势：需要服务器资源，需处理电商反爬机制。

关键注意点 #

• 电商适配：不同平台的价格元素选择器差异大，建议维护一个选择器映射表，针对主流电商单独配置。
• 反爬应对：后端方案需设置合理的请求间隔、模拟真实浏览器行为，必要时使用代理IP。
• 用户体验优化：前端扩展可添加平台自动识别，后端可增加短链接生成功能，提升分享便捷性。

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