chrome扩展(插件)开发(二)项目目录和清单配置

有了chrome扩展基本结构知识,就可以开始写代码了。代码的书写又牵扯到下一个问题,那就是项目结构

项目结构

在这里插入图片描述
在这里插入图片描述
整体目录和普通的前端web项目是一样的,每个人有每个人的写法,只要能让chrome读取到manifest.json配置文件即可。

manifest.json配置文件如下

{
	"manifest_version": 2,
	"name": "Chrome插件demo",
	"version": "1.0",
	"description": "最简单的Chrome插件demo,需要快速做一个简单的插件时可以基于这个仓库开发",
	"author": "mentals@foxmail.com",
	"icons":
	{
		"16": "icon.png",
		"48": "icon.png",
		"128": "icon.png"
	},
	"browser_action": 
	{
		"default_icon": "icon.png",
		"default_popup": "popup.html"
	},
	"content_scripts": 
	[
		{
      "matches": [
        "*://lmk.xxxxx.com/*",
        "*://www.xxxxx.com/*"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/login.js"
      ],
      "run_at": "document_idle"
    },
    {
      "matches": [
        "*://lmk.xxxxx.com/default.html"
      ],
      "js": [
        "js/content_script/jump.js"
      ],
      "run_at": "document_idle"
    },
    {
      "matches": [
        "*://lmk.xxxxx.com/makeCard/cardManage.html"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/inject.js"
      ],
      "run_at": "document_idle"
    },
    {
      "matches": [
        "*://lmk.xxxxx.com/makeCard/setCount.html?*"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/rechargeHandler.js"
      ],
      "run_at": "document_idle"
    }
	],
  "background": {
    "page": "app/background.html",
    "persistent": true
  },
  "permissions": [
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "*://lmk.xxxxx.com/*",
    "notifications",
    "storage"
  ],
  "web_accessible_resources": [
    "js/*"
  ]
}
icons

其中48指向的图片用于扩展程序管理器列表里面的图标
在这里插入图片描述
根据资料显示
16的图片指向infobar图标。(没找到)
128的图片指向的是应用程序显示的图标。(待验证)
在这里插入图片描述

browser_action

chrome浏览器地址栏显示的图标和popup html页面的指向

content_scripts

需要注入js的页面列表

{
      "matches": [ //被注入的页面
        "*://lmk.xxxxx.com/*",
        "*://www.xxxxx.com/*"
      ],
      "js": [ // 注入的js
        "js/zepto.min.js",
        "js/content_script/login.js"
      ],
      "run_at": "document_idle" // 注入js的时机 (dom准备好了再注入)
    }
background

有三种属性
如果指定了script 则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面
如果指定了page属性,则Chrome会将指定的HTML文件作为后台页面运行
persistent属性默认为true,当其值为true时,表示扩展将一直在后台运行,无论其是否正在工作;当其值为false时,表示扩展在后台按需运行,这就是Chrome后来提出的Event Page。Event Page可以有效减小扩展对内存的消耗,如非必要,请将persistent设置为false。persistent的默认值为true。

permissions

permissions属性不是manifest.json配置文件的必须属性,但是它是开发插件时必须用到的属性,因为开发插件总得要点 API 权限,其我用到的属性如下

  • “tabs”, 访问浏览器选项卡的权限
  • “webRequest”, 监听当前页面ajax请求的权限
  • “http://lmk.xxxxx.com/*”, AJAX访问http://lmk.xxxxx.com/*的权限
  • “notifications”, 浏览器通知(基于HTML5的通知实现),mac系统通知到屏幕右上角,window系统通知到系统右下角
  • “storage”, 存储,希望存储一些设置的话,就需要用到
web_accessible_resources

浏览器网页能真正访问的js,或者是能被扩展以dom操作的方式真正加载到网页的js,它的作用域和window和原浏览器网页里面的js一样。

附上一份大佬整理的 manifest.json 参数解析

{
	// Required
	"manifest_version": 2,						// manifest编写规范版本,目前主流2
	"name": "My Extension",						// 插件名
	"version": "versionString",					// 版本号
 
	// Recommended
	"default_locale": "en",						// 默认编码
	"description": "A plain text description", 	// 插件描述
	"icons": {									// 插件下载或浏览时显示的图标,可选多种规格,建议128
		"16": "icon16.png",
		"48": "icon48.png",
		"128": "icon128.png"
	},
 
	// Pick one (or none)
	"browser_action": {},						// 图标显示在地址栏右边,能在所有页面显示
	"page_action": {},							// 图标显示在地址栏右侧(地址栏内),只在特定页面显示
 
	// Optional
	"author": "",								// 插件作者
	"automation": true,							// 开启自动化
	"background": {								// 可常驻浏览器后台的脚本,可以连接其他页面
		// Recommended
		"persistent": false,
		"script": ["background.js"]
	},
	"background_page": ,
	"chrome_settings_overrides": {},			// 覆盖当前的chrome配置
	"chrome_ui_overrides": {					// 覆盖当前的chrome界面配置
		"bookmarks_ui": {
		"remove_bookmark_shortcut": true,
		"remove_button": true
		}
	},
	"chrome_url_overrides": {					// 修改点击相应动作时返回的页面链接,只支持bookmarks、history、newtab三个页面
		"bookmarks": "myPage.html",
		"history": "myPage.html",
		"newtab": "myPage.html"
	},
	"commands": {								// 键盘触发插件快捷键
		"_execute_browser_action": {
			"suggested_key": {
				"windows": "Ctrl+Shift+Y",
				"mac": "Command+Shift+Y",
				"chromeos": "Ctrl+Shift+U",
				"linux": "Ctrl+Shift+J"
			}
		 },
	},
	"content_capabilities": {												// 页面权限
		"matches": ["https://*.nyc.corp.google.com/*"],
		"permissions": ["unlimitedStorage", "notifications"] 
	},
	"content_scripts": [{													// 可以操作页面元素,不能使用chrome的api
		"matches": ["http://www.google.com/*"],
		"css": ["mystyles.css"],
		"js": ["jquery.js", "myscript.js"]
	}],
	"content_security_policy": "script-src 'self'; object-src 'self'",		// 安全策略,默认情况下禁止使用eval或者Function构造函数,以及内联js,禁止载入外部脚本
	"converted_from_user_script": true,										// 将用户脚本转化为content script,允许使用GM_* (greasemonkey)方法
	"copresence": ,
	"current_locale": ,
	"devtools_page": "devtools.html",										// 在开发中工具中的页面
	"event_rules": [{														// 事件监听规则及条件
		"event": "declarativeContent.onPageChanged",
		"actions": [{
			"type": "declarativeContent.ShowPageAction"
		}],
		"conditions": [{
			"type": "declarativeContent.PageStateMatcher",
			"css": ["video"]
		}]
	}],
	"externally_connectable": {												// 哪些外部扩展、应用或网页能连接此插件
		"ids": [
			"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
			"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
			"*"																// 允许所有可使用 "*"
		],
		"matches": ["*://*.example.com/*"],
		"accepts_tls_channel_id": false
	},
	"file_browser_handlers": [{												// 允许用户上传文件,只支持Chrome OS
		"id": "upload",
		"default_title": "Save to Gallery", 								// 按钮文字
		"file_filters": [
			"filesystem:*.jpg", 											// 匹配所有文件可用 "filesystem:*.*"
			"filesystem:*.jpeg",
			"filesystem:*.png"
		]
	}],
	"file_system_provider_capabilities": {									// 允许访问文件系统,只支持Chrome OS
		"configurable": true,
		"multiple_mounts": true,
		"source": "network"
	},
	"homepage_url": "http://path/to/homepage",								// 插件主页,显示在chrome扩展工具列表中
	"export": {																// 允许其他组件调用自己的模块
		"whitelist": [
			"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
			"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
		]
	},
	"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],					// 调用其他组件的模块,与其他组件的export属性共用
	"incognito": "spanning or split or not_allowed",						// 隐身模式
	"input_components": [													// 输入管理,键盘事件等
		{
			"name": "Test IME",
			"type": "ime",
			"id": "test",
			"description": "Test IME",										// A user visible description
			"language": "en-US",											// The primary language this IME is used for
			"layouts": ["us::eng"]											// The supported keyboard layouts for this IME
		}
	],
	"key": "publicKey",														// 自动生成,可不需要
	"minimum_chrome_version": "versionString",								// 要求支持的chrome的最低版本
	"nacl_modules": [{														// 使用native client 模块
		"path": "OpenOfficeViewer.nmf",
		"mime_type": "application/vnd.oasis.opendocument.spreadsheet"
	}],
	"oauth2": ,																// 谷歌账户相关信息
	"offline_enabled": true,												// 离线使用
	"omnibox": {															// 搜索关键词推荐
		"keyword": "aString"
	},
	"optional_permissions": ["tabs"],										// 运行时权限,非必须权限
	"options_page": "options.html",											// 设置页,可从扩展工具列表进入
	"options_ui": {															// 设置页
		"chrome_style": true,
		"page": "options.html"
	},
	"permissions": ["tabs"],												// 安装时提示的权限,基本权限
	"platforms": ,															// 可以将部分基于平台的功能文件放入_platform_specific目录然后列在此项中减少插件体积
	"plugins": [{ "path": "extension_plugin.dll" }],						// NPAPI插件
	"requirements": {														// 安装前置需求
		"3D": {
			"features": ["webgl"]
		}
	},
	"sandbox": [															// 放入沙盒中运行
		{
			"pages": [
				"page1.html",
				"directory/page2.html"
			],
			// content_security_policy is optional.
			"content_security_policy": "sandbox allow-scripts; script-src https://www.google.com"
		}
	],
	"short_name": "Short Name",												// 短名称,最长12个字母,如不设置则用name属性代替
	"signature": ,
	"spellcheck": ,															// 拼写检查
	"storage": {															// 描述了各种属性的type,json格式文件,能在storage.managed API中调用
		"managed_schema": "schema.json"
	},
	"system_indicator": ,													// 实验性API,只在开发版中实现,已弃用
	"tts_engine": {															// text to speech
		"voices": [
			{
				"voice_name": "Alice",
				"lang": "en-US",
				"gender": "female",
				"event_types": ["start", "marker", "end"]
			},
			{
				"voice_name": "Pat",
				"lang": "en-US",
				"event_types": ["end"]
			}
		]
	},														
	"update_url": "http://myhost.com/mytestextension/updates.xml",			// 插件更新地址
	"version_name": "aString",												// 版本名,和version字段的区别是没有格式要求,任意字符串
	"web_accessible_resources": ["images/*.png"]							// 指定本扩展在注入的目标页面上所需使用的资源的路径
}

大佬文章链接 https://blog.csdn.net/sysuzjz/article/details/51648163

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值