Javascript 如何创建一个Chrome扩展来检测在线产品列表，并定期检查价格变化

我正在尝试创建一个Chrome扩展，它可以检测亚马逊等主要在线购物网站上的产品列表，并在页面上放置一个“添加到观察列表”按钮

当用户单击按钮时，产品将添加到一个列表中，该列表将是可见的，扩展将定期检查列出的产品的价格

当任何列出的产品的价格发生变化时，扩展将通知用户

---

因为我刚刚学会了如何创建Chrome扩展，我想得到一位经验丰富的开发人员的建议，告诉我应该如何开发这样的扩展。

您需要知道的最重要的事情是产品列表页面是否可以公开访问，或者您是否需要登录才能查看这些页面

通过Chrome扩展从受限网站获取数据可能很难实现

如果产品列表页面可公开访问，则可以按如下方式实现扩展：

创建manifest.json（版本2）。参考背景页面脚本（例如bg.js）。向您拥有的所有产品列表页面URL添加权限。使其成为浏览器操作。同时添加一个弹出窗口（例如popup.html）

在bg.js中，实现一种方法来执行对这些URL的AJAX请求并检索结果。根据所选产品价格筛选这些结果。存储最新结果（例如在localStorage或Google sync中）。如果产品价格已更改，请分别更改浏览器操作图标的徽章

在popup.html中，指的是popup.js，在该文件中，您实现了一种从localStorage/Google sync读取所有最新结果并在弹出窗口中显示的方法

我这边有一个问题：你说

and place a "add to watchlist" button on the page

---

在哪一页？在产品列表页面上？在每个产品旁边？那些已经在“观察名单”上的产品呢？

谢谢回复@devnull69。是的，每当我访问页面时，我想让扩展检测产品列表（是公共的），例如，[链接]扩展应该修改页面，并在该页面上放置一个大的可见按钮，这将把列出的产品和产品价格一起添加到扩展的列表中。页面、产品名称和价格检测部分是我无法理解的。然后，您必须向清单和项目中添加内容脚本。此内容脚本将在列出URL的产品上运行，并将按钮添加到页面中。单击这些按钮后，内容脚本将把产品及其价格（通过sendMessage）发送到bg.js，bg.js将存储该产品以备将来使用。虽然持久化背景页面可能会简化开发，但最终结果不需要持久化。编辑。当然，您也可以使用bg.js的事件页面