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

Question

I'm new in javascript and chrome extensions (this is first application). 我是javascript和chrome扩展程序的新手（这是第一个应用程序）。 Extension get a QRcode of the open page's URL. 扩展名获取打开页面URL的QRcode。 For QRcode generation I use this lib: https://github.com/jeromeetienne/jquery-qrcode I read some quides and many answers on SO, but extension doesn't work. 对于QRcode的生成，我使用以下库： https : //github.com/jeromeetienne/jquery-qrcode我读了一些quides和许多关于SO的答案，但是扩展无法正常工作。 All *.js libraries are in the root catalog with manifest.json 所有* .js库都在带有manifest.json的根目录中

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 popup.html

<!DOCTYPE html>
<html>
<head>
<title>basic example</title>
</head>
<body>

<script src="popup.js"></script>

</body>
</html>

popup.js popup.js

var pathname = window.location.pathname;
    jQuery('#URLqrcodeCanvas').qrcode({
    text    : pathname
});

Most likely I forgot something... 我很可能忘记了一些东西...

Answer 1

There are few things which are wrong in your code. 在您的代码中有几件事是错误的。 Let's take them step by step 让我们一步一步来

Inclusion of both jquery.qrcode.js and jquery.qrcode.min.js : In production code, we try to use minified jquery because downloading of minified js files is faster. 同时包含jquery.qrcode.js和jquery.qrcode.min.js ：在生产代码中，我们尝试使用缩小的jquery，因为缩小的js文件的下载速度更快。
No element with selector used in popup.js : You are trying to access URLqrcodeCanvas in your popup.js while no such element is present in popup.html. popup.js中没有使用选择器的元素 ：您正在尝试访问URLqrcodeCanvas中的URLqrcodeCanvas，而URLqrcodeCanvas中没有此类元素。 May be you should add this 也许你应该添加这个
You have not included jquery and qrcode in your popup.html : You need to understand the context of content script, popup scripts and background scripts. 您没有在popup.html中包含jquery和qrcode ：您需要了解内容脚本，弹出脚本和背景脚本的上下文。 Read this 读这个
SO Answer: Difference between popup script, background and content script 所以答案：弹出脚本，背景和内容脚本之间的区别
Wrong use of window.location.pathname : May be you wanted to access the path of current active tab instead of popup. 错误使用window.location.pathname ：可能是您想访问当前活动选项卡的路径而不是弹出窗口。 Once you understand the difference between popup and content script then you will be easily figure out this point. 了解了弹出脚本和内容脚本之间的区别之后，您将很容易理解这一点。 Read this 读这个
SO Answer: How to get url of active tab ? SO答案：如何获取活动标签的URL？

Thanks to @Abraham for adding points 3 and 4 in this answer. 感谢@Abraham在此答案中添加了第3点和第4点。 Hope it helps!! 希望能帮助到你！！

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-03-15 15:47:52

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-03-15 15:47:52

解决方案1
2 已采纳 2014-03-15 15:47:52