javascript - 如何从 Chrome devtools 扩展 "before"页面加载中公开函数？

Question

我正在开发一个 Chrome devtools 扩展，它向被检查的页面公开一个函数 (extensionEntryPoint)。问题是 extensionEntryPoint 在检查页面加载和运行的初始脚本中不可用。我可以从 window.onload 使用它，但为时已晚。

这是我的代码:

list .json:

{
  "name": "Extension",
  "version": "1",
  "manifest_version": 2,
  "permissions": [
    "activeTab"
  ],
  "web_accessible_resources": ["api.js"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

content-script.js:

const script = document.createElement("script");
script.src = chrome.extension.getURL("api.js");
document.documentElement.appendChild(script);

api.js:

function extensionEntryPoint(data) {
  console.log("Thanks for calling, I'll debug your data now!")
}

理想情况下，我希望 extensionEntryPoint 在页面加载时可用于页面上的任何脚本(例如，在 DOMContentLoaded 触发之前)。这可能吗？

Answer 1

由于 quirk/bug in Chrome当前您的脚本在其他页面脚本中排队，因此不能保证它是第一个运行的脚本。

解决方法:把api.js的内容放在一个文字字符串中，赋给script.textContent。
然后您可以从 manifest.json 中删除 web_accessible_resources。

内容脚本.js:

const script = document.createElement("script");
script.textContent = `
// the actual contents of api.js
// .......
`;
document.documentElement.appendChild(script);
script.remove();

要在 IDE 中保留代码的语法突出显示，请将代码放入一个函数中，但前提是它很小，因为浏览器必须执行两次解析该代码并将其字符串化的无关工作。

script.textContent = '(' + (() => {
  // the actual contents of api.js
  // .......
}) + ')()';

如果您在运行代码之前构建代码(例如通过 node.js)，您可以编写一个脚本来嵌入 api.js 的内容，例如在内容脚本中的特殊注释占位符之后。