Web浏览器扩展工作坊 - 第四部分
内容提要
本文介绍了如何在Web浏览器扩展中实现服务，将活动标签页的OpenGraph信息存储到IndexedDB数据库中。实现了简单的数据库架构和服务接口，支持记录的获取、查找和更新，最终为在弹出窗口中展示OpenGraph信息做好准备。
延伸解读
为何需要数据库与服务
文章指出，从网页解析的OpenGraph信息仅存在于后台进程，弹出窗口难以直接访问。虽然可以通过内容脚本的消息机制传递，但作者认为那样过于复杂。因此，采用数据库支持的服务，将信息持久化存储，从而可以在任何需要的地方（尤其是弹出窗口）随时查询。这为后续在弹出窗口展示信息奠定了基础。
数据库架构与记录设计
数据库使用idb库操作IndexedDB，仅包含一个对象存储ogs，用于存储成功解析的OpenGraph信息。记录以URL（source字段）作为键，因此需要在ParseResultSuccess类型中新增source字段。这种设计使得每条记录都能通过URL唯一标识，便于后续按URL查找和更新。
服务接口与代理机制
服务提供三个方法：getAll获取所有记录、find根据键查找记录、upsert更新或插入记录。服务通过@webext-core/proxy-service包装，使得可以在任何地方调用服务方法，但实际执行在后台进程。这简化了跨上下文调用，同时保持了数据库操作集中在后台。
在后台进程中的集成
在后台进程中，首先打开数据库并注册服务，然后将服务传递给process函数。当解析成功时，调用service.upsert将结果存入数据库，并注入URL作为source。这样，每次访问新页面并成功解析OpenGraph信息后，都会自动保存，为弹出窗口查询做好准备。
Q&A
如何在Web浏览器扩展中存储OpenGraph信息？
通过实现一个服务，将活动标签页的OpenGraph信息存储到IndexedDB数据库中。
这个服务提供了哪些功能？
该服务提供获取所有记录、根据键查找记录和更新记录的功能。
为什么需要使用数据库来存储OpenGraph信息？
因为解析后的信息不持久，使用数据库可以在需要时随时查询这些信息。
如何实现数据库架构？
实现一个简单的数据库架构，包含一个对象存储ogs，用于存储成功解析的OpenGraph信息。
如何在背景进程中使用这个服务？
在背景进程中注册服务，并在解析成功时将结果存储到数据库中。
这篇文章的下一步计划是什么？
下一步将展示如何在弹出窗口中展示OpenGraph信息。
