[英]Scripts defined in content scripts but not accessible in popup (Chrome extension)
我是javascript和chrome扩展程序的新手(这是第一个应用程序)。 扩展名获取打开页面URL的QRcode。 对于QRcode的生成,我使用以下库: https : //github.com/jeromeetienne/jquery-qrcode我读了一些quides和许多关于SO的答案,但是扩展无法正常工作。 所有* .js库都在带有manifest.json的根目录中
的manifest.json
{
"manifest_version": 2,
"name": "QRify",
"description": "This extension shows a QR code of the open page",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": [
"jquery.min.js",
"jquery.qrcode.js",
"jquery.qrcode.min.js",
"qrcode.js"
]
}
],
"browser_action":{
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
</head>
<body>
<script src="popup.js"></script>
</body>
</html>
popup.js
var pathname = window.location.pathname;
jQuery('#URLqrcodeCanvas').qrcode({
text : pathname
});
我很可能忘记了一些东西...
在您的代码中有几件事是错误的。 让我们一步一步来
同时包含jquery.qrcode.js和jquery.qrcode.min.js :在生产代码中,我们尝试使用缩小的jquery,因为缩小的js文件的下载速度更快。
popup.js中没有使用选择器的元素 :您正在尝试访问URLqrcodeCanvas
中的URLqrcodeCanvas,而URLqrcodeCanvas
中没有此类元素。 也许你应该添加这个
您没有在popup.html中包含jquery和qrcode :您需要了解内容脚本,弹出脚本和背景脚本的上下文。 读这个
错误使用window.location.pathname :可能是您想访问当前活动选项卡的路径而不是弹出窗口。 了解了弹出脚本和内容脚本之间的区别之后,您将很容易理解这一点。 读这个
感谢@Abraham在此答案中添加了第3点和第4点。 希望能帮助到你!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.