谷歌瀏覽器擴展程序 - 彈出頁面無法正確顯示

我正在努力創建一個Google Chrome瀏覽器擴展程序 - 在此擴展程序中，有一個使用Accordion的彈出頁面 - 通過Jquery UI。谷歌瀏覽器擴展程序 - 彈出頁面無法正確顯示

現在，我已經正確定義了manifest.json中的popup.html文件，並將jquery UI的「start」主題代碼添加到popup.html文件中。

但是，當我點擊工具欄中的應該顯示彈出窗口的按鈕時，手風琴的所有部分都顯示爲打開 - 手風琴根本沒有顯示出來 - 我能看到的只是純文本手風琴的各個部分。

下面給出的是如下的我manifest.json--

{ 
    "name": "Test", 
    "version": "1.0", 
    "manifest_version": 2, 
"content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "js": ["jquery-1.7.2-full.js", "basicjs.js"] 
    } 
    ], 
    "description": "The first extension that I made.", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    } , 
    "permissions": [ 
     "http://*/", "https://*/" 
    ], 
    "background": { 
     "scripts": ["background.js"] 
    }, 
    "browser_action": { 
     "default_icon": "images/anya_bl_32x32x32.png", // optional 
     "default_title": "Test",  // optional; shown in tooltip 
     "default_popup": "popup.html"  // optional 
} 
}

同樣的代碼，是我popup.html file--

<html> 
<head> 
<title> Anya Services Data Crawler Automated Data Retrieval App</title> 
<style> 
/*! 
* jQuery UI CSS Framework 1.8.21 
* Below this is the entire code for the start theme's css file.... 
................................. 
</style> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script> 
    <script> 
     $(function() { 
    $("#accordion").accordion({ 
     collapsible: true 
    }); 
}); 
</script> 
</head> 

<body> 

<div id="accordion"> 
<h3><a href="#">Section 1</a></h3> 
<div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> 
</div> 
<h3><a href="#">Section 2</a></h3> 
<div> 
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> 
</div> 
<h3><a href="#">Section 3</a></h3> 
<div> 
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
</div> 
<h3><a href="#">Section 4</a></h3> 
<div> 
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
</div> 
</div> 


</body> 
</html>

什麼上午的部分代碼我在這裏做錯了嗎？我如何解決這個錯誤？

來源

2012-07-22 Arvind

指定"manifest_version": 2時，設置爲default Content security policy restrictions。其中一個後果是內聯JavaScript未被評估。

There's no way啓用內嵌Javascript。爲了讓您的代碼工作，將其移動到外部腳本文件，並將其嵌入，具體如下：

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

popup.js：

$(function() { 
    $("#accordion").accordion({ 
     collapsible: true 
    }); 
});

來源

2012-07-22 10:16:48

爲什麼它不沃金對我來說我已經使用相同的代碼，雖然它給了我錯誤，因爲手風琴不是一個功能......等待你的回覆。 – Sona 2015-07-29 10:09:43

@Sona在可以使用手風琴方法之前，您必須加載jQuery和jQuery UI。 – 2015-07-29 10:11:42

是的，我這樣做..但我的問題是Jquery衝突，當我刪除util.js然後手風琴作品。你有什麼想法如何擺脫這種衝突？ – Sona 2015-07-29 10:32:59

谷歌瀏覽器擴展程序 - 彈出頁面無法正確顯示

回答

相關問題