Question

我一直在探索通过使用chrome扩展程序将一个或多个模板的Web组件注入Internet上任何网页的可能性。但是，在我看来，stenciljs的延迟加载功能是一个障碍。

第一步，我将核心文件（即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或作为数据提供。 DOM中component.core.js的脚本标签上的resources-url属性。

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

Answer 1

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

如何使用chrome扩展名将模板组件注入网页中？

1 个答案: