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

Question

我需要访问一个具有关闭的Shadow DOM的Web组件，以进行一些Selenium测试。我在几个参考文献中读到，可以在文档启动时覆盖Element.prototype.attachShadow，以将Shadow从关闭状态更改为打开状态。为了做到这一点，我创建了一个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://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <x-element id='comp'></x-element>
</div>

我将我的扩展加载到Chrome中并运行页面。控制台会输出“Test”，但是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"]
}

现在它已经起作用了，Shadow DOM 已经改为打开

- Pascal

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" } );
};

你可以试试看，如果有任何问题，请告诉我。

- Black-Hole

---

我要试一试。我应该如何更改我的manifest.json以触发shadowInject.js，而不是content_script？ - Pascal

manifest.json 不需要更改。您只需要更改 shadowInject.js 文件的内容并创建一个 injected.js 文件。 - Black-Hole

实际上，我需要添加 "web_accessible_resources": ["injected.js"]，以便 injected.js 可以被 getURL 识别和使用，但是一个简单的谷歌搜索让我找到了这个。我已经发布了最终的 manifest.json，以帮助未来的任何人。再次非常感谢您的帮助。 - Pascal

一旦你成功将脚本注入到hook attachShadow方法中，你要如何让内容脚本与注入的脚本进行通信呢？你是使用dispatchEvent和addEventListener的组合吗？还是使用一个共同的对象来触发过程，当事件发生时？ 提前感谢你的回答。 - undefined

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"));
}

- metarmask