Javascript 如何注入模具'；使用chrome扩展的网页中的组件？

我一直在探索通过使用chrome扩展将一个或多个stencil的web组件注入互联网上任何网页的可能性。然而，在我的例子中，stenciljs的延迟加载特性成了一个障碍

在第一步中，我加载了核心文件，即component.core.js和component.js以及我的组件的条目文件，方法是将它们列在manifest.json（在web\u可访问的\u资源数组中）中

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或DOM中component.core.js脚本标记上的数据资源url属性提供该文件的路径

---

现在我不确定如何为stencil提供位于extension中的组件资源的正确路径？

我能够使用chrome extension成功地将启用了shadowDOM的stenciljs组件注入。确切地说，我正在寻找一种方法来获取js中扩展名内的文件路径，我找到了它

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

使用扩展注入模具组件的步骤如下

1-将核心文件部署到扩展的生成文件夹中

将component.core.js、component.js和my-component.entry.js文件部署到扩展的构建文件夹中

2-将文件添加到可访问的网络资源中

将刚才添加到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并设置数据资源url

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

将属性数据资源url设置为所有三个文件所在的文件夹。不要忘记在src和data resources url属性上使用

chrome.runtime.getURL（“您的相对url”）

提供绝对路径。还要确保脚本附加在页面上最后一个脚本之后，否则它将无法工作（这是模具代码中的错误）

您的脚本将如下所示：

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

---

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

您可以尝试使用chrome扩展协议和扩展id从扩展中访问脚本。我不知道确切的协议，但它应该看起来像chrome扩展：//[您的扩展id]/component.entry.js我怀疑在一个陌生的页面中加载您的自定义组件是个好主意。我认为最好将整个UI放在一个iframe中，该iframe指向通过web可访问资源声明的扩展名中的html文件。在html文件中，您的stensiljs内容应该能够正常工作，而无需任何额外的调整，因为这将是一个单独的文档环境。