Chrome扩展中的onClick不工作

4回答

慕斯王

Chrome扩展不允许您使用内联JavaScript(文献资料)。你将不得不做一些类似的事情。为链接分配一个ID(<a onClick=hellYeah("xxx")>成<a id="link">)，并使用addEventListener来绑定事件。将以下内容放入您的popup.js档案：document.addEventListener('DOMContentLoaded', function() {     var link = document.getElementById('link');     // onClick's logic below:     link.addEventListener('click', function() {         hellYeah('xxx');     });});

0 0

慕容森

原因这不起作用，因为Chrome禁止任何类型的内联代码。通过内容安全策略进行扩展。内联JavaScript不会被执行。这一限制既禁止内联，也禁止内联。<script>砌块和内联事件处理程序(例如：<button onclick="...">).如何检测如果这确实是问题所在，Chrome将在控制台中产生以下错误：拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src‘Self’chrom-扩展名：”。要么是‘不安全-内联’关键字，要么是散列(‘sha256-.’)，或者是现在(‘none-.’)需要启用内联执行。要访问弹出窗口的JavaScript控制台(通常对调试有用)，右键单击扩展按钮并从上下文菜单中选择“检查弹出”。有关调试弹出窗口的更多信息可用。这里.如何修复需要删除所有内联JavaScript。的确有Chrome文档指南.假设原来的样子是：<a onclick="handler()">Click this</a> 需要移除onclick属性，并为元素提供一个唯一的id：<a id="click-this">Click this</a> 然后从脚本(必须在.js文件，假设popup.js):// Pure JS:document.addEventListener('DOMContentLoaded', function() {   document.getElementById("click-this").addEventListener("click", handler);});// The handler also must go in a .js filefunction handler() {   /* ... */}请注意DOMContentLoaded事件。这确保元素在执行时存在。现在添加脚本标记，例如在<head>文件：<script src="popup.js"></script>如果使用jQuery，则可以选择：// jQuery$(document).ready(function() {   $("#click-this").click(handler);});放宽政策问：该错误提到了允许内联代码的方法。我不想/不能更改我的代码，如何启用内联脚本？答：不管错误怎么说，你不可能启用内联脚本:没有任何机制可以放松对执行内联JavaScript的限制。特别是，设置脚本策略，其中包括'unsafe-inline'不会有任何效果。最新情况：从Chrome 46开始，可以白化特定的内联代码块：从Chrome 46开始，可以通过在策略中指定源代码的base 64编码哈希来白化内联脚本。此散列必须以所使用的哈希算法(Sha 256、Sha 384或Sha 512)作为前缀。看见散列用法<script>元素举个例子。但是，我不太清楚使用它的原因，而且它也不会启用内联属性，例如onclick="code".

0 0

开心每一天1111

我决定公布我在我的案例中使用的例子。我试图用脚本替换div中的内容。我的问题是Chrome没有识别/没有运行这个脚本。更详细地说，我想要做的是：单击一个链接，并将该链接“读取”一个外部html文件，将其加载到div部分中。我发现，通过使用调用的ID将脚本放在DIV之前，脚本无法工作。如果脚本在另一个DIV中，它也不能工作。脚本必须使用document.addEventListener(‘DOMContentLoade’)编写，函数()    <body>     <a id=id_page href ="#loving"   onclick="load_services()"> loving   </a>         <script>                 // This script MUST BE under the "ID" that is calling                 // Do not transfer it to a differ DIV than the caller "ID"                 document.getElementById("id_page").addEventListener("click", function(){                 document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; >                 </object>'; });             </script>     </body>   <div id="mainbody" class="main_body">         "here is loaded the external html file when the loving link will           be  clicked. "  </div>

0 0