浏览器扩展开发

链接

• Chrome 扩展程序构建文档 (opens new window)

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_CN，en代表英语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，则为必填。