我正在致力于创建图像裁剪小部件的 Chrome 扩展。我的代码popup.html
如下:
<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="http://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>
变量protocol and host take protocol and host来自浏览器中的 URL。当我尝试将其集成为 Chrome 扩展时,它不起作用。当它完美运行时,它会在文本区域中显示以下代码:
<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>
我有一些事情,比如将 JS 代码放在外部 JS 文件中,并且还调用该文件manifest.json
在我的中调用它popup.html
,但没有一个起作用。
谁能告诉我我做错了什么,或者我还应该尝试什么才能让它发挥作用?
来自Chrome 扩展程序 CSP 文档 https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution:
内联 JavaScript 将不会被执行。此限制禁止内联<script>
块和内联事件处理程序(例如<button onclick="...">
).
You cannot在您的扩展 HTML 中包含内联脚本,例如:
<script>alert("I'm an inline script!");</script>
<button onclick="alert('I am an inline script, too!')">
相反,您必须将脚本放入单独的文件中:
<script src="somescript.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)