ShadowDOM не отображается на странице? - PullRequest
Новая
       38

ShadowDOM не отображается на странице?

0 голосов
/ 02 мая 2020

Я работал над проектом, чтобы показать всплывающее окно, похожее на то, как работает расширение Honey Chrome.

Что я пытаюсь построить

Я волнуюсь с расширением chrome, чтобы получить кнопку для отображения на странице в указанном месте. Однако, когда я загружаю плагин, кнопка никогда не появляется, и я не получаю сообщение об ошибке от Chrome Debugging Tool. Я что-то не так делаю? 

class Alternative extends HTMLDivElement {
constructor() {
    super();

    var altParent = this.parentNode;

    function showAlt(node) {
        var idSection = document.getElementById("centerCol").innerHTML; //tries to get the Div in the Amazon Page by ID
        var button = document.createElement('button');  //Creates a button to test if the section is correct
        var text = document.createTextNode("Can You See Me?"); //Text for the button
        button.appendChild(text); //Appending text onto the button
        myDiv.appendChild(button); //Appending button to Div
        var shadow = this.attachShadow({ mode: 'open' }); //create shadow root
        shadow.appendChild(button); //Append to Shadow Root
    }
}

Обновлен код - проблема в том, что код застрял в L oop

if (document.readyState !== 'loading') {
    console.log('document is already ready, just execute code here');
    myInitCode();
    console.log("hello worlda-1");
} else {
   console.log("hello worlda-2");
   document.addEventListener('DOMContentLoaded', function () {
        console.log('document was not ready, place code here');
        myInitCode();
            }); 
}

console.log("hello world2");
function myInitCode() {
      // document.addEventListener('DOMContentLoaded', () => {
        console.log("World HELLO 3a");
        var idSection = document.getElementById("price"); //tries to get the Div in the Amazon Page by ID
        console.log("ID SECTION", idSection);
        var button = document.createElement('button');  //Creates a button to test if the section is correct
        var text = document.createTextNode("Can You See Me?"); //Text for the button
        button.appendChild(text); //Appending text onto the button
        idSection.appendChild(button); //Appending button to Div
       // idSection.attachShadow({ mode: 'open' }); //create shadow root
       //idSection.appendChild(button); //Append to Shadow Root
}

Код успешно найдет идентификатор "Price", а затем потеряет его, что приведет к нулевому значению для idSection. Цикл навсегда

...