插件开发汇总

Mr.Liu大约 2 分钟

谷歌插件教程

Chrome 官方文档开发教程

dexie.js

开发浏览器插件经常会涉及本地数据的结构化存储，熟悉浏览器存储方案的同学大概都会想到 indexedDB。

Dexie.js 是对 indexedDB API 的封装，提供了更好的易用性和稳定性。它解决了 indexedDB 某些浏览器实现中的 bug，并支持几乎所有的浏览器。 我自己实际使用下来感觉非常好用，以下是官方提供的示例代码，和操作后端数据库的 ORM 框架语法很接近。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/dexie/dist/dexie.js"></script>
    <script>

      // 声明数据库
      const db = new Dexie('FriendDatabase');
      db.version(1).stores({
        friends: '++id, age'
      });

      // 插入数据
      db.friends.add({ name: 'Alice', age: 21 }).then(() => {
        return db.friends
          .where('age')
          .below(30)
          .toArray();
      }).then(youngFriends => {
        alert (`My young friends: ${JSON.stringify(youngFriends)}`);
      }).catch (e => {
        alert(`Oops: ${e}`);
      });

    </script>
  </head>
</html>

cash-dom

cash-dom 开发文档

很多浏览器插件都需要和当前网页的 DOM 交互，直接使用浏览器 DOM API 也可以，但有时候未免繁琐，用 jQuery 等库又显得杀鸡用牛刀。 cash-dom 就是这样一个替代方案，它非常小，非常轻量，但该有的 API 它基本都提供了。

create-chrome-ext

create-chrome-ext 开发文档

这个不是一个库，而是一个浏览器插件开发的脚手架模板项目。它基于 Vite 构建，支持各种不同的前端框架，支持 TS，插件该有的配置也都帮你提前配置好了，开箱即用。

# npm 6.x
λ npm create chrome-ext@latest my-crx-app --template svelte-js

# or npm 7+, extra double-dash is needed:
λ npm create chrome-ext@latest my-crx-app -- --template react-ts

# or yarn
λ yarn create chrome-ext my-crx-app --template vue-ts

# or pnpm
λ pnpm create chrome-ext my-crx-app --template vanilla-ts