Chrome Extentions TS Vue3 开发在 Chrome 中保存和读取配置

为了在 Chrome 中保存和读取配置，我们可以使用 Chrome 的 storage.sync API，这是一个跨浏览器同步数据的方法。以下是一个示例的 TypeScript 代码片段，展示了如何保存和读取表单数据。

首先，需要在你的 manifest.json 文件中添加 "storage" 到 "permissions" 字段，这样才能使用 chrome.storage.sync API。

"permissions": [
  "storage"
],

然后，你可以使用以下的 TypeScript 代码来保存和读取配置：

// 导入 ref
import { ref } from 'vue'

// 建立表单数据的响应式引用
const form = ref({
  apiKey: '',
  useOwnUrl: false,
  url: '',
})

// 读取配置
chrome.storage.sync.get(['apiKey', 'useOwnUrl', 'url'], function(result) {
  form.value.apiKey = result.apiKey || ''
  form.value.useOwnUrl = result.useOwnUrl || false
  form.value.url = result.url || ''
})

// 保存配置
const saveConfig = () => {
  chrome.storage.sync.set({
    apiKey: form.value.apiKey,
    useOwnUrl: form.value.useOwnUrl,
    url: form.value.url,
  }, function() {
    console.log('Settings saved')
  })
}

// 提交表单时，保存配置
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      saveConfig()  // 提交表单时保存配置
    } else {
      console.log('error submit!', fields)
    }
  })
}

以上代码首先通过 chrome.storage.sync.get 读取配置，然后在表单提交时通过 chrome.storage.sync.set 保存配置。

需要注意的是，chrome.storage.sync API 只在 Chrome 扩展程序中有效，且需要在 manifest.json 中申请 "storage" 权限。

此外，因为 chrome.storage.sync API 是异步的，所以如果你需要在应用加载时就使用这些配置，你可能需要确保这些配置在你的应用开始运行前就已经被正确读取。