使用 Chrome 扩展覆盖 Element.prototype.attachShadow

Question

我需要访问具有封闭影子 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"]
}

现在可以了，影子DOM改成开

Answer 1

您不应将代码放在 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" } );
};

你可以试试。如果有什么问题，请告诉我

Answer 2

如 Black-Hole 的回答中所述，内容脚本有自己的 DOM 对象版本，因此您必须在真实 DOM 中向运行注入额外的脚本].

如果您想尽可能少地触摸页面并保持页面其余部分的阴影关闭，您可以使用此脚本：

{
  const shadows = new WeakMap();
  const original = Element.prototype.attachShadow;
  Element.prototype.attachShadow = function() {
    const shadow = original.apply(this, arguments);
    shadows.set(this, shadow);
    return shadow;
  };

  // Later...
  shadows.get(document.querySelector("x-element"));
}

使用 Chrome 扩展覆盖 Element.prototype.attachShadow

Override Element.prototype.attachShadow using Chrome Extension

javascript

google-chrome-extension

shadow-dom