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

Question

我一直在探索通过使用 chrome 扩展程序将一个或多个 Stencil 的网络组件注入(inject)到互联网上的任何网页的可能性。然而，事实证明，stenciljs 的延迟加载功能对我来说是一个障碍。

在第一步中，我加载了核心文件，即 component.core.js 和 component.js 以及我的组件的入口文件，将它们列在 manifest.json 中(在 web_accessible_resources 数组中)

list .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 扩展成功地注入(inject)我的 stenciljs 组件并启用 shadowDOM。确切地说，我正在寻找一种方法来获取文件在你的 js 扩展中的路径，我找到了它。

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

使用扩展注入(inject)模板组件的步骤如下

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 文件，其余文件将由 stencil 延迟加载。

将属性 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 中附加您的组件并使用它。