Однажды передо мной встала задача написать расширение для одной браузерной игрушки под Google Chrome.
Для расширения необходимо было использовать javascript окружение непосредственно самой страницы. Проблема оказалась в том, что доступ к этому окружению невозможен из Content-скриптов расширения.
В результате поисковой работы обнаружилось что удачные решения данной проблемы отсутствуют, поэтому изучив имеющийся материал была создана простенькая система, позволяющая внедрить любой код непосредственно в станицу, без дополнительных мучений в процессе разработки. Далее я представлю простой пример расширения, решающего эту задачу.
Идея основана на копировании содержимого файла скрипта непосредственно в тег
Для расширения необходимо было использовать 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();");
}
);
- Мы используем стандартную функцию Chrome Extension API
chrome.extension.getURL(), которая возвращает путь, локальный для расширения.
- Далее мы запрашиваем данный файл через ajax и после успешного получения создаем новый элемент в основной странице (Благодаря Shared DOM мы можем манипулировать элементами страницы без лишних усилий)
- Последним пунктом мы устанавливаем функцию, которая будет вызвана после загрузки страницы (функция
injected_main() описана в файле injected.js)
Вот собственно и все. Достоинством данного метода я считаю простоту в реализации (минимум лишнего кода), а главное - вы можете легко редактировать внедряемый код. Для отображения изменений необходимо просто перезагрузить страницу - обновленный injected.js будет сразу подхвачен расширением.