Как работать с элементами Web страницы в расширении для google chrome?

Рейтинг: 1Ответов: 1Опубликовано: 07.11.2014

Пишу расширение для google chrome, которое отображает html элементы выбранной пользователем страницы.

Подскажите, пожалуйста, как в коде для расширения google chrome получить информацию о дереве HTML элементов выбранной пользователем страницы?

Обновление

Это расширение для google chrome. Т.е. пользователь устанавливает моё расширение. В браузере google chrome открывает интересующую его страницу и чёлкает на кнопочку моего расширения в браузере. А расширение, после этого, анализирует код страницы и выводит дерево элементов. Нельзя ли через API google chrome получить дерево элементов этой страницы или можно только получить адрес страницы, а потом действительно через ajax запрос получить HTML?

Обновление 2

Страница выбирается в браузере google chrome. Т.е. расширение работает со страницей, которая открыта и активна у пользователя в браузере google chrome. Т.е. в само расширение пользователь не вводит в ручную url, а получает его от браузера. В том и смысл расширения.

Насчёт кода - пока ещё не написал, пока пытаюсь понять, как это вообще сделать. Но из похожих расширений есть SelectorGadget.

css api javascript html google-chrome
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Не знаю как сейчас, возможно что-то поменялось в api, но пару лет назад я решал эту задачу так, в манифест прописываешь строки

"content_scripts": [
    {
        "matches": [ "*://*/*" ],
        "js": [ "myscript.js" ],
        "css": [ "mystyle.css" ],
        "run_at": "document_start"
    }
],

Таким образом ты внедряешь свой скрипт и свои стили - myscript.js, myscript.css на все страницы которые открывает пользователь, и теперь из этого скрипта тебе доступны все элементы.