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());
}
}