在內容腳本中定義但在彈出窗口中無法訪問的腳本（Chrome擴展程序）

Question

我是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
});

我很可能忘記了一些東西...

Answer 1

在您的代碼中有幾件事是錯誤的。 讓我們一步一步來

同時包含jquery.qrcode.js和jquery.qrcode.min.js ：在生產代碼中，我們嘗試使用縮小的jquery，因為縮小的js文件的下載速度更快。
popup.js中沒有使用選擇器的元素 ：您正在嘗試訪問URLqrcodeCanvas中的URLqrcodeCanvas，而URLqrcodeCanvas中沒有此類元素。 也許你應該添加這個
您沒有在popup.html中包含jquery和qrcode ：您需要了解內容腳本，彈出腳本和背景腳本的上下文。 讀這個
所以答案：彈出腳本，背景和內容腳本之間的區別
錯誤使用window.location.pathname ：可能是您想訪問當前活動選項卡的路徑而不是彈出窗口。 了解了彈出腳本和內容腳本之間的區別之后，您將很容易理解這一點。 讀這個
SO答案：如何獲取活動標簽的URL？

感謝@Abraham在此答案中添加了第3點和第4點。 希望能幫助到你！！

在內容腳本中定義但在彈出窗口中無法訪問的腳本（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