- PVSM.RU - https://www.pvsm.ru -
Однажды передо мной встала задача написать расширение для одной браузерной игрушки под Google Chrome.
Для расширения необходимо было использовать javascript окружение непосредственно самой страницы. Проблема оказалась в том, что доступ к этому окружению невозможен из Content-скриптов расширения.
В результате поисковой работы обнаружилось что удачные решения данной проблемы отсутствуют, поэтому изучив имеющийся материал была создана простенькая система, позволяющая внедрить любой код непосредственно в станицу, без дополнительных мучений в процессе разработки. Далее я представлю простой пример расширения, решающего эту задачу.
Идея основана на копировании содержимого файла скрипта непосредственно в тег <script>
страницы. Несмотря на всю простоту решения, я не нашел никаких примеров, либо упоминаний о нем на тот момент.
Итак состав нашего будущего расширения таков:
Рассмотрим подробнее содержимого каждого из файлов:
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.getURL()
, которая возвращает путь, локальный для расширения. injected_main()
описана в файле injected.js)Вот собственно и все. Достоинством данного метода я считаю простоту в реализации (минимум лишнего кода), а главное — вы можете легко редактировать внедряемый код. Для отображения изменений необходимо просто перезагрузить страницу — обновленный injected.js будет сразу подхвачен расширением.
Автор: APXEOLOG
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/13919
Ссылки в тексте:
[1] jquery.com: http://jquery.com/
Нажмите здесь для печати.