為什么這個 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加載它們時它們不起作用。 我不知道為什么會這樣。 這真是太奇怪了。 請在下面發表評論。 謝謝。