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

Question

我一直在探索通过使用 chrome 扩展将一个或多个 Stencil 的 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 文件，我必须从 [=31] 提供其路径=] 或 DOM.

中 component.core.js 的脚本标签上的 data-resources-url 属性

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

Answer 1

我能够使用 chrome 扩展成功地注入我的 stenciljs 组件并启用阴影 DOM。确切地说，我正在寻找一种方法来获取文件在你的 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 文件，其余文件将由 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 中附加您的组件并使用它。

Answer 2

我设法让它发挥作用，但对我来说有点不同。

manifest.json

"web_accessible_resources": [
   "build/*"
]

index.js

const script = document.createElement('script');

script.setAttribute('type', 'module');
script.setAttribute('src', chrome.runtime.getURL('build/my-component.esm.js'));
script.setAttribute('data-resources-url', chrome.runtime.getURL('build/'));
script.setAttribute('data-stencil-namespace', 'my-component');

document.body.appendChild(script);

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

How to inject a stencil's component inside a webpage using a chrome extension?

javascript

web-component

google-chrome-extension

shadow-dom

stenciljs