javascript - 是否可以确保内容脚本注入(inject)的代码首先运行

Question

我正在开发一个用于 XHR 拦截的 Chrome 扩展。

为了到达响应正文，我注入(inject)了一些代码来拦截 XmlHttpRequest 类。

但是由于注入(inject)的脚本以不可预测的顺序(通常是最后一个)运行，它一直丢失第一批请求。

所以我想知道是否有一种方法可以确保动态注入(inject)的脚本早于网页的原始脚本运行。

以下是我的内容脚本的拦截模块。

内容脚本设置为在“document_start”运行

const doIntercept = () => {
  const xhrOverrideScript = document.createElement('script');
  xhrOverrideScript.type = 'text/javascript';
  xhrOverrideScript.innerHTML = INTERCEPT_SCRIPT_SHALL_BE_REPLACED_BY_WEBPACK;
  document.body.prepend(xhrOverrideScript);
}

const tryIntercept = () => {
  if (document.body && document.head) {
    doIntercept();
  } else {
    requestIdleCallback(tryIntercept);
  }
};

const interceptXHR = (onFinish) => {
  requestIdleCallback(tryIntercept);
  onFinish();
}

export default interceptXHR;

Answer 1

删除 requestIdleCallback 并直接将脚本附加到 document.documentElement，而无需等待 head 或 body 出现。

这是整个代码:

const interceptXHR = () => {
  const el = document.createElement('script');
  el.textContent = INTERCEPT_SCRIPT_SHALL_BE_REPLACED_BY_WEBPACK;
  document.documentElement.appendChild(el);
  el.remove();
};

它将同步运行，因此也不需要回调。
有more methods但其中一些是异步的。

有一个相对流行的错误想法，即必须将脚本元素附加到头部或主体，而不是根元素，但它们只是混淆 HTML specs (参见“内容模型”)与 DOM specs不施加这样的限制。