如何在ContentScript中结合webextension-polyfill正确使用browser.storage.sync

1. 安装必要依赖 #

首先安装webextension-polyfill及其类型定义，确保类型提示和API兼容：

npm install webextension-polyfill
npm install -D @types/webextension-polyfill

2. 配置Vite扩展插件 #

在vite.config.ts中正确配置vite-plugin-web-extension，可开启自动注入polyfill简化开发：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import webExtension from 'vite-plugin-web-extension'

export default defineConfig({
  plugins: [
    vue(),
    webExtension({
      manifest: './manifest.json',
      // 自动为扩展所有上下文注入webextension-polyfill
      polyfill: true,
    }),
  ],
})

3. 声明存储权限 #

在manifest.json中添加storage权限，否则无法访问storage.sync API：

{
  "permissions": ["storage"]
}

4. 正确使用browser.storage.sync #

方式一：手动导入polyfill（推荐） #

在需要操作存储的Vue组件或脚本中，先导入polyfill，再用Promise或async/await语法调用API：

// 导入webextension-polyfill
import browser from 'webextension-polyfill'

// Promise方式读取存储
browser.storage.sync.get({ testData: MyTestData })
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.error('读取存储失败:', error)
  })

// async/await方式（更简洁）
async function fetchTestData() {
  try {
    const result = await browser.storage.sync.get({ testData: MyTestData })
    console.log(result)
  } catch (error) {
    console.error('读取存储失败:', error)
  }
}

// 调用函数
fetchTestData()

方式二：使用全局注入的browser对象 #

若开启了polyfill: true配置，可直接使用全局的browser对象，无需手动导入：

async function fetchTestData() {
  try {
    const result = await browser.storage.sync.get({ testData: MyTestData })
    console.log(result)
  } catch (error) {
    console.error('读取存储失败:', error)
  }
}

关键注意事项 #

• 统一使用webextension-polyfill提供的browser对象，不要混用原生chrome对象，保证跨浏览器兼容性。
• webextension-polyfill采用Promise API，替代原生回调写法，更符合现代JS开发习惯。
• 确认扩展的所有上下文（background、popup、content script）都能正确访问browser对象，手动导入时每个使用的文件都需单独导入。

内容的提问来源于stack exchange，提问作者Gangula