我正在创建一个图像裁剪小部件的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>
变量协议和主机从浏览器中的URL获取协议和主机。当我尝试将其作为Chrome扩展程序集成时,它不起作用。当它完美地工作时,它在textarea中显示以下代码:
<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 extension CSP docs:
Inline JavaScript will not be executed. This restriction bans both inline
<script>
blocks and inline event handlers (e.g.<button onclick="...">
).
您的扩展名HTML中不能包含内联脚本,如:
<script>alert("I'm an inline script!");</script> <button onclick="alert('I am an inline script,too!')">
相反,您必须将脚本放在单独的文件中:
<script src="somescript.js"></script>