使用Chrome扩展程序覆盖Element.prototype.attachShadow [英] Override Element.prototype.attachShadow using Chrome Extension

问题描述

我需要访问具有封闭Shadow DOM的Web组件的DOM，以进行某些Selenium测试。我在几个参考文献中读到你可以在文档启动时覆盖 Element.prototype.attachShadow ，以便将Shadow从关闭更改为打开。为此，我创建了一个Chrome扩展程序。以下是我的 manifest.json ：

I need to access the DOM of a web component that has a closed Shadow DOM for some Selenium testing. I've read in several references that you can override Element.prototype.attachShadow on the document startup in order to change the Shadow from closed to open. In order to do this, I created a Chrome Extension. Below is my 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：

In order to test it, I created my component in an ASPNetCore MVC project. Below is my javascript that creates the custom component:

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文件使用它：

And my HTML file that uses it:

@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

I load my extension into Chrome, and I run the page. I get the console log Test, but the attachShadow method is never called, and I still cannot access the closed shadow DOM

我真的很感谢能帮到我做错了什么。非常感谢。

I would really appreciate some help on what I`m doing wrong. Thank you very much.

最终解决方案

应用更改后回答，我需要对 manifest.json 进行一些调整。以下是最终版本：

After applying the changes in the answer, I need to make some adjustments to the manifest.json. Below is the final version:

{
    "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更改为打开

Now it worked, and the Shadow DOM changed to open

推荐答案

你不应该把content_scripts中的代码，因为content_scripts与curre不同nt页面上下文。

You should not put the code in content_scripts because content_scripts is not the same as the current page context.

您尝试将 shadowInject.js 代码更改为：

const injectedScript = document.createElement('script');
injectedScript.src = chrome.extension.getURL('injected.js');
(document.head || document.documentElement).appendChild(injectedScript);

然后创建一个 inject.js 文件相同目录：

Then create a injected.js file in the same directory:

文件内容为：

console.log('test');
Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function () {
    console.log('attachShadow');
    return this._attachShadow( { mode: "open" } );
};

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

You can try it. If there is any problem, please let me know

这篇关于使用Chrome扩展程序覆盖Element.prototype.attachShadow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！