Element utworzony przez skrypt zawartości na stronie powodującej problem z Gmailem, Facebookiem, stackoverflow itp.

Question

Pracuję nad rozszerzeniem przeglądarki Chrome i moim wymaganiem jest utworzenie elementu (przycisku) na stronie dla każdej otwartej karty i chcę pokazać prosty komunikat alertu po kliknięciu button..it działa poprawnie dla wszystkich, ale zawsze tworzy problem z Gmailem, Facebookiem i Stackoverflow ... proszę, pomóż mi rozwiązać ten problem.

Mam kod dodawania przycisku do strony internetowej w moim skrypcie treści.

manifest.json 
     .... 
     .... 
     "content_scripts": [ 
     { 
     "matches":["http://*/*", "https://*/*"], 
     "css": [ "style.css" ], 
     "js":["contentScript.js"], 
     "all_frames": false, 
     "run_at": "document_idle" 
     } 
     ] 
     .... 
     .... 

contentScript.js

.... 
.... 
    function addButton() { 
document.body.innerHTML += '<button id="my_button" class="buttonCss">Show Button</button>'; 
var button = document.getElementById("my_button"); 
button.addEventListener("click", function() { 
    alert("hello"); 
}, false); 

} ..... ..... ....

myślę niektóre funkcje zabezpieczeń Gmaila stwarza problem.

Answer 1

document.body.innerHTML += /* ... */ 

Myślę, że to jest właśnie twoja sprawa. Zmusza Chrome do odtworzenia całego DOM z body, tracąc dołączone zdarzenia/dane.

Właściwym sposobem byłoby skonstruować i dołączyć węzeł DOM:

var button = document.createElement("button"); 
button.id = "my_button"; 
button.className = "buttonCss"; 
button.textContent = "Show Button"; 
document.body.appendChild(button);