Как внедрить компонент трафарета в веб-страницу, используя расширение Chrome? - PullRequest
Новая
       29

Как внедрить компонент трафарета в веб-страницу, используя расширение Chrome?

1 голос
/ 15 апреля 2019

Я изучал возможность внедрения одного или нескольких веб-компонентов трафарета на любую веб-страницу в Интернете с помощью расширения Chrome. Однако функция ленивой загрузки stenciljs оказалась препятствием в моем случае.

На первом шаге я загрузил основные файлы i.e component.core.js и component.js и файл ввода моего компонента, перечислив их в manifest.json (в массиве web_accessible_resources)

manifest.json 

"web_accessible_resources": [
"js/web-component.js",
"js/web-components/web-components.core.js",
"js/web-components/my-component.entry.js",]

Затем добавили их на веб-страницу в качестве элемента скрипта. Это работало нормально.

Проблема возникает, как только я добавляю один из моих компонентов в DOM, Stencil пытается лениво загрузить файл component.entry.js из папки ресурсов, путь которой я должен предоставить либо из stencil.config.ts, либо как data- атрибуты resources-url в теге script компонента.core.js в DOM.

Теперь я не уверен, как я могу предоставить трафарету правильный путь к ресурсам компонента, расположенным в расширении?

1 Ответ

1 голос
/ 19 апреля 2019

Мне удалось успешно внедрить мой компонент stenciljs с включенным shadowDOM, используя расширение chrome. Чтобы быть точным, я искал способ получить путь к файлам внутри расширения в вашем js, и я нашел его. 

chrome.runtime.getURL('your relative url')

Шаги для введения компонента трафарета с использованием расширения следующие:

1- Разверните файлы ядра в папке расширения расширения

Разверните ваши файлы component.core.js, component.js и my-component.entry.js в папку сборки расширения

2- Добавление файлов в web_accessible_resources

белый список файлов, которые вы только что добавили в manifest.json 

"web_accessible_resources": [
 "js/web-component.js",
 "js/web-components/web-components.core.js",
 "js/web-components/my-component.entry.js",]

3 - добавить JS-файлы в DOM и установить data-resources-url

только добавьте файл component.js в DOM, создав элемент script. Остальные файлы будут загружаться ленивым трафаретом.

Установить атрибут data-resources-url равным папке, в которой присутствуют все три файла. Не забудьте указать абсолютный путь, используя chrome.runtime.getURL('your relative url') в атрибутах src и data-resources-url. Также убедитесь, что ваш скрипт добавлен после последнего скрипта, который присутствует на странице, иначе он не будет работать (это ошибка в коде трафарета).

ваш скрипт будет выглядеть так: 

<script src="chrome-extension://dlahaeelpopfeas/js/component.js" data-resources-url="chrome-extension://dlahaeelpopfeas/js/"></script>

Теперь вы можете добавить свой компонент в DOM и использовать его.

...