Chrome extension [как организовать доступ к данным в расширении и на странице?]

Есть веб-приложение на angularjs, не адаптивное. Хочу поместить один из его модулей в хром расширение. Естественно нужно слать данные со странииц в расширение и наоборот. Какие есть идеи/советы/предложения?) Какими технологиями это реализовать?

Я думал можно загрузить модуль во врейме, но тогда не будет доступа к JS вне этого фрейма и наоборот

Только сообщениями https://developer.chrome.com/extensions/messaging

1 лайк

С сообщениями работал, связывал между собой background и content скрипты в расширениях.

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

Конечно, мне кажется, что намного практичнее и быстрее будет, просто реализовать эту же логику главного модуля в расширении. Типа выбрать технологии посвежее, убрать лишнего, добавить специфичного для расширения и все такое.

Но заказчики отчаянно хотят переиспользовать уже готовое приложение. И пока я придумал только запихнуть его во фрейм, а кроссдоменные запросы делать через апи какое-то.

Я не понимаю всей картины чего ты имеешь в виду, не складываются кусочки.

Какое приложение? Специально написанное для расширения?

На странице бежит то же приложение что и в расширении?

Этот модуль может работать с данными с других источников? Тогда нужно написать транспорт, который сможет принимать данные из API и через сообщения. Тогда все равно где будет бежать потребиталь этого транспорта.

Если тебе нужно будет обмениваться данными между страницей и ифрефмом, то все равно у тебя на вооружении только сообщения.

Что именно будет в ифрейме, какие данные оно будет подгружать, кто эти данные будет использовать?

Это веб-приложение на angularjs. Специально оно никак не настраивалось для расширения. Но в нем есть модуль, который отображает данные по выбранным контактам в приложении.

Расширение будет использоваться на страницах типа linkedin/facebook etc. И я хочу что бы оно собирало инфу со страницы какого-то профиля и отображало ее уже в этом модуле, для дальнейшего использования. Что бы я мог потом этот контакт уже добавить в какие-то списки и тому подобное в приложении

Я правиль понял: ставишь расширение, гуляешь по сайтам, оно собирает контакты. Заходишь на страницу приложения и оно предлагает импортировать собранные расширением контакты?

Почти) Идея была такова, что собирая контакты по страницам, в расширении тут же ими манипулировать/валидировать/создавать списки.

В самом приложении контакты можно вносить руками или импортить через csv файлы. А ребята хотят иметь приложуху в расширении и “гулять” со всеми этим функционалам по социальным страничкам и собирать инфу.

Но при этом и иметь приложение как отдельну страницу

Ну да, приложение будет и дальше жить, как веб-приложение

А расширение будет слать данные в бекенд API приложения?


Вот так бы я разделил сущности. Даже с ифреймом тебе придётся работать через postMessage чтобы в ифрейм передать данные. Так что схема достаточно generic

Ну держать приложение в iframe и использовать для связи api-transport обмена данным, это я считаю худшее развитие событий. Так как данные уже на клиенте, на сайте, где открыто расширение с приложенем и все что хотелось бы сделать, это передать их с сайта в расширене с приложением.

Пришла идея с апи, так как это будут разные домены, на клиенте мне сделать это не удасться.
Уже все это реализовать достаточно сложно. Я надеялся на какие-то альтернативные пути)

В приложении можно разрешить слать аякс к другим доменам: MV2 - Cross-origin XMLHttpRequest [Deprecated] - Chrome for Developers

если есть ajax API для самого приложения, то это может быть выход

Если что, я не имел в виду этого. Я имел в виду что в расширении будет жить тоже приложение, которое живет на сайте. Использовать то же серверное API (расширению нужно будет запросить доступ к домену где живет API). С той разницей что для приложения в расширении будет дополнитьельный источник входных данных - postMessage из расширения.

Я вроде тебя понял. Я сразу не подумал, что можно просто взять все сорсы приложения и собрать его в расширении и просто использовать postMessage сообщения для связи с сайтами. Ну и разрешение на доступ к апи приложения.

1 лайк

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

Все верно. Зато любое обновление приложения (кстати, тут нужно аккуратно с API и придумать фоллбек если API поменяется на сервере, а расширение еще не обновилось) будет отражено в расширении.

Это не плохо само по себе. Теоретически можно было бы этого избежать, но с ростом приложения выделение слоя для API неизбежно.

1 лайк

Угу. Что-то типа: “Эта версия расширения устарела, обновите, плз”

Можно и более сложную штуку запилить - зависит от желаний/возможностей ,bpytcf. Главное не делать вид что приложение работает в то время когда оно по сути не работает.

1 лайк

Если есть необходимость пользоваться сервисом приложения, ти можеш через глобальний скоуп через обьект angular и инжектор получить доступ к сервису и дергать его метод из глобального скоупа.
Можна також отримати доступа до будь якого скоупа та брати/змінювати дані.

тобто ангуляр 1 такий що можно в принципі інтегрувати будь що. Але якщо тобі треба щоб сам аплікейшн використовувал код твого зовнішнього аплікейшна, тут трохи інакше і можуть бути костилі котрі не дуже потрібні у реальній аплікусі.

Більш детально звертайся в фейсбук, зможу допомогти по коду.
Штурмін Максим.