等待 executeScript 完成

Question

我有这个脚本，我从 Chrome 扩展

执行

export const getData = () => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.tabs.executeScript(
      tabs[0]?.id,
      { code: `document.getElementById('a1').innerHTML;` }, parseData
    );
  });
};

const parseData = (result: any) => {
  const obj = new Something();
  // Do complex stuff with this object
  chrome.storage.sync.set(
    {
      id: obj.id,
    }
    );
  console.log('ID from extract', obj.id);
};

在我的后台脚本中，我调用了这个函数，然后调用了通过chrome存储获取解析数据的函数，所以这两个函数都将回调作为参数。

我需要第一个函数在执行另一个函数之前完成，但它完全忽略了 await，我不确定为什么以及如何让它等待，如果可能的话

后台脚本

chrome.runtime.onMessage.addListener(async(request, sender, sendResponse) => {
    let list = [];
      await getData();
      await getExtractedData((value) => {
        // Do a lot of stuff with `list`
        console.log('After extract:', value);
      });
  }
);

getExtractedData 函数在另一个文件中：

export const getExtractedData = (callback) => {
  return chrome.storage.sync.get(
    [
      'id',
    ],
    callback);
};

应该打印这个：

ID from extract 123456
After extract {id: 123456}

但它目前正在这样做：

After extract {id: 123455}
ID from extract 123456

（提取后会记录它在之前运行中提取的内容，但不会在当前运行中记录）

Answer 1

函数需要 return 一个正确连接的 Promise resolve/reject。

const getData = () => new Promise(resolve => {
  chrome.tabs.executeScript({code: `document.getElementById('a1').innerHTML`}, res => {
    parseData(res).then(resolve);
  });
});
const parseData = (data) => new Promise(resolve => {
  // Do complex stuff with this object
  chrome.storage.sync.set({id: obj.id}, () => resolve(obj.id));
});
const getExtractedData = () => new Promise(resolve => {
  chrome.storage.sync.get('id', data => resolve(data.id));
});

顺便说一句，您不需要存储，因为 getData 的 Promise 链已经解析为已处理的 ID：

async foo => {
  const resultId = await getData();
  // ..........
}

等待 executeScript 完成

Wait for executeScript to finish

javascript

google-chrome-extension

typescript