扩展程序的popup.html无法在Chrome上正确加载

Question

我做了一个镀铬扩展，下面是我的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页面时看起来像

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

Answer 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属性。此字段表示当用户单击浏览器操作图标时，您希望在弹出对话框中显示哪个页面。

希望这对你有所帮助。