Как открыть функцию из расширения Chrome devtools «до» загрузки страницы?

Question

Я работаю над расширением Chrome devtools, которое предоставляет функцию (extensionEntryPoint) для проверяемой страницы. Проблема в том, что extensionEntryPoint недоступен в начальных сценариях при проверке загрузки страниц и их запуске. Я могу использовать его с window.onload, но это слишком поздно.

Вот мой код:

manifest.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

Из-за причуды / ошибки в Chrome в настоящее время ваш сценарий ставится в очередь среди других скриптов страницы, и, следовательно, не гарантируется, что он будет запущен первым.

Решение: поместите содержимоефайла api.js внутри литеральной строки и назначьте его для script.textContent.
И затем вы можете удалить web_accessible_resources из manifest.json.

content-script.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, например, после специального заполнителя комментария внутри вашего скрипта содержимого.