Javascript browser

Javascript browser

Однажды передо мной встала задача написать расширение для одной браузерной игрушки под Google Chrome.
Для расширения необходимо было использовать javascript окружение непосредственно самой страницы. Проблема оказалась в том, что доступ к этому окружению невозможен из Content-скриптов расширения.

В результате поисковой работы обнаружилось что удачные решения данной проблемы отсутствуют, поэтому изучив имеющийся материал была создана простенькая система, позволяющая внедрить любой код непосредственно в станицу, без дополнительных мучений в процессе разработки. Далее я представлю простой пример расширения, решающего эту задачу.

Идея основана на копировании содержимого файла скрипта непосредственно в тег

 страницы. Несмотря на всю простоту решения, я не нашел никаких примеров, либо упоминаний о нем на тот момент.

Итак состав нашего будущего расширения таков:

  • manifest.json — стандартный файл описания расширения
  • background.js — content script, загружающий внедряемый код
  • injected.js — непосредственно внедряемый код
  • jquery.js — используется для получения содержимого файла скрипта через ajax. Подробную информацию можно найти на сайте jquery.com

Рассмотрим подробнее содержимого каждого из файлов:

manifest.json

{ «name»: «JS Code Injection», «version»: «1.0», «manifest_version»: 2, «content_scripts»: [ { «matches»: [ «http://extension.target.url» ], «js»: [ «jquery.js», «background.js» ], «run_at»: «document_end» } ], «web_accessible_resources»: [ «/injected.js» ] }

Ничем не отличается от manifest-файла из примеров.
Обратите внимание, что файл с внедряемым кодом injected.js описан в разделе web_accessible_resources, для того чтобы позднее получить к нему доступ из content-скрипта.

injected.js

function injected_main() { 	alert('Injected!'); } 

Внедряемый файл содержит все то, что вы хотите включить в страницу. Здесь вы уже можете использовать локальное javascript окружение страницы, в которую вы внедряете код.

background.js

$.get(chrome.extension.getURL('/injected.js'),  	function(data) { 		var script = document.createElement("script"); 		script.setAttribute("type", "text/javascript"); 		script.innerHTML = data; 		document.getElementsByTagName("head")[0].appendChild(script); 		document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); 	} ); 
  1. Мы используем стандартную функцию Chrome Extension API chrome.extension.getURL(), которая возвращает путь, локальный для расширения.
  2. Далее мы запрашиваем данный файл через ajax и после успешного получения создаем новый элемент в основной странице (Благодаря Shared DOM мы можем манипулировать элементами страницы без лишних усилий)
  3. Последним пунктом мы устанавливаем функцию, которая будет вызвана после загрузки страницы (функция injected_main() описана в файле injected.js)

Вот собственно и все. Достоинством данного метода я считаю простоту в реализации (минимум лишнего кода), а главное — вы можете легко редактировать внедряемый код. Для отображения изменений необходимо просто перезагрузить страницу — обновленный injected.js будет сразу подхвачен расширением.



Источник: habr.com


Добавить комментарий