扩展的 popup.html 无法在 Chrome 上正确加载答案

【问题标题】：extension's popup.html does not load properly on Chrome扩展的 popup.html 无法在 Chrome 上正确加载
【发布时间】：2013-12-07 01:54:09
【问题描述】：

我做了一个 chrome 扩展，下面是我的 manifiest.json 文件

   {
     "update_url":"http://clients2.google.com/service/update2/crx",
     "name": "Example",
     "version": "1.0",
     "manifest_version": 2,
     "description": "Example Dictionary",

      "browser_action": {
      "default_icon": "16x16.png",
      "icons": ["128x128.png"],
      "default_title": "Dictionary",
      "default_popup": "index.html"  
   },

 "icons": { 
    "16" : "16x16.png",
    "48" : "48x48.png",
    "128": "128x128.png"  },

   "content_scripts": [
   {
      "matches": ["<all_urls>"],
  "css" : ["jqm-demos.css","jquery.mobile.min.css"],
  "js": ["index.js","jquery.js","jquery.mobile.min.js"]
 }
  ]

}

现在当我加载 popup.html 页面时看起来像

但是当我加载扩展时它看起来像

【问题讨论】：

标签： javascript jquery html google-chrome-extension google-chrome-devtools

【解决方案1】：

您的清单文件应如下所示：

{
   "update_url":"http://clients2.google.com/service/update2/crx",
   "name": "Example",
   "version": "1.0",
   "manifest_version": 2,
   "description": "Example Dictionary",

   "browser_action": {
    "default_icon": "16x16.png",
    "icons": ["128x128.png"],
    "default_title": "Dictionary",
    "default_popup": "popup.html"  
   },

   "icons": { 
     "16" : "16x16.png",
     "48" : "48x48.png",
     "128": "128x128.png"
   },

   "content_scripts": [
   {
     "matches": ["<all_urls>"],
     "css" : ["jqm-demos.css","jquery.mobile.min.css"],
     "js": ["index.js","jquery.js","jquery.mobile.min.js"]
   }
   ]
}

根据您的快照，您应该将“popup.html”分配给 default_popup 属性。此字段表示当用户单击浏览器操作图标时，您希望在弹出对话框中显示哪个页面。

希望这对你有帮助。

【讨论】：