onclick nebo inline skript nefunguje v rozšíření

Rozšíření Chrome neumožňují mít vložený JavaScript (dokumentaci).
Totéž platí pro Firefox WebExtensions (dokumentace).

Budete muset udělat něco podobného:

Přiřaďte odkazu ID (<a onClick=hellYeah("xxx")> se změní na <a id="link"> ) a použijte addEventListener zavázat událost. Do popup.js vložte následující soubor:

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});

popup.js by měl být načten jako samostatný soubor skriptu:

<script src="popup.js"></script>

Důvod

Toto nefunguje, protože Chrome prostřednictvím zásad zabezpečení obsahu zakazuje jakýkoli druh vloženého kódu do rozšíření.

Inline JavaScript nebude spuštěn. Toto omezení zakazuje jak vložené <script> bloky a vložené obslužné nástroje událostí (např. <button onclick="..."> ).

Jak zjistit

Pokud je to skutečně problém, Chrome v konzoli vytvoří následující chybu:

Odmítl spustit vložený skript, protože porušuje následující direktivu zásad zabezpečení obsahu:"script-src 'self' chrome-extension-resource:". K aktivaci inline spuštění je vyžadováno klíčové slovo 'unsafe-inline', hash ('sha256-...') nebo nonce ('nonce-...').

Chcete-li se dostat do konzole JavaScriptu vyskakovacího okna (která je užitečná pro ladění obecně), klikněte pravým tlačítkem na tlačítko svého rozšíření a z kontextové nabídky vyberte možnost „Prozkoumat vyskakovací okno“.

Další informace o ladění vyskakovacího okna jsou k dispozici zde.

Jak to opravit

Je třeba odstranit veškerý vložený JavaScript. V dokumentaci Chrome je průvodce.

Předpokládejme, že originál vypadá takto:

<a onclick="handler()">Click this</a> <!-- Bad -->

Je třeba odstranit onclick atribut a dát prvku jedinečné ID:

<a id="click-this">Click this</a> <!-- Fixed -->

A pak připojte posluchač ze skriptu (který musí být v .js soubor, předpokládejme popup.js ):

// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", handler);
});

// The handler also must go in a .js file
function handler() {
  /* ... */
}

Všimněte si obalu v DOMContentLoaded událost. Tím je zajištěno, že prvek v době provádění existuje. Nyní přidejte značku skriptu, například do <head> dokumentu:

<script src="popup.js"></script>

Alternativa, pokud používáte jQuery:

// jQuery
$(document).ready(function() {
  $("#click-this").click(handler);
});

Uvolnění zásad

Otázka: Chyba zmiňuje způsoby, jak povolit vložený kód. Nechci / nemohu změnit svůj kód, jak povolím vložené skripty?

Odpověď: Navzdory tomu, co chyba říká, nemůžete povolit vložený skript:

Neexistuje žádný mechanismus pro uvolnění omezení proti provádění vloženého JavaScriptu. Zejména nastavení zásady skriptu, která zahrnuje 'unsafe-inline' nebude mít žádný účinek.

Aktualizace: Od Chrome 46 je možné přidat na seznam povolených konkrétní bloky vloženého kódu:

Od verze Chrome 46 lze vložené skripty přidat na seznam povolených zadáním hodnoty hash zdrojového kódu v zásadě zakódované v base64. Tento hash musí mít předponu použitý hashovací algoritmus (sha256, sha384 nebo sha512). Viz použití hash pro <script> prvky pro příklad.

Nevidím však důvod, proč to používat, a nepovolí to vložené atributy jako onclick="code" .


Jak již bylo zmíněno, Chrome Extensions neumožňují mít vložený JavaScript z bezpečnostních důvodů, takže můžete vyzkoušet i toto řešení.

HTML soubor

<!doctype html>
    <html>
        <head>
            <title>
                Getting Started Extension's Popup
            </title>
            <script src="popup.js"></script>
        </head>
        <body>
            <div id="text-holder">ha</div><br />
            <a class="clickableBtn">
                  hyhy
            </a>
        </body>
    </html>
<!doctype html>

popup.js

window.onclick = function(event) {
    var target = event.target ;
    if(target.matches('.clickableBtn')) {
        var clickedEle = document.activeElement.id ;
        var ele = document.getElementById(clickedEle);
        alert(ele.text);
    }
}

Nebo pokud máte zahrnut soubor Jquery, pak

window.onclick = function(event) {
    var target = event.target ;
    if(target.matches('.clickableBtn')) {
        alert($(target).text());
    }
}