3

I have been exploring the possibility of injecting one or more stencil's web-component to any web-page on internet by using a chrome extension. However the lazy loading feature of stenciljs has turned out to be an obstacle in my case.

In the first step,I loaded the core files i.e component.core.js and component.js and entry file of my component, by listing them in manifest.json (in web_accessible_resources array)

manifest.json

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

Then appended them to the webpage as a script element. This worked fine.

Problem arises as soon as I add one of my component to the DOM, Stencil tries to lazy load the component.entry.js file from the resources folder whose path I must provide either from stencil.config.ts or as data-resources-url attribute on the script tag of component.core.js in the DOM.

Now I am not sure how can I provide stencil the correct path to component's resources that are located in extension?

Bilal Alam
  • 874
  • 10
  • 26
  • 1
    You could try using the chrome extension protocol and extension id to access the scripts from within the extension. I dont know the protocol exactly but it shoul look like chrome-extension://[your extension id]/component.entry.js – Harry Chilinguerian Apr 15 '19 at 14:31
  • I doubt loading your custom components in a foreign unsuspecting page is a good idea. I think it's better to put your entire UI in an iframe that points to a html file within your extension declared via web_accessible_resources. Inside that html file your stensiljs stuff should be able to work normally without any additional tweaks since that'll be a separate document environment. – wOxxOm Apr 15 '19 at 15:10

2 Answers2

3

I was able to successfully inject my stenciljs component with shadowDOM enabled using chrome extension. To be exact I was looking for a way to get the path of files inside extension in your js and I found it.

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

Steps to inject stencil component using extension are as follows

1- Deploy your core files to extension's build folder

Deploy your component.core.js , component.js and my-component.entry.js files to extension's build folder

2- Add files to web_accessible_resources

whitelist the files you just added in manifest.json 

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

3- append js files to DOM and set data-resources-url

only add component.js file in the DOM by creating a script element Rest of the files will be lazy loaded by stencil.

Set attribute data-resources-url equal to the folder where all three files are present. Don't forget to provide absolute path using chrome.runtime.getURL('your relative url') on both src and data-resources-url attribute. Also make sure your script is appended after the last script that is present on the page else it wont work (this is bug in stencil's code).

your script will look like this:

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

Now you can append your component in DOM and use it.

Bilal Alam
  • 874
  • 10
  • 26
  • I'm trying to do the same as you already did, but it seems like I'm completely lost. I'm using StrncilJS version 2.7.1, which version did you use? – Alex Oliveira Apr 04 '22 at 00:28
1

I managed to make it work, but for me it was a little different.

manifest.json

"web_accessible_resources": [
   "build/*"
]

index.js

const script = document.createElement('script');

script.setAttribute('type', 'module');
script.setAttribute('src', chrome.runtime.getURL('build/my-component.esm.js'));
script.setAttribute('data-resources-url', chrome.runtime.getURL('build/'));
script.setAttribute('data-stencil-namespace', 'my-component');

document.body.appendChild(script);
Alex Oliveira
  • 133
  • 1
  • 9