谷歌浏览器扩展 - 弹出页面未正确显示 [英] google chrome extension- popup page not showing correctly

查看：52
本文介绍了谷歌浏览器扩展 - 弹出页面未正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在创建一个 Google Chrome 扩展程序 - 在这个扩展程序中，有一个使用手风琴的弹出页面 - 通过 Jquery UI.

现在，我已经正确定义了 manifest.json 中的 popup.html 文件，并在 popup.html 文件中添加了 Jquery UI 的开始"主题代码.

但是，当我单击工具栏中应显示弹出窗口的按钮时，手风琴的所有部分都显示为打开状态-而手风琴根本没有显示--我只能看到各种的纯文本手风琴的部分.

下面给出的是我的 manifest.json 的代码--

<代码>{"name": "测试","版本": "1.0",清单版本":2，内容脚本":[{"匹配": [""],"js": ["jquery-1.7.2-full.js", "basicjs.js"]}],"description": "我做的第一个扩展.",浏览器动作":{"default_icon": "icon.png","default_popup": "popup.html"} ,权限":["http://*/", "https://*/"],背景": {脚本":[background.js"]},浏览器动作":{"default_icon": "images/anya_bl_32x32x32.png",//可选"default_title": "Test",//可选；显示在工具提示中"default_popup": "popup.html"//可选}}

另外，下面给出的是我的 popup.html 文件的一部分代码-- 

<头><标题>Anya Services Data Crawler 自动数据检索应用程序</title><风格>/*!* jQuery UI CSS 框架 1.8.21* 下面是开始主题的 css 文件的完整代码....……………………………………………………………………………………………………………………………………………………………………………………</风格><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><脚本>$(函数(){$( "#accordion" ).accordion({可折叠:真实});});<身体><div id="手风琴"><h3><a href="#">第 1 节</a></h3><div><p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.整数 ut neque.Vivamus nisi metus，molestie vel，gravida in，调味品坐 amet，nunc.南尼布.Donec 怀疑 eros.南美.Proin viverra leo ut odio.Curabiturmalesuada.前庭是 velit eu ante scelerisque vulputate. </p>

<h3><a href="#">第 2 节</a></h3><div><p>Sed non urna.Donec et ante.菜豆.前庭坐 a​​met purus.Vivamus hendrerit，aliquet laoreet 的 dolor，mauris turpis porttitor velit，faucibus interdum Tellus libero ac justo.Vivamus 非 quam.在 suscipit faucibus urna.</p>

<h3><a href="#">第 3 节</a></h3><div><p>Nam enim risus，molestie et，porta ac，aliquam ac，risus.古怪的洛波蒂斯.Phasellus pellentesque purus in massa.Aenean 在 pede.Phasellus ac libero actellus pellentesque semper.Sed ac 猫.Sed commodo、magna quis lacinia ornare、quam ante aliquam nisi、eu iaculis leo purus venenatis dui.</p><ul><li>列出第一项</li><li>列出项目二</li><li>列表项三</li>

<h3><a href="#">第 4 节</a></h3><div><p>Cras 格言.Pellentesque 居民 morbi tristique senectus et netus etmalesuada 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 自由人.整数 dignissim consequat lectus.类 aptent taciti socialsqu ad litora Tornt per conubia nostra, per inceptos himenaeos.</p>

我在这里做错了什么?如何解决此错误?

解决方案

When "manifest_version": 2 被指定，设置了默认的内容安全策略限制.后果之一是不评估内联 JavaScript.

无法启用内嵌 Javascript.要使您的代码正常工作，请将其移至外部脚本文件并嵌入，如下所示:

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

popup.js:

$(function() {$("#accordion").手风琴({可折叠:真实});});

I am working to create a Google Chrome Extension- in this extension, there is a popup page that uses Accordion- via Jquery UI.

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.

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
 }
}

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?

解决方案

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.

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆