Chrome Extension manifest【谷歌浏览器扩展之配置】

        写了几个谷歌浏览器扩展,帮我省了不少较重复性的工作,由于不常写扩展导致每次写的时候都要去翻文档,故将大致流程记录下来以便后期快速完工,文档上有的流程不赘述。

这次使用一键保存当前页所有图片的例子,最初的思路:

1. 开启则在浏览器右侧浮动小图标,点击展示小窗口
2. 选项页(localStorage),设置获取图片的最低宽或高,400、600、800、1000等值,保存方式:另存为、替换、覆盖
3. 获取页面所有图片,判断媒体文件信息,根据设置的选项值提取符合要求的图片,列表
4. 确认后,自动创建目录,根据选项设定值的方式保存文件

        但在开发的过程中,发现了有些不能按照原有的想法实现,比如:判断媒体文件信息,这个权限只能在 chrome app 中使用,extension 中不能用。于是就换了个方式,采用了获取图片DOM信息中的 naturalWidth 和 naturalHeight 属性值,这有缺点就是需要图片已加载否则值为0。第二个问题就是:创建目录,文件系统的权限也是只能在 app 中使用,extension 中不能使用。然而 chrome.downloads API 可以在保存文件时可以指定相对路径(如 myphoto/aa.jpg),也就是说这个方式可以自动创建目录,也就不存在问题了。


    扩展配置 manifest.json,这里是我使用到的配置,其余配置和 permissions 权限可参考文档说明

{
	"name": "psave",
	"version": "0.1",
	"manifest_version": 2,
	"description": "save images.",
	"icons": {
		"16": "icon-16.png",
		"48": "icon-48.png",
		"128": "icon-128.png"
	},
	"browser_action": {
		"default_icon": "icon-16.png"
	},
	"options_page": "options.html",
	"background": {
		"scripts": ["background.js"]
	},
	"permissions": [
		"cookies",
		"contextMenus",
		"downloads",
		"notifications",
		"storage"
	],
	"content_scripts": [
		{
		  "matches": ["*://*/*"],
		  "js" : ["contentscript.js"]
		}
	]
}

注:若果要在 360极速浏览器 上使用,需要设置 browser_action,否则应用图标不会在浏览器上显示,chrome 不设置也会显示。


效果图预览:



360提供的扩展开发文档    百度提供的开发文档   还有官方的文档…

你可能感兴趣的:(browser)