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)
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"
.
归档时间: |
|
查看次数: |
87417 次 |
最近记录: |