5.1. browserAction(浏览器右上角)
通过配置browser_action可以在浏览器的右上角增加一个图标，一个browser_action可以拥有一个图标，一个tooltip，一个badge和一个popup。
示例配置如下：
"browser_action":
{
"default_icon": "img/icon.png",
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
}
5.2. pageAction(地址栏右侧)
所谓pageAction，指的是只有当某些特定页面打开才显示的图标，它和browserAction最大的区别是一个始终都显示，一个只在特定情况才显示。
需要特别说明的是早些版本的Chrome是将pageAction放在地址栏的最右边，左键单击弹出popup，右键单击则弹出相关默认的选项菜单：
https://images2015.cnblogs.com/blog/352797/201707/352797-20170711101549665-519093069.png
改了这一策略，pageAction和普通的browserAction一样也是放在浏览器右上角，只不过没有点亮时是灰色的，点亮了才是彩色的，灰色时无论左键还是右键单击都是弹出选项：
具体是从哪一版本开始改的没去仔细考究，反正知道v50.0的时候还是前者，v58.0的时候已改为后者。
调整之后的pageAction我们可以简单地把它看成是可以置灰的browserAction。
- chrome.pageAction.show(tabId) 显示图标；
- chrome.pageAction.hide(tabId) 隐藏图标；
示例(只有打开百度才显示图标)：
// manifest.json
{
"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},
"permissions": ["declarativeContent"]
}
// background.js
chrome.runtime.onInstalled.addListener(function(){
chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
// 只有打开百度才显示pageAction
new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}
]);
});
});
效果图：
5.3. 右键菜单
通过开发Chrome插件可以自定义浏览器的右键菜单，主要是通过chrome.contextMenusAPI实现，右键菜单可以出现在不同的上下文，比如普通页面、选中的文字、图片、链接，等等，如果有同一个插件里面定义了多个菜单，Chrome会自动组合放到以插件名字命名的二级菜单里，如下：
5.3.1. 最简单的右键菜单示例
// manifest.json
{"permissions": ["contextMenus"]}
// background.js
chrome.contextMenus.create({
title: "测试右键菜单",
onclick: function(){alert('您点击了右键菜单！');}
});
效果
5.3.2. 添加右键百度搜索
// manifest.json
{// manifest.json
{"permissions": ["contextMenus"， "tabs"]}
// background.js
chrome.contextMenus.create({
title: '使用度娘搜索：%s', // %s表示选中的文字
contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
onclick: function(params)
{
// 注意不能使用location.href，因为location是属于background的window对象
chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
}
});
5.3.3. 语法说明
这里只是简单列举一些常用的，完整API参见：https://developer.chrome.com/extensions/contextMenus
chrome.contextMenus.create({
type: 'normal'， // 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normal
title: '菜单的名字', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本
contexts: ['page'], // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
onclick: function(){}, // 单击时触发的方法
parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单
documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
});
// 删除某一个菜单项
chrome.contextMenus.remove(menuItemId)；
// 删除所有自定义右键菜单
chrome.contextMenus.removeAll();
// 更新某一个菜单项
chrome.contextMenus.update(menuItemId, updateProperties);
5.4. override(覆盖特定页面)
使用override页可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。
扩展可以替代如下页面：
-
历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history
-
新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome://newtab
-
书签：浏览器的书签，或者直接输入 chrome://bookmarks
注意：
-
一个扩展只能替代一个页面；
-
不能替代隐身窗口的新标签页；
-
网页必须设置title，否则用户可能会看到网页的URL，造成困扰；
下面的截图是默认的新标签页和被扩展替换掉的新标签页。
代码（注意，一个插件只能替代一个默认页，以下仅为演示）：
"chrome_url_overrides":
{
"newtab": "newtab.html",
"history": "history.html",
"bookmarks": "bookmarks.html"
}
5.5. devtools(开发者工具)
5.5.1. 预热
使用过vue的应该见过这种类型的插件：
网友评论