Подскажите по разработке расширения Chrome

Question

[grindel]

Здравствуйте!

Хочу создать расширение для Chrom'а.
Идея следующая:

Есть «словарь»(пока что только в голове) следующей структуры: есть несколько сущностей для каждой из которых подобрано несколько определений.
Например:

first («one», «1», «один», «первый»)
second («tow», «2», «два», «второй»)
bear («медведь»,)
…

По просьбе, или по некоторому событию(click по определённой ссылке на страничке) расширение должно начать искать на просматриваемых страницах определения(те что в скобках) из словаря, подсвечивать их(просто для веселья и наглядности) и если для сущности из словаря было найдено хотя бы одно определение, то помечать её как «найденную». В итоге должен получиться некий список найденных сущностей.

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

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

Документацию по разработке расширений уже читаю :)

Comments

[grindel]

Всем спасибо большое, я разобрался!:)

Answer 1

[Kakysha]

Определенно, вам нужно просто прочитать документацию для начинающих. Там все предельно быстро и понятно — пара часов и вы уже в курсе.
То, что вы ищете называется content script — это тип расширений, которые цепляются прямо к DOM по тем юрл, права на которые юзер дал (в вашем случае — на все юрл, видимо).
Весь процесс совершенно не сложен — обычный js (не вздумайте использовать jQuery для поиска слов на странице!), за пару дней можно управиться.

Comments

[AgentSIB]

А чем вам не нравиться jQuery? Его вполне можно поместить в дистрибутив расширения, используя noconflict

[Kakysha]

Зачем? Чтобы искать текст на странице и менять состояние галок?

[AgentSIB]

Ну селекторами то работать в разы проще и кода будет меньше. Да и на будущее, если функционал будет расширяться.

[grindel]

А как словарь хранить?
noconflict не понадобится расширения исполняются в отдельной JS среде

[AgentSIB]

Если на сайте используется jQuery и вы планируете делать скрипты инъекции, то он нужен. Можно конечно использовать jquery сайта, но возможно вы захотите использовать свою версию (например, более новую).

[AgentSIB]

Извините, не туда написал ЭТОТ пост… Верхний мой по теме.

[Kakysha]

Для хранения словаря вполне подойдет localStorage

[grindel]

А как именно?
Какой структурой?
json'ом?

[return]

jQuery в расширении под хром не нужен, а только добавит оверхеда тому, что в свежих браузерах можно сделать и без него. Вы упоминаете работу с селекторами — document.querySelectorAll.

[Eugene Ponomarev]

grindel, да, обычным json-ом.

Поскольку у вас хром-онли, можно не задумываться о прочих браузерах

var dictionary = { "first" : ["one", 1, "один"], "bear": ["медведь"] };

localStorage.setItem('dictionary', JSON.stringify(dictionary)); //сохраняем
localStorage.getItem('dictionary'); //забираем строку (в локал-сторейдже строки хранятся)
JSON.parse(localStorage.getItem('dictionary')); //а тут уже приводим к объекту)

[Eugene Ponomarev]

И присоединяюсь — использовать jQuery для расширения Хрома (в котором с селекторами все ок) — моветон =)

[grindel]

Спасибо!
А что такое селекторы?

[Eugene Ponomarev]

Это различные критерии для выбора элементов из DOM — getElementById('id'), getElementsByTagName('a') и прочее :) опять же — сходите на javascript.ru, там неплохое описание основ было. Хотя, как говорится «книга лучше»

[evnuh]

Человечек, ну хватит уже терзать хабр распросами. Самое время сесть за дело и начать именно с документации.

[grindel]

Да уже почти всё сделал:)
Как всегда осталось самое главное — поиск и выделение.
И javascript.ru я читаю постоянно:)