Как получить доступ к chrome в Angular?

Question

[Ghoulll]

Как в angular получить доступ к chrome.runtime... в компоненте?

Comments

[Алексей Ярков]

Так это же API расширений браузера

[Ghoulll]

Да, это апи хрома. А как его использовать в typescript'e?

[Kovalsky]

Ghoulll, как-то так?

Answer 1

[Антон Швец]

не надо слушать вредные советы :)
Установите типы для хрома https://www.npmjs.com/package/@types/chrome

а потом где-нибудь создаем токен для инжектора.

export const CHROME = new InjectionToken('CHROME');

в провайдерах апп-модуля по этому токену провайдим значение

providers: [
  ...
  {
    provide: CHROME,
    useValue: window.chrome,
  }
  ...
]

В конструкторе вашего компонента или сервиса

constructor(
  @Inject(CHROME) private chrome: chrome,
)

Это делается для того чтобы иметь возможность когда нужно эту зависимость подменить. Например подсовывать моки для тестирования.
Но вообще можно и просто chrome или window.chrome вызвать, если вы не паритесь по поводу подмен и вообще слежением за зависимостями. Главное объяснить тайпскрипту что это валидное имя. Ну т.е. доустановить типы.

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

Comments

[Ghoulll]

Насколько правильно будет вынести в отдельный файл .js что-то типо const chromeRunTime = chrome.runtime; в файле .d.ts задекларировать константу и юзать компонентах в которых мне надо??:) Проверил, так работает, но не знаю насколько это правильно

[Антон Швец]

Ghoulll, лучше просто сделатьexport const chromeRunTime = chrome.runtime
и использовать ее

но
chrome.runtime занимает столько же места, в чем смысл то?
Чем меньше лишних переменных, тем лучше.