Внедрение Javascript-кода в страницу через Chrome Extension

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

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

Идея основана на копировании содержимого файла скрипта непосредственно в тег <script> страницы. Несмотря на всю простоту решения, я не нашел никаких примеров, либо упоминаний о нем на тот момент.

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

• 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 будет сразу подхвачен расширением.

Автор: APXEOLOG