如何从一个网页获取信息并将其链接到Chrome扩展程序中的另一个网页？

Question

我有一个想法是创建一个chrome扩展，可以在线显示食谱网站中成分的卡路里数。我是开发扩展程序的新手，我只是在网站上显示文本和更改文字和图像的基本功能。我的想法是有常规配方，但当你将鼠标悬停在配料上（或者甚至只是简单地在网站上显示，以较容易的方式）时，热量内容会弹出。我想知道是否可以这样做，因为与测量和食物类型的不一致会使程序更难以阅读。提前谢谢！

Answer 1

我们可以通过以下步骤实现这一目标：

• 假设有一个父DIV说#DIV1Recipe，其中包含<LI>列表 食物和量度如#DIVFood1和#DIVMeasure1

• 循环浏览每个列表项（#DIVFoodX和#DIVMeasureX），找到食物，得到 测量并计算该项目的卡路里

• 将同一循环中所有项目的总卡路里相加

• 将此卡路里信息作为新密码注入父div #DIV1Recipe 弹出div #DIV1RecipePopup，并通过CSS display属性onclick控制其视图

对于某些不一致的项目，您可以将它们排除在外，这样您至少可以显示食谱的近似卡路里。

此外，您可以通过在弹出窗口中显示缺少测量值或未知食物的小表单来使其更好，以便他们可以添加或调整值并动态获取卡路里。也许是这样 - https://simfatic.com/help/v40/images/popup-form.png

希望它有所帮助！