【教程向】从零开始创建浏览器插件（六）实战篇

【教程向】从零开始创建浏览器插件（六）实战篇

在这篇文章中，我们将详细介绍一个名为“摸鱼King”的Chrome扩展程序的开发思路。这个扩展程序的主要功能是在用户浏览网页时提供便捷的方式来摸鱼看小说。
完整的工程我放在了完整工程，可以下载下来自己试一试。

1. 主要功能和组件

我们以一个摸鱼看小说的插件为例，需要实现导入（存储）小说、选择（读取）小说、设置分页参数、渲染小说文字展示、快捷键等功能。

• 名称和版本：

  • 名称：摸鱼King
  • 版本：1.0
  • 描述：摸鱼看小说

• 权限需求：

  • [activeTab]允许扩展访问当前活动标签页的信息。
  • [storage]允许扩展存储和检索数据。
  • [scripting]允许扩展运行脚本。

• 背景脚本：

  • 使用[background.js]作为服务工作线程，这是manifest v3中推荐的方式，可以有效管理和维护扩展的后台逻辑。

• 弹出页面：

  • 默认弹出页面设置为[popup/popup.html]，用户可以通过点击扩展图标来触发这个页面，进行更多交互操作。

• 内容脚本：

  • [content/content.js]在所有网页上运行（由<all_urls>匹配），并在文档加载结束时执行。这允许扩展在网页内容完全加载后修改或访问网页内容。

• 图标：

  • 使用[icon128.png]作为扩展的默认图标，显示在浏览器的扩展栏中。

2. 开发思路

开发这个扩展程序的主要思路是提供一个简单而直接的方式来增强用户的浏览体验，通过在浏览器中直接提供摸鱼看小说的功能。通过内容脚本，扩展可以在用户浏览网页时插入小说内容或相关功能，而不干扰网页的主要功能。

• 背景脚本处理扩展的核心逻辑，如数据存储和跨标签页的操作。
• 弹出页面提供用户界面，使用户可以进行简单的交互，如选择小说或调整设置。
• 内容脚本直接与网页交互，插入或修改网页内容，提供摸鱼功能。

3.项目初始化

由上面的思路我们可以整理出一个项目结构目录以及一个manifest配置文件。

目录结构：

moyuKing/
│
├── manifest.json
│
├── background.js          # 背景脚本
│
├── popup/                 # 弹出页面目录
│   └── popup.html         # 弹出页面HTML
│   └── popup.js         	# 弹出页面JS
│   └──popup.css	       	# 弹出页面CSS
│
├── content/               # 内容脚本目录
│   └── content.js         # 内容脚本
│
└──  icon128.png        # 扩展图标

manifest.json

{"manifest_version": 3,"name": "摸鱼king","version": "1.0","description": "摸鱼看小说","permissions": ["activeTab","storage","scripting"],"background": {"service_worker": "background.js"},"action": {"default_popup": "popup/popup.html","default_icon": {"128": "icon128.png"}},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content/content.js"],"run_at": "document_end"}],"icons": {"128": "icon128.png"}
}

4.background.js

背景脚本主要实现数据存储和另外两个脚本之间的数据通信。
IndexedDB 是一种运行在浏览器中的非关系型数据库，适合于存储大量结构化数据，我们选用它来实现数据存储，以下代码打开数据库、创建对象存储、读写数据以及更新数据等操作。

初始化数据库

IndexedDB的操作首先是创建或打开一个数据库。我们定义了一个IDBUtil对象，封装了与数据库操作相关的方法。

const IDBUtil = {dbName: "myDatabase",storeName: "idStore",version: 1,async openDB() {return new Promise((resolve, reject) => {const request = indexedDB.open(this.dbName, this.version);request.onerror = (event) => reject(event.target.errorCode);request.onupgradeneeded = (event) => {const db = event.target.result;if (!db.objectStoreNames.contains(this.storeName)) {db.createObjectStore(this.storeName, { keyPath: "id" });}};request.onsuccess = (event) => resolve(event.target.result);});},// 其他方法...
};

在openDB方法中，我们检查数据库是否存在指定的对象存储，如果不存在，则创建一个新的对象存储。keyPath为对象存储的主键。

数据读写

在IndexedDB中，数据的读写需要通过事务来完成。以下是如何插入和检索数据的示例：

async setId(id) {const db = await this.openDB();const transaction = db.transaction(this.storeName, "readwrite");const store = transaction.objectStore(this.storeName);const request = store.put({ id: "unique", value: id });return new Promise((resolve, reject) => {request.onsuccess = () => resolve();request.onerror = (event) => reject(event.target.errorCode);});
},async getId() {const db = await this.openDB();const transaction = db.transaction(this.storeName, "readonly");const store = transaction.objectStore(this.storeName);const request = store.get("unique");return new Promise((resolve, reject) => {request.onsuccess = (event) => resolve(request.result ? request.result.value : null);request.onerror = (event) => reject(event.target.errorCode);});
},

在这里，setId方法通过事务在对象存储中存储了一个ID值，而getId方法则用来检索这个值。

更新数据

数据的更新可以复用之前的插入逻辑，因为IndexedDB的put方法会替换已有的数据记录：

async updateId(newId) {return this.setId(newId);
},

扩展功能

除了基础的数据库操作，我们还展示了如何在浏览器扩展的background脚本中实现更复杂的逻辑，例如更新页面信息、保存文件内容等。这些操作同样基于IndexedDB事务来实现数据的一致性。

const updatePageInfo = async (id, pageNum, pageSize) => {const db = await openDB();const transaction = db.transaction(["files"], "readwrite");const store = transaction.objectStore("files");const request = store.get(id);request.onsuccess = () => {const data = request.result;data.pageNum = pageNum;data.pageSize = pageSize;store.put(data);};
};

在updatePageInfo方法中，我们首先通过ID获取文件记录，然后更新其页码和页面大小信息。

完整代码

除此之外，我们还需要提供几个事件的监听来实现数据通信，完整代码如下：

const IDBUtil = {dbName: "myDatabase",storeName: "idStore",version: 1, // 可以根据需要更新数据库结构时增加版本号// 打开（或初始化）数据库async openDB() {return new Promise((resolve, reject) => {const request = indexedDB.open(this.dbName, this.version);request.onerror = (event) => {console.error("Database error:", event.target.errorCode);reject(event.target.errorCode);};// 第一次创建数据库或版本更新时触发request.onupgradeneeded = (event) => {const db = event.target.result;// 创建一个新的存储对象if (!db.objectStoreNames.contains(this.storeName)) {db.createObjectStore(this.storeName, {keyPath: "id",autoIncrement: false,});}};request.onsuccess = (event) => {console.log("Database opened successfully");resolve(event.target.result);};});},// 设置ID值async setId(id) {const db = await this.openDB();const transaction = db.transaction(this.storeName