Why is this Background.ts Chrome Extension script not installing with this Promise?

Question

I am trying to initialize my localStorage using a Promise when I install/load/reload my Chrome Extension, but for some reason, this ModelDataColdSet call is preventing the Background script from running. I'm using Node 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 ?? {})
    })
  })
}

When I delete the ModelDataColdSet(ModelDataColdDefault) line and the Background script will run and print [Background] to the console. All of the tutorials I've found said this is the way to do it so I'm confused.

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

You don't need to wrap the storage set into a promise, it already is async. Try:

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)
}

Also make sure that you have set the storage permission in your manifest.json

Answer 2

Using my dev configuration, which is React 18.2.0 and Node 16.4.2, the chrome.storage doesn't when I call ModelDataColdSet({}) , chrome.storage.sync.set({ cold: ModelDataColdDefault }) , or ModelDataColdSet(ModelDataColdDefault) in the Background.js script, but it works when I initialize it like

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

But the code will work if I copy the functions and default const values from ModelData.ts into Background.ts , but they don't work when I load them from the ModelData.ts in Background.ts . I have no clue why this is happening. It's just downright strange. Please drop a comment below. Thanks.