谷歌浏览器扩展 - 弹出页面无法正确显示 [英] google chrome extension- popup page not showing correctly
问题描述
我正在努力创建一个Google Chrome浏览器扩展程序 - 在此扩展程序中，有一个使用Accordion的弹出页面 - 通过Jquery UI。
I am working to create a Google Chrome Extension- in this extension, there is a popup page that uses Accordion- via Jquery UI.
现在，我已经正确在manifest.json中定义popup.html文件，并将Jquery UI的开始主题代码添加到popup.html文件中。
Now, I have correctly defined the popup.html file in manifest.json, and added the code of "start" theme of Jquery UI to the popup.html file.
然而，当我点击工具栏中应该显示弹出窗口的按钮，然后手风琴的所有部分都显示为打开 - 手风琴根本没有显示出来 - 我可以看到的全部内容都是手风琴各部分的明文。
However when I click on the button in toolbar which should display the popup, then all sections of the accordion are being shown opened- and the accordion is not being shown at all-- all I can see is the plain text for various sections of the accordion.
以下是我的manifest.json代码 -
Given below is the code of my 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文件的一部分代码 -
Also, given below is a portion of the code of my 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>
我在这里做错了什么？ 如何解决此错误？
What am I doing wrong here? How do I resolve this error?
推荐答案
当 manifest_version：2 时，默认的内容安全策略限制。其中一个后果是内联JavaScript未被评估。
When "manifest_version": 2 is specified, the default Content security policy restrictions are set. One of the consequences is that inline JavaScript is not evaluated.
有无法启用内嵌Javascript。为了让你的代码正常工作，将它移动到一个外部脚本文件并嵌入它，如下所示：
There's no way to enable inline Javascript. To get your code to work, move it to an external script file, and embed it, as follows:
<script src="popup.js"></script>
popup.js ：
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
这篇关于谷歌浏览器扩展 - 弹出页面无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
