javascript - 使用 Chrome 扩展覆盖 Element.prototype.attachShadow
问题描述
我需要访问具有封闭 Shadow DOM 的 Web 组件的 DOM 以进行某些 Selenium 测试。我已经阅读了一些参考资料,您可以Element.prototype.attachShadow
在文档启动时覆盖这些参考资料,以便将阴影从关闭更改为打开。为此,我创建了一个 Chrome 扩展程序。下面是我的manifest.json
:
{
"name": "SeleniumTesting",
"description": "Extension to open closed Shadow DOM for selenium testing",
"version": "1",
"author": "SeleniumTesting",
"manifest_version": 2,
"permissions": ["downloads", "<all_urls>"],
"content_scripts": [{
"matches": ["http://localhost:5000/*"],
"run_at": "document_start",
"all_frames": true,
"js": ["shadowInject.js"]
}]
}
还有我的shadowInject.js
console.log('test');
Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
console.log('attachShadow');
return this._attachShadow( { mode: "open" } );
};
为了测试它,我在一个 ASPNetCore MVC 项目中创建了我的组件。下面是我创建自定义组件的 javascript:
customElements.define('x-element', class extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({
mode: 'closed'
});
this._shadowRoot.innerHTML = `<div class="wrapper">
<a href="download/File.pdf" download>
<button id="download">Download File</button>
</a>
<p>Link para download</p>
</div>`;
}
});
还有我使用它的 HTML 文件:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<script src='~/js/componente.js'></script>
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
<x-element id='comp'></x-element>
</div>
我将我的扩展程序加载到 Chrome 中,然后运行该页面。我得到控制台日志测试,但从未调用 attachShadow 方法,我仍然无法访问关闭的影子 DOM
对于我做错的事情,我真的很感激一些帮助。非常感谢。
最终解决方案
应用答案中的更改后,我需要对manifest.json
. 以下是最终版本:
{
"name": "SeleniumTesting",
"description": "Extension to open closed Shadow DOM for selenium testing",
"version": "1",
"author": "SeleniumTesting",
"manifest_version": 2,
"permissions": ["downloads", "<all_urls>"],
"content_scripts": [{
"matches": ["http://localhost:5000/*"],
"run_at": "document_start",
"all_frames": true,
"js": ["shadowInject.js"]
}],
"web_accessible_resources": ["injected.js"]
}
解决方案
您不应将代码放在 content_scripts 中,因为 content_scripts 与当前页面上下文不同。
您尝试将shadowInject.js
代码更改为:
const injectedScript = document.createElement('script');
injectedScript.src = chrome.extension.getURL('injected.js');
(document.head || document.documentElement).appendChild(injectedScript);
injected.js
然后在同一目录中创建一个文件:
文件内容为:
console.log('test');
Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
console.log('attachShadow');
return this._attachShadow( { mode: "open" } );
};
你可以试试。如果有任何问题,请告诉我
推荐阅读
- python-3.x - 将胶水 pypspark 错误写入文本文件
- c++ - 如何使用 Canny 转 32bit 灰度?
- sql-server - 为什么还原数据库后不存储表和存储过程?
- vue.js - 无法通过@click 调用 vs- 下拉列表中的函数
- mysql - mysql查询从3个类别中获取随机项目
- android-studio - JetBrains 插件:基于 JSON 资源目录的自动完成建议
- android - 无法调用我的 anko-sqlite 数据库对象
- firebase - firebase 不允许我在实时数据库中存储超过 X 个字符
- amazon-web-services - 如何在 cloudformation 的另一个模板中一次导入两个导出的值
- reactjs - 查询条带api并显示图像