Как получить доступ к веб-странице 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 миллисекунды, поэтому он ничтожен.

  • Как связать с событием изменения localStorage с помощью jQuery для всех браузеров?
  • Удаление цвета фона ввода для автозаполнения Chrome?
  • Получение URL текущей вкладки из Google Chrome с помощью C #
  • Как имитировать нажатия клавиш или щелчок с помощью JavaScript?
  • Как открыть всплывающее окно моего расширения с помощью JavaScript?
  • chrome.tabs возвращает undefined в скрипте содержимого
  • Использовать инспектор элементов Chrome в режиме предварительного просмотра?
  • Почему Chrome игнорирует локальные куки jQuery?
  • Что означает == $ 0 (double equals dollar zero) в инструментах разработчика Chrome?
  • Google Chrome перенаправляет localhost на https
  • Как я могу получить URL-адрес текущей вкладки из расширения Google Chrome?
  • Interesting Posts

    ‘printf’ vs. ‘cout’ в C ++

    Является ли разница в скорости, которую я получаю от установки моего SSD в режиме RAID, незначительна?

    Совместима ли DDR4 RAM в слоте DDR3 RAM?

    Как запустить графические программы Linux из командной строки, но отдельно от командной строки?

    Эффективно вычислить парное квадратичное евклидово расстояние в Matlab

    Как использовать объект objc_setAssociatedObject / objc_getAssociatedObject внутри объекта?

    Совместимые с Mac средства веб-разработки

    Java Wait и Notify: IllegalMonitorStateException

    Не удается разрешить хост или доступ к веб-сайту через маршрутизатор

    Цвет текста ActionBar

    Как визуализировать DateTime в определенном формате в ASP.NET MVC 3?

    Не удалось выполнить SSH для моей виртуальной машины через Windows Power Shell ISE

    Как работает assembly мусора Java с циркулярными ссылками?

    Уместно ли распространять Control для обеспечения неизменно безопасной функции Invoke / BeginInvoke?

    BasicHttpBinding против WsHttpBinding vs WebHttpBinding

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