Ik ben bezig met het maken van een Chrome-extensie voor een Widget voor het bijsnijden van afbeeldingen. De code van mijn popup.htmlis als volgt:
<body>
<textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
<script type="text/javascript">
var protocol=window.location.protocol;
var host= window.location.host;
var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></\script>
<script type="text/javascript" src="'+protocol+'//'+host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
<script type="text/javascript">init_widget()<\/script>');
document.getElementById("widget_script").innerHTML=head;
</script>
</body>
De variabelen protocolen hostnemen protocolen hostvan de URL in de browser. Toen ik dit probeerde te integreren als een Chrome-extensie, werkte het niet. Als het perfect werkt, wordt de volgende code weergegeven in het tekstgebied:
<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>
Ik heb een paar dingen, zoals het plaatsen van de JS-code in een extern JS-bestand en ook het aanroepen van het bestand in manifest.jsondoor het in mijn popup.htmlaan te roepen, maar geen enkele werkte.
Kan iemand me vertellen wat ik verkeerd doe, of wat ik nog meer moet proberen om het te laten werken?
Bij voorbaat dank…
Antwoord 1, autoriteit 100%
Van de Chrome-extensie CSP-documenten:
Inline JavaScript wordt niet uitgevoerd. Deze beperking verbiedt zowel inline
<script>-blokken als inline event-handlers (bijv.<button onclick="...">).
U kuntgeen inline scripts in uw HTML-extensie hebben zoals:
<script>alert("I'm an inline script!");</script>
<button onclick="alert('I am an inline script, too!')">
In plaats daarvan moet u uw script in een apart bestand plaatsen:
<script src="somescript.js"></script>
Antwoord 2, autoriteit 31%
Als je React gebruikt met create-react-app:
-
maak een
.env-bestand in de hoofdmap van het project -
Voeg de variabele als volgt toe:
INLINE_RUNTIME_CHUNK=false -
Bouw het project opnieuw en laad de extensie opnieuw.
Antwoord 3, autoriteit 12%
Je moet content_security_policytoevoegen aan je manifest.json-bestand:
"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"
Je vindt de hash van de console.
Antwoord 4
Ik kwam dit probleem net tegen toen ik een extensie aan het ontwikkelen was. Ik heb de extensie verwijderd en opnieuw geladen waardoor de foutmelding verdween.