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

【问题标题】：How to inject a stencil's component inside a webpage using a chrome extension?如何使用 chrome 扩展在网页中注入模板组件？
【发布时间】：2019-09-05 13:02:13
【问题描述】：

我一直在探索通过使用 chrome 扩展将一个或多个模板的 web 组件注入互联网上的任何网页的可能性。然而，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 的 script 标签的 resources-url 属性。

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

【问题讨论】：

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

标签： javascript google-chrome-extension web-component shadow-dom stenciljs

【解决方案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

仅通过创建脚本元素将 component.js 文件添加到 DOM 中，其余文件将由 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 中并使用它。

【讨论】：