Search code examples
javascriptgoogle-chrome-extensionweb-componentshadow-domstenciljs

How to inject a stencil's component inside a webpage using a chrome extension?

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?

Solution

  • 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.