title: Override Element.prototype.attachShadow using Chrome Extension
body: <p>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 <code>Element.prototype.attachShadow</code> 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 <code>manifest.json</code>:</p>
  
  <pre><code>{
      "name": "SeleniumTesting",
      "description": "Extension to open closed Shadow DOM for selenium testing",
      "version": "1",
      "author": "SeleniumTesting",
      "manifest_version": 2,
      "permissions": ["downloads", "&lt;all_urls&gt;"],
      "content_scripts": [{
          "matches": ["http://localhost:5000/*"],
          "run_at": "document_start",
          "all_frames": true,
          "js": ["shadowInject.js"]
      }]
  }
  </code></pre>
  
  <p>And my <em>shadowInject.js</em></p>
  
  <pre><code>console.log('test');
  Element.prototype._attachShadow = Element.prototype.attachShadow;
  Element.prototype.attachShadow = function () {
      console.log('attachShadow');
      return this._attachShadow( { mode: "open" } );
  };
  </code></pre>
  
  <p>In order to test it, I created my component in an ASPNetCore MVC project. Below is my javascript that creates the custom component:</p>
  
  <pre><code>customElements.define('x-element', class extends HTMLElement {
      constructor() {
          super(); 
          this._shadowRoot = this.attachShadow({
              mode: 'closed'
          });
          this._shadowRoot.innerHTML = `&lt;div class="wrapper"&gt;
          &lt;a href="download/File.pdf" download&gt;
              &lt;button id="download"&gt;Download File&lt;/button&gt;
          &lt;/a&gt;
          &lt;p&gt;Link para download&lt;/p&gt;
        &lt;/div&gt;`;
      }
  });
  </code></pre>
  
  <p>And my HTML file that uses it:</p>
  
  <pre><code>@page
  @model IndexModel
  @{
      ViewData["Title"] = "Home page";
  }
  &lt;script src='~/js/componente.js'&gt;&lt;/script&gt;
  
  &lt;div class="text-center"&gt;
      &lt;h1 class="display-4"&gt;Welcome&lt;/h1&gt;
      &lt;p&gt;Learn about &lt;a href="https://docs.microsoft.com/aspnet/core"&gt;building Web apps with ASP.NET Core&lt;/a&gt;.&lt;/p&gt;
      &lt;x-element id='comp'&gt;&lt;/x-element&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <p><a href="https://i.stack.imgur.com/iFnZG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iFnZG.png" alt="Console log"></a></p>
  
  <p>I would really appreciate some help on what I`m doing wrong. Thank you very much.</p>
  
  <p><strong>FINAL SOLUTION</strong></p>
  
  <p>After applying the changes in the answer, I need to make some adjustments to the <code>manifest.json</code>. Below is the final version:</p>
  
  <pre><code>{
      "name": "SeleniumTesting",
      "description": "Extension to open closed Shadow DOM for selenium testing",
      "version": "1",
      "author": "SeleniumTesting",
      "manifest_version": 2,
      "permissions": ["downloads", "&lt;all_urls&gt;"],
      "content_scripts": [{
          "matches": ["http://localhost:5000/*"],
          "run_at": "document_start",
          "all_frames": true,
          "js": ["shadowInject.js"]
      }],
      "web_accessible_resources": ["injected.js"]
  }
  </code></pre>
  
  <p>Now it worked, and the Shadow DOM changed to open
  <a href="https://i.stack.imgur.com/PYfA6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PYfA6.png" alt="enter image description here"></a></p>