Chrome浏览器中的onClick无效

tee*_*Zee 60 javascript onclick google-chrome-extension

这似乎是最简单的事情,但它只是不起作用.在普通的浏览器中,.html和.js文件工作正常,但在Chrome扩展程序中,该onClick功能没有执行它应该执行的操作.

.js文件:

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}
Run Code Online (Sandbox Code Playgroud)

.html文件:

<!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 onClick=hellYeah("xxx")>
      hyhy
    </a>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

所以基本上一旦用户点击"hyhy","ha"应该变成"xxx".再次 - 它在浏览器中完美运行,但在扩展中不起作用.你知道为什么吗?以防我在下面附上manifest.json.

提前致谢!

manifest.json的:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}
Run Code Online (Sandbox Code Playgroud)

Dav*_*vid 113

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');
    });
});
Run Code Online (Sandbox Code Playgroud)

  • 请注意,即使您无法执行内联 `onclick="handleClick()"`,您仍然可以使用 `el.onclick = handleClick`。 (2认同)

Xan*_*Xan 38

原因

这不起作用,因为Chrome 禁止通过内容安全策略扩展任何类型的内联代码.

内联JavaScript将不会被执行.此限制禁止内联<script>内联事件处理程序(例如<button onclick="...">).

如何检测

如果这确实是问题,Chrome会在控制台中产生以下错误:

拒绝执行内联脚本,因为它违反了以下内容安全策略指令:"script-src'self'chrome-extension-resource:".要么是'unsafe-inline'关键字,哈希('sha256 -...'),要么是nonce('nonce -...')来启用内联执行.

要访问弹出窗口的JavaScript控制台(通常对调试很有用),请右键单击扩展的按钮,然后从上下文菜单中选择"检查弹出窗口".

有关调试弹出窗口的更多信息,请参见此处.

怎么修

需要删除所有内联JavaScript.Chrome文档中一个指南.

假设原件看起来像:

<a onclick="handler()">Click this</a> <!-- Bad -->
Run Code Online (Sandbox Code Playgroud)

需要删除onclick属性并为元素提供唯一ID:

<a id="click-this">Click this</a> <!-- Fixed -->
Run Code Online (Sandbox Code Playgroud)

然后从脚本(必须在.js文件中,假设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() {
  /* ... */
}
Run Code Online (Sandbox Code Playgroud)

请注意DOMContentLoaded事件中的包装.这确保了元素在执行时存在.现在添加脚本标记,例如在<head>文档中:

<script src="popup.js"></script>
Run Code Online (Sandbox Code Playgroud)

如果您使用jQuery,请选择:

// jQuery
$(document).ready(function() {
  $("#click-this").click(handler);
});
Run Code Online (Sandbox Code Playgroud)

放宽政策

问:错误提到了允许内联代码的方法.我不想/不能更改我的代码,如何启用内联脚本?

答:尽管错误说明了,但您无法启用内联脚本:

没有放松对执行内联JavaScript的限制的机制.特别是,设置包含的脚本策略'unsafe-inline'将不起作用.

更新:自Chrome 46以来,可以将特定内联代码块列入白名单:

从Chrome 46开始,可以通过在策略中指定源代码的base64编码哈希来将内联脚本列入白名单.此哈希必须以使用的哈希算法(sha256,sha384或sha512)作为前缀.有关示例,请参阅元素的哈希用法<script>.

但是,我没有看到使用它的理由,也不会启用内联属性onclick="code".