Как получить доступ к веб-странице DOM, а не к странице расширения DOM?

Я пишу расширение Chrome и пытаюсь наложить

на текущую веб-страницу сразу после нажатия кнопки в файле popup.html.

Когда я обращаюсь к методу document.body.insertBefore из popup.html, он накладывает

на всплывающее окно, а не на текущую веб-страницу.

Должен ли я использовать обмен сообщениями между background.html и popup.html для доступа к DOM веб-страницы? Я хотел бы сделать все в popup.html, а также использовать jQuery, если это возможно.

One Solution collect form web for “Как получить доступ к веб-странице DOM, а не к странице расширения DOM?”

Как указано в обзоре расширений Chrome: архитектура (которая является обязательным для чтения):

Если вашему расширению необходимо взаимодействовать с веб-страницами, ему нужен сценарий содержимого. Скрипт содержимого – это JavaScript, который выполняется в контексте страницы, загруженной в браузер. Подумайте о сценарии содержимого как части этой загруженной страницы, а не как части расширения, в которое оно было упаковано (его родительское расширение).

Всплывающее окно ( browserAction – это значок на главной панели инструментов Google Chrome справа от адресной строки) – это HTML-страница с URL-адресом chrome-extension: //, поэтому, если вы обращаетесь к ее DOM, вы затрагиваете ее страницу.
То же самое относится к странице фона / опций.

Чтобы получить доступ к веб-странице DOM / управлять им, у вас есть два способа:

  1. Либо объявляйте сценарии содержания в manifest.json и используйте обмен сообщениями :

    chrome.tabs.sendMessage() со своей фоновой / всплывающей страницы на прослушиватель chrome.runtime.onMessage в chrome.runtime.onMessage скрипте chrome.runtime.onMessage , который будет выполнять действия на веб-странице и передавать результаты через sendResponse вызов sendResponse в соответствии с документацией (примечание: только JSON-объекты, числа, строки, массивы, простые объекты, что означает не элементы DOM, а не classы, а не функции). В случае, если скрипту контента необходимо инициировать связь на странице расширения, он должен использовать chrome.runtime.sendMessage() .

  2. Или используйте API вкладок для ввода сценария содержимого :
    chrome.tabs.executeScript(tabId, details, callback)

    • Необходимые разрешения : "tabs" , "https://www.example.com/*"
      (или "" , "\*://\*/\*" , "http://\*/\*" , "https://\*/\*" )

    • Лучшим выбором в случае явной активации пользователя является использование разрешения "activeTab" вместо "tabs" и "" поскольку оно служит альтернативой для многих применений "" , но не отображает никаких предупреждающих сообщений во время установки .

    • .executeScript() может использоваться с функцией обратного вызова, которая получает массив последних оцененных выражений в сценарии с вложенным контентом, по одному элементу на каждый фрейм int, который он вводится внутри вкладки. Chrome использует JSON.parse() и JSON.stringify() для результатов внутри, ограничивая поддерживаемые типы обычными объектами и простыми стробируемыми значениями, такими как number / string или их массивы.
      Поэтому он не работает для элементов DOM, функций, пользовательских свойств, геттеров / сеттеров: вам нужно вручную отобразить / извлечь требуемые данные и передать их в простой массив / объект.

Скрипты контента выполняются в специальной среде, называемой изолированным миром. Они имеют доступ к DOM страницы, на которую они вставляются, но не на любые переменные или функции JavaScript, созданные на этой странице. Он выглядит для каждого сценария контента так, как если бы на его запущенной странице не было другого исполняемого кода JavaScript. То же самое верно в обратном: JavaScript, запущенный на странице, не может вызывать какие-либо функции или обращаться к любым переменным, определенным сценариями контента.

По-прежнему можно пойти глубже на уровень и получить доступ к переменным / функциям JavaScript в веб-странице .



В качестве примера второго метода давайте покажем, что div при нажатии на действие браузера.
Мы будем использовать chrome.tabs.executeScript() в browserAction кликов browserAction чтобы в файл DOM этой страницы вводить файл сценария содержимого (или буквенную строку кода, если он мал, см. Документацию метода).

 var someVar = {text: 'test', foo: 1, bar: false}; chrome.tabs.executeScript({ code: '(' + function(params) { document.body.insertAdjacentHTML('beforeend', '
' + params.text + '
' ); return {success: true, html: document.body.innerHTML}; } + ')(' + JSON.stringify(someVar) + ');' }, function(results) { console.log(results[0]); });

Как вы можете видеть, мы использовали автоматическое преобразование строк кода функции, чтобы иметь возможность писать введенный код как обычный JavaScript с подсветкой синтаксиса и линией. Очевидным недостатком является то, что браузер тратит время на parsing кода, но обычно он меньше 1 миллисекунды, поэтому он ничтожен.

  • Проблемы с jQuery getJSON с использованием локальных файлов в Chrome
  • Использовать инспектор элементов Chrome в режиме предварительного просмотра?
  • Что означает == $ 0 (double equals dollar zero) в инструментах разработчика Chrome?
  • Поскольку v38, расширение Chrome больше не может загружаться с URL-адресов HTTP, обходной путь?
  • Interesting Posts

    Как поддерживать как armv6, так и armv7s для создания сборки в xcode 4.5

    Не удалось получить доступ к большинству интернет-сайтов. DNS_PROBE_FINISHED_NXDOMAIN

    «Ускорение» недоступно в меню Intel SRT

    Конфиденциальность Firefox Addon

    Поиск и замена математических операций с помощью Notepad ++

    Установка Windows 8, отсутствующие драйверы

    Сочетание весеннего проекта и Джерси

    Каковы числа в круглых скобках в именах инструментов unix?

    Использование конфигурации однораздельного диска

    Иконки лотков Windows 7 Невидимый

    Можно ли использовать FUSE с окнами?

    16GB Ram – заставить Windows 7 использовать как можно больше ОЗУ?

    Как установить обновление для Windows 10 для Windows 10 Enterprise Edition

    Если я использую дискретный графический процессор с Sandy Bridge, будет ли GPU Sandy Bridge стоять без дела и полностью потеряться?

    Пользовательский getFilter в пользовательском ArrayAdapter в android

    Давайте будем гением компьютера.