为什么这个 Background.ts Chrome 扩展脚本没有与这个 Promise 一起安装？

Question

当我安装/加载/重新加载我的 Chrome 扩展时，我试图使用 Promise 初始化我的 localStorage，但由于某种原因，这个ModelDataColdSet调用阻止了后台脚本的运行。 我正在使用节点 16.14.2。

ModelData.ts

export interface ModelData {
  cold?: Object
}

export type ModelDataKeys = keyof ModelData

export const ModelDataColdDefault = {}

export function ModelDataColdSet(cold: Object): Promise<void> {
  const values: ModelData = {
    cold,
  }
  return new Promise((resolve) => {
    chrome.storage.local.set(values, () => {
      resolve()
    })
  })
}

export function ModelDataColdGet(): Promise<Object> {
  const keys: ModelDataKeys[] = ["cold"]
  return new Promise((resolve) => {
    chrome.storage.local.get(keys, (res: ModelData) => {
      resolve(res.cold ?? {})
    })
  })
}

当我删除ModelDataColdSet(ModelDataColdDefault)行时，后台脚本将运行并将[Background]打印到控制台。 我发现的所有教程都说这是这样做的方法，所以我很困惑。

Background.ts

import { ModelDataColdDefault     , ModelDataColdSet }
  from './ModelData';
console.log('[Background]');

chrome.runtime.onInstalled.addListener(() => {
  console.log('Initializing extension');
  ModelDataColdSet(ModelDataColdDefault);
  
  chrome.alarms.create("FeedUpdate", {
    periodInMinutes: 1/60,
  });

  chrome.contextMenus.create({
    "id": "FeedAddSelectionContextMenu",
    "title": "Add selection to broadcast.",
    "contexts": ["selection"]
  });

  chrome.contextMenus.create({
    "id": "FeedAddPageContextMenu",
    "title": "Add current page to your mom."
  });
});

chrome.alarms.onAlarm.addListener((alarm) => {
  console.log('[onAlarm.FeedUpdate]');
  if (alarm.name === "FeedUpdate") {
    console.log('[onAlarm.FeedUpdate]');
  }
});

Answer 1

您不需要将存储set包装成 promise，它已经是异步的。 尝试：

export function ModelDataColdSet(cold: Object): Promise<void> {
  const values: ModelData = {
    cold,
  }
  return chrome.storage.local.set(values);
}
export function ModelDataColdGet(): Promise<object> {
  const keys: ModelDataKeys[] = ["cold"]
  return chrome.storage.local.get(keys)
}

还要确保您已在清单中设置存储权限。json

Answer 2

使用我的开发配置，即 React 18.2.0 和 Node 16.4.2，当我调用ModelDataColdSet({}) 、 chrome.storage.sync.set({ cold: ModelDataColdDefault })或ModelDataColdSet(ModelDataColdDefault)时， chrome.storage不会ModelDataColdSet(ModelDataColdDefault)在Background.js脚本中，但是当我初始化它时它可以工作

chrome.runtime.onInstalled.addListener(() => {
  console.log('Initializing extension');
  
  chrome.storage.sync.set({ cold: {} });
}

但是如果我将函数和默认常量值从ModelData.ts复制到Background.ts中，代码将起作用，但是当我从ModelData.ts中的Background.ts加载它们时它们不起作用。 我不知道为什么会这样。 这真是太奇怪了。 请在下面发表评论。 谢谢。