如何使用chrome扩展程序在网页中注入模板组件？

Question

我一直在探索通过使用chrome扩展将一个或多个模板的网络组件注入互联网上的任何网页的可能性。然而，在我的情况下，stenciljs的延迟加载特性已成为一个障碍。

在第一步中，我通过在manifest.json中列出它们来加载核心文件，即component.core.js和component.js以及我的组件的入口文件（在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尝试从resources文件中延迟加载component.entry.js文件，该文件的路径必须来自stencil.config.ts或者作为data-resources-url DOM中component.core.js的script标签的属性。

现在我不确定如何为模板提供位于扩展中的组件资源的正确路径？

Answer 1

我能够成功注入我的stenciljs组件，并使用chrome扩展启用了shadowDOM。确切地说，我正在寻找一种方法来获取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

仅通过创建脚本元素在DOM中添加component.js文件其余文件将由模板延迟加载。

将属性data-resources-url设置为等于存在所有三个文件的文件夹。不要忘记在src和data-resources-url属性上使用chrome.runtime.getURL('your relative url')提供绝对路径。还要确保在页面上出现的最后一个脚本之后附加脚本，否则它将无法工作（这是模板代码中的错误）。

你的脚本将如下所示：

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

现在，您可以将组件附加到DOM中并使用它。