Question

我是javascript和chrome扩展程序的新手（这是第一个应用程序）。 Extension获取打开页面的URL的QRcode。对于QRcode生成，我使用这个库：https://github.com/jeromeetienne/jquery-qrcode 我在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
});

我很可能忘记了一些事情......

Answer 1

您的代码中存在一些错误。让我们一步一步地把它们带走

包含jquery.qrcode.js和jquery.qrcode.min.js ：在生产代码中，我们尝试使用minified jquery，因为下载缩小的js文件更快。< / p>
popup.js中没有使用选择器的元素：您正在尝试访问popup.js中的URLqrcodeCanvas，而popup.html中没有此类元素。也许你应该添加这个
您没有在popup.html中包含jquery和qrcode ：您需要了解内容脚本，弹出脚本和后台脚本的上下文。阅读本文

SO Answer: Difference between popup script, background and content script
错误地使用window.location.pathname ：您可能想要访问当前活动标签的路径而不是弹出窗口。一旦你理解了弹出窗口和内容脚本之间的区别，你就会很容易理解这一点。阅读本文

SO Answer: How to get url of active tab ?

感谢@Abraham在这个答案中添加第3点和第4点。希望它有所帮助!!

脚本在内容脚本中定义但无法在弹出窗口中访问（Chrome扩展程序）

1 个答案: