Как выполнить JS до других скриптов страницы в Chrome Extension?

Я хочу в своём расширении для Chrome на manifest v3 заставить свой скрипт запускаться самым первым на странице. Хочу заменить некоторые нативные функций объекта window до того, как другие скрипты веб-страницы смогут к ним обратиться.

Мой contentscript.js настроен с run_at = document_start, и он успешно внедряет script.js в DOM страницы. Однако я не могу гарантировать, что мой скрипт выполнится первым перед скриптами самой страницы.

Я пробовал разное, но ни один из них не помог. как решить проблему?

Ответы

Тимофей Яшин
208 дней назад в 12:55
(Изменено)
Честно говоря, это немного подозрительно. Менять нативные функции window до загрузки других скриптов может быть использовано в плохих целях. Например, так можно перехватывать данные пользователей, менять контент на странице или обходить защиту сайта. Конечно, такие вещи могут быть полезными, например, для блокировки рекламы, но если это использовать неправильно, можно реально навредить людям.
0
Родион Федосеев
210 дней назад в 10:47
(Изменено)
Если тебе нужно больше контроля над тем, когда и как запускается твой скрипт, используй добавление наблюдателей за DOM (MutationObserver) для того, чтобы следить за изменениями в документе и корректировать выполнение других скриптов до их активации.
Это может помочь в случаях, когда вставка скриптов в DOM не решает проблему с порядком выполнения.
0

Руслан Беляев

211 день назад в 17:33

(Изменено)

Есть второй способ. Ты можешь добавить элемент в DOM напрямую через content script:

    const scriptEl = document.createElement("script");
scriptEl.type = 'module'; // Используй 'module', если работаешь с ES-модулями
scriptEl.src = chrome.runtime.getURL('./main-world.js');
(document.head || document.documentElement).appendChild(scriptEl);

Но чтобы это работало, добавь main-world.js в web_accessible_resources в manifest.json:

    
"web_accessible_resources": [
  {
    "resources": ["main-world.js"],
    "matches": [""]
  }
]

Теперь ты можешь напрямую изменять объект window на странице:

Пример кода в main-world.js для замены функции alert:

    const originalAlert = window.alert;
window.alert = function(msg) {
  console.log(msg); // Что-то сделать с сообщением
  originalAlert(msg); // Передать сообщение в оригинальную функцию alert
};

Виктор Антонов
213 дня назад в 15:47
(Изменено)
Основная причина, по которой твой content script не может напрямую изменить объект window на веб-странице, связана с изолированным контекстом исполнения. По умолчанию content scripts работают в “изолированном мире” и не могут напрямую изменять объекты в контексте страницы.
Ты можешь настроить выполнение твоего скрипта в основном контексте, указав это в manifest.json:
```
    "content_scripts": [
  {
    "matches": [""],
    "js": ["src/my_content_script.js"],
    "run_at": "document_start",
    "world": "MAIN"
  }
]
```
0