# 浏览器扩展开发

# manifest.json(基本信息表单)

首先,一个浏览器扩展必须要有一个manifest.json文件,这个文件用来存放扩展最基本的信息,例如名称,描述,图标,版本等

表单介绍

{
	// 清单文件的版本(必填)
	"manifest_version": 3,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",
	// 插件描述
	"description": "简单的Chrome扩展demo",
	// 图标(全部用一个尺寸的也没问题)
	"icons":
	{
		"16": "img/icon.png",//16×16
		"48": "img/icon.png",//48×48
		"128": "img/icon.png"//128×128
	},
	// 常驻在后台的内容(可以是一个js,也可以是一个页面,两者二选一)
	"background":
	{
		"page": "background.html",
		"scripts": ["js/background.js"]
	},
	// 浏览器右上角图标设置,browser_action、page_action、app必须三选一
	"browser_action": 
	{
		"default_icon": "img/icon.png",
		"default_title": "这是一个示例Chrome插件",	
		"default_popup": "popup.html"
	},

	// 直接注入网页的内容
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			"matches": ["<all_urls>"],//表示匹配所有地址
			// 注入js,多个js间用","隔开
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// 注入CSS(注意,这会影响到全局样式)
			"css": ["css/custom.css"],
			// 代码注入的时间
			"run_at": "document_start"
			//可选值: "document_start", "document_end", or "document_idle"(页面空闲时),默认为document_idle
		},
	],
	// 权限申请(具体参考文章最后的权限)
	"permissions":
	["activeTab","storage", "unlimitedStorage"],
	// 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
	"web_accessible_resources": ["js/inject.js"],
	// 插件的网站(可选)
	"homepage_url": "https://www.baidu.com",
	// 覆盖浏览器默认页面 (可选)
	"chrome_url_overrides":
	{
		"newtab": "newtab.html"// 覆盖浏览器默认的新标签页
	},

	// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
	"omnibox": { "keyword" : "go" },
	// 默认语言
	"default_locale": "zh_CN",
	// devtools页中的页面,指向一个HTML文件
	"devtools_page": "devtools.html"
}

注意:

  • json文件中不允许存在注释,这里的注释是为了开发者方便查看而写,实际使用时应该删除,为了方便,可以直接使用以下表单
{
  "manifest_version": 3,
  "name": "__MSG_name__",
  "version": "0.0.1",
  "description": "__MSG_extension__",
  "default_locale": "zh_CN",
  "icons": {
    "16": "icon/logo_16.png",
    "32": "icon/logo_32.png",
    "48": "icon/logo_48.png",
    "128": "icon/logo_128.png"
  },

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": 
	[
		{
			"matches": ["<all_urls>"],
			"js": ["insert/content-script.js"],
			"css": ["insert/PageStyles.css"],
			"run_at": "document_start"
		}
	],

  "permissions": ["activeTab", "tabs", "storage","unlimitedStorage"],

  "action": {
    "default_title": "__MSG_add_to_home__",
    "default_popup": "popup/popup.html",
    "default_icon": {
      "32": "icon/logo_32.png"
    }
  }
}
  • json文件中,在{ }内排在最后的值不能加,其他都要加, 例如:
{
  "name": { "message": "Aidea起始页" },
	"pluginDesc": {"message": "一个简单的Chrome插件demo"},
	"helloWorld": {"message": "你好啊,世界!"} //这里没有","
}

如果{ }中只有一个值时也不加”,

# _locales

_locales是一个存放针对不同语言显示信息的文件夹这个文件夹中至少有一个文件夹,这个文件夹的名称可以是en或者zh_CNen代表英语zh代表中文,如果像zh_CN表示中文(简体)“_”后面的字母表示这代表地区,en_US代表英语(美国),每个语言文件夹中都有一个叫messages.json配置文件

示例:

{
  "name": { "message": "Aidea起始页" },//扩展名称
  "extension": { "message": "一个可定制化的高效搜索工具" },//对扩展的描述
  "add_to_home": { "message": "Aidea起始页" } //在添加时弹窗中显示的名称
}

在manifest.json中配置:

{
  "name": "__MSG_name__",
	"description": "__MSG_extension__",
	// 默认语言
	"default_locale": "zh_CN",
}
//在添加时弹窗中显示的名称
"action": {
    "default_title": "__MSG_add_to_home__",
  }

# contextMenus(右键菜单栏选项)

首先要在manifest.json表单里配置好权限

{"permissions": ["contextMenus""tabs"]}

示例:

chrome.contextMenus.create({
  title: "右键快捷菜单", //菜单的名称
  id: '1',//一级菜单的id
  contexts: ['selection'], // page表示页面右键就会有这个菜单,如果想要当选中文字时才会出现此右键菜单,用:selection
});

chrome.contextMenus.create({
  title: '子菜单1', //菜单的名称
  id: '11',//二级菜单的id
  parentId: '1',//表示父菜单是“右键快捷菜单”
  contexts: ['selection'],
});
chrome.contextMenus.create({
  title: '选项1',
  parentId: '11',//11就是上面定义的二级菜单“子菜单1”的id
  id: 'tts',
  contexts: ['selection'],
});

chrome.contextMenus.create({
  title: '子菜单2', //菜单的名称
  id: 'a',
  parentId: '1',//表示父菜单是“右键快捷菜单”
  contexts: ['selection'],
});
chrome.contextMenus.create({
  title: '选项2',
  id: 'b',
  parentId: '12',
  contexts: ['selection'],
});
chrome.contextMenus.create({
  title: '选项3',
  parentId: '12',
  id: 'c',
   contexts: ['selection'],
});

点击执行事件:

chrome.contextMenus.onClicked.addListener(function (info) {
  if (info.menuItemId == "id") {

  }
});

# 扩展文件存储位置

Edge:

C:\Users\用户名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions

Chrome:

C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions

Mac中chrome插件默认安装目录位置:

~/Library/Application Support/Google/Chrome/Default/Extensions

Ubuntu中chrome插件默认安装目录位置:

~/.config/google-chrome/Default/Extensions

# 权限

权限 描述
activeTab 请求根据activeTab规范授予扩展名权限。
alarms 扩展程序访问chrome.alarms API。
background 具有后台权限,可以在后台运行,直到退出chrome;通常,“背景”权限与背景页面,事件页面或背景窗口一起使用。
bookmarks 扩展程序访问chrome.bookmarks API的权限。
browsingData 扩展程序可以访问chrome.browsingData API。
certificateProvider 扩展程序授予chrome.certificateProvider API的访问权限。
clipboardRead 如果扩展程序或应用程序使用,则为必填document.execCommand(‘paste’)。
clipboardWrite 表示扩展程序或应用程序使用document.execCommand(‘copy’)或document.execCommand(‘cut’)。
contentSettings 扩展程序访问chrome.contentSettings API。
contextMenus 扩展程序访问chrome.contextMenus API。
cookies 扩展程序访问chrome.cookies API。
debugger 扩展程序访问chrome.debugger API。
declarativeContent 扩展程序访问chrome.declarativeContent API的权限。
declarativeNetRequest 扩展程序访问chrome.declarativeNetRequest API的权限。
declarativeNetRequestFeedback 授予扩展程序对chrome.declarativeNetRequest API中的事件和方法的访问权限。
declarativeWebRequest 扩展程序对chrome.declarativeWebRequest API的访问权限。
desktopCapture 扩展程序可以访问chrome.desktopCapture API。
displaySource 扩展程序授予chrome.displaySource API的访问权限。
dns 扩展程序访问chrome.dns API。
documentScan 扩展程序访问chrome.documentScan API的权限。
downloads 扩展程序访问chrome.downloads API。
enterprise.deviceAttributes 扩展程序访问chrome.enterprise.deviceAttributes API。
enterprise.hardwarePlatform 扩展程序访问chrome.enterprise.hardwarePlatform API。
enterprise.networkingAttributes 扩展程序访问chrome.enterprise.networkingAttributes API。
enterprise.platformKeys 扩展程序访问chrome.enterprise.platformKeys API。
experimental 扩展程序或应用程序使用任何chrome.experimental.* API,则为必填项。
fileBrowserHandler 扩展程序授予chrome.fileBrowserHandler API的访问权限。
fileSystemProvider 扩展程序访问chrome.fileSystemProvider API的权限。
fontSettings 扩展程序访问chrome.fontSettings API。
gcm 扩展程序访问chrome.gcm API。
geolocation 扩展程序或应用程序使用建议的HTML5地理位置API,而无需提示用户进行许可。
history 扩展程序访问chrome.history API。
identity 扩展程序访问chrome.identity API。
idle 扩展程序可以访问chrome.idle API。
idltest 扩展程序可以访问chrome.idltest API。
login 扩展程序可以访问chrome.login API。
loginScreenStorage 扩展程序访问chrome.loginScreenStorage API的权限。
loginState 扩展程序对chrome.loginState API的访问权限。
management 扩展程序访问chrome.management API。
nativeMessaging 扩展程序可以访问本机消息传递API。
notifications 扩展程序访问chrome.notifications API。
pageCapture 扩展程序可以访问chrome.pageCapture API。
platformKeys 扩展程序可以访问chrome.platformKeys API。
power 扩展程序访问chrome.power API。
printerProvider 扩展程序访问chrome.printerProvider API的权限。
printing 扩展程序访问chrome.printing API。
printingMetrics 扩展程序可以访问chrome.printingMetrics API。
privacy 扩展程序访问chrome.privacy API。
processes 扩展程序可以访问chrome.processes API。
proxy 扩展程序可以访问chrome.proxy API。
scripting 扩展程序可以访问chrome.scripting API。
search 扩展程序可以访问chrome.search API。
sessions 扩展程序访问chrome.sessions API。
signedInDevices 扩展程序可以访问chrome.signedInDevices API。
storage 扩展程序可以访问chrome.storage API。
system.cpu 扩展程序访问chrome.system.cpu API。
system.display 扩展程序访问chrome.system.display API。
system.memory 扩展程序访问chrome.system.memory API。
system.storage 扩展程序访问chrome.system.storage API。
tabCapture 扩展程序访问chrome.tabCapture API。
tabGroups 扩展程序访问chrome.tabGroups API的权限。
tabs 扩展程序可以访问Tab包括chrome.tabs和chrome.windows在内的多个API使用的对象的特权字段。在许多情况下,您的扩展程序无需声明"tabs"使用这些API的权限。
topSites 扩展程序访问chrome.topSites API。
tts 扩展程序可以访问chrome.tts API。
ttsEngine 扩展程序访问chrome.ttsEngine API的权限。
unlimitedStorage 提供无限的配额来存储HTML5客户端数据,例如数据库和本地存储文件。没有此许可,扩展程序或应用程序仅限于5 MB本地存储。
vpnProvider 扩展程序访问chrome.vpnProvider API的权限。
wallpaper 扩展程序访问chrome.wallpaper API。
webNavigation 扩展程序访问chrome.webNavigation API的权限。
webRequest 扩展程序可以访问chrome.webRequest API
webRequestBlocking 扩展程序以阻止方式使用chrome.webRequest API,则为必填。