【杂】Chrome插件

借助Chrome网上应用店，您可以发布三种项目：

应用

包含可安装的Web应用程序。可安装的Web应用程序可以是带有一些额外元数据的普通网站。这种类型的应用程序称为【托管应用程序】。

另外，可安装的Web应用程序可以将其所有内容捆绑到一个存档中，用户在安装该应用程序时可以下载该存档；这是一个【打包的应用程序】。（eg:Web Server for Chrome)

【托管】和【打包】应用都在Chrome的“新标签”页面中带有图标，并且大多数用户如果不查看地址栏就无法分辨它们之间的区别。

主题

包含Chrome的主题，这些主题会更改浏览器的外观。

扩展

包含Chrome扩展程序，这些扩展程序会更改浏览器的行为并以有限的方式改变外观。

如果您的扩展程序看起来像是一个网站，而不是一个小的浏览器插件，请考虑使其成为一个打包的应用程序。打包的应用程序被实现为扩展，这些扩展具有呈现类似应用程序的界面的附加功能。

如何选择

扩展

• 一个 【Chrome 扩展】其实就是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件的集合。
• 扩展程序是基于事件的程序，其在后台脚本中监视浏览器事件，然后按照指定的指示进行响应。

文件结构说明	 
./
├─ manifest.json //扩展的配置项
├─ custom.js     //自定义js脚本
├─ custom.css    //自定义css样式
├─ icon.png      //扩展程序的icon
└─ popup.html    //扩展的展示弹窗


manifest.json 示例：
	{
	  "name": "扩展名称",
	  "version": "1.0.0",
	  "manifest_version": 2,
	  "description": "扩展描述",
	  "icons" : {           
    // 扩展的icon
		"16" : "icon.png",
		"48" : "icon.png",
		"128" : "icon.png"
	  },
	  "browser_action": {   
    // browser_action表示程序图标会出现在地址栏右侧，若要出现在地址栏，
    // 则写成page_action
		"default_title": "日报工具",
		"default_icon": "icon.png",
		"default_popup": "popup.html"
	  },
	  "content_scripts": [  
    //content_scripts是在Web页面内运行的javascript脚本。
    //通过使用标准的DOM，可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
		{                   
    //这里的值是数组，可以针对多个站点进行不同的操作配置
		  "matches": [
			"http://www.google.com/*"
		  ],
		  "css": [
			"custom.css"
		  ],
		  "js": [
			"custom.js"
		  ],
		  "all_frames": true,
		  "run_at": "document_idle"
		}
	  ],
	  "permissions": [   
    //一些权限的配置，
    //比如cookie权限，比如系统通知权限，类似于notify这样的东西，在window系统上右下角的小气泡
		"cookies",    
		"notifications"
	  ]
	}

 

调试方法:

1. 浏览器访问【chrome://extensions】
2. 点击【加载已解压的扩展程序】
3. 选择开发文件夹目录
4. 【错误】按钮默认是隐藏的，但如果插件脚本某次触发后存在错误，则【错误】按钮会被显示，并且不会再隐藏，直至点击【全部清除】按钮
   1. 
5. 点击【错误】即可查看错误

 

参考

1. 【chrome插件开发简介（一）开发入门】- https://github.com/kaola-fed/blog/issues/25
2. 【什么是扩展？】- https://developer.chrome.com/extensions/getstarted