0

Мне необходимо реализовать подмену WebSocket (что то похожее на это), но я столкнулся со следующей проблемой: некоторый скрипт страницы, на которой я хочу сделать подмену WebSocket, выполняется раньше моего и делает свою подмену. Возможно странно, ведь в manifest.json я прописал "run_at": "document_start". Внедрение скрипта, который выполняет подмену выглядит так:

scriptTag = document.createElement('script');
scriptTag.src = chrome.runtime.getURL('wrapper.js');
scriptTag.onload = function () { this.remove(); };
(document.head || document.documentElement).appendChild(scriptTag);

Как заставить браузер выполнить мой внедрённый скрипт гарантированно самым первым?

4
  • Я думаю, если это сторонний домен, то таким образом нельзя получить доступ. Скорее всего на чужой странице будет изолированный API. 11 мар 2021 в 19:33
  • В каком смысле нельзя получить доступ? Код, который я привёл работает, подмена успешна. Проблема лишь в том, что нужно выполниться самым первым на странице.
    – D .Stark
    11 мар 2021 в 22:07
  • В каком смысле нельзя получить доступ?(с). Так код возможно и будет работать, но только в изолированной песочнице, а оттуда получить доступ к стороннему коду нельзя. Скрипт контента имеет доступ, только к изменению DOM. И кстати ...подмена успешна(с), для кого успешна? Сторонний код этой подмены и не заметит. Для перехвата можно использовать debugger 11 мар 2021 в 23:23
  • Вот в чём дело. То есть вообще никак не возможно изменить сообщения вебсокетов на странице с помощью расширения в браузере?
    – D .Stark
    12 мар 2021 в 10:06

1 ответ 1

1

Получить тело ответа и модифицировать через webRequest, скорее всего, не получится. Тут можно посмотреть поддержку webRequest.filterResponseData и webRequest.StreamFilter. Несмотря на ограничения, webRequest позволяет отслеживать/изменять некоторые заголовки и отменять запросы.

Отправной точкой для получения тела запроса, может быть debugger.

Небольшой пример (думаю, там можно будет что-то блокировать и менять):

background.js

const cRuntime = chrome.runtime
const cTabs = chrome.tabs
const cDebugger = chrome.debugger
const cBrowserAction = chrome.browserAction
const requiredVersion = '1.3'

const tabAttached = new Set()

// Здесь можем просматривать всякие параметры запроса
function onEvent({ tabId }, method, params) {
  // Событий разных много: responseReceived, loadingFinished, loadingFailed и т.п.
  // Для просмотра WebSocket-а достаточно этого
  if (method === 'Network.webSocketFrameReceived') {
    console.log(params.response)
  }
}

// Когда вкладка отключилась от debugger, например закрытие страницы
function onDetach({ tabId }) {
  tabAttached.delete(tabId)
  cDebugger.sendCommand({ tabId }, 'Network.disable', undefined, () => { })
  cDebugger.onDetach.removeListener(onDetach)
  cDebugger.onEvent.removeListener(onEvent)
  console.log('onDetach', tabId)
}

// Присоединяем таб к chrome.debugger
function attach(tabId) {
  if (tabAttached.has(tabId)) {
    return
  }
  cDebugger.attach({ tabId }, requiredVersion, () => {
    if (cRuntime.lastError) {
      console.error(cRuntime.lastError)
      return
    }
    // Активируем прослушивание трафика
    cDebugger.sendCommand({ tabId }, 'Network.enable', undefined, () => {
      if (cRuntime.lastError) {
        console.error(cRuntime.lastError)
        return
      }
      console.log(`Присоединили tabId:${tabId}`)
      tabAttached.add(tabId)
      cDebugger.onDetach.addListener(onDetach)
      cDebugger.onEvent.addListener(onEvent)
    })
  })
}

// Используем кнопку расширения для активации прослушивания
cBrowserAction.onClicked.addListener(async (tab) => {
  if (cRuntime.lastError) {
    console.error(cRuntime.lastError)
    return
  }
  if (/^http(s)?.+/.test(tab.url)) {
    attach(tab.id)
  }
})

manifest.json

{
  "manifest_version": 2,
  "name": "Demo debugging",
  "description": "Demo debugging",
  "version": "0.1.0",
  "author": "Alexander Lonberg",
  "browser_action": {},
  "permissions": [
    "*://*/*",
    "tabs",
    "debugger"
  ],
  "background": {
    "scripts": [
      "background-live-reload.js",
      "background.js"
    ]
  }
}

Расширение активирует прослушивание трафика страницы иконкой самого расширения.
Ищем любой сайт с запросами WebSocket-а, например такой ruТОЧКАtradingviewТОЧКАcom.
Открываем график и фоновую страницу DevTools расширения - смотрим в консоль.

Но у такого способа есть небольшой недостаток - оно указывает юзеру, что кто-то подключился к DevTools.

введите сюда описание изображения

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.