从 0 开始入门 Chrome Ext 安全（一） －－ 了解一个 Chrome Ext
来源：岁月联盟
时间：2020-01-29
}
https://developer.chrome.com/extensions/devtools
option – 选项
option代表着插件的设置页面，当选中图标之后右键选项可以进入这个页面。
{
"options_ui":
{
"page": "options.html",
"chrome_style": true
},
}
omnibox – 搜索建议
在chrome中，如果你在地址栏输入非url时，会将内容自动传到google搜索上。
omnibox就是提供了对于这个功能的魔改，我们可以通过设置关键字触发插件，然后就可以在插件的帮助下完成搜索了。
{
// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
"omnibox": { "keyword" : "go" },
}
这个功能通过chrome.omnibox这个api来定义。
notifications – 提醒
notifications代表右下角弹出的提示框
chrome.notifications.create(null, {
type: 'basic',
iconUrl: 'img/header.jpg',
title: 'test',
message: 'i found you!'
});
权限体系和api
在了解了各类型的插件的形式之后，还有一个比较重要的就是Chrome插件相关的权限体系和api。
Chrome发展到这个时代，其相关的权限体系划分已经算是非常细致了，具体的细节可以翻阅文档。
https://developer.chrome.com/extensions/declare_permissions
抛开Chrome插件的多种表现形式不谈，插件的功能主要集中在js的代码里，而js的部分主要可以划分为5种injected script、content-script、popup js、background js和devtools js.
· injected script 是直接插入到页面中的js，和普通的js一致，不能访问任何扩展API.
· content-script 只能访问extension、runtime等几个有限的API，也可以访问dom.
· popup js 可以访问大部分API，除了devtools，支持跨域访问
· background js 可以访问大部分API，除了devtools，支持跨域访问
· devtools js 只能访问devtools、extension、runtime等部分API，可以访问dom
同样的，针对这多种js，我们也需要特殊的方式进行调试
· injected script： 直接F12就可以调试
· content-script：在F12中console选择相应的域
· popup js: 在插件右键的列表中有审查弹出内容
· background js: 需要在插件管理页面点击背景页然后调试
通信方式
在前面介绍过各类js之后，我们提到一个重要的问题就是，在大部分的js中，都没有给与访问js的权限，包括其中比较关键的content script.
那么插件怎么和浏览器前台以及相互之间进行通信呢？
popup 和 background
popup和background两个域互相直接可以调用js并且访问页面的dom。
popup可以直接用chrome.extension.getBackgroundPage()获取background页面的对象，而background可以直接用chrome.extension.getViews({type:'popup'})获取popup页面的对象。
// background.jsfunction test(){
alert('test');}// popup.jsvar bg = chrome.extension.getBackgroundPage();bg.test(); // 访问bg的函数alert(bg.document.body.innerHTML); // 访问bg的DOM
popup/background 和 content js
popup/background 和 content js之间沟通的方式主要依赖chrome.tabs.sendMessage和chrome.runtime.onMessage.addListener这种有关事件监听的交流方式。
发送方使用chrome.tabs.sendMessage,接收方使用chrome.runtime.onMessage.addListener监听事件。
chrome.runtime.sendMessage({greeting: '发送方！'}, function(response) {
console.log('接受：' + response);
});
接收方
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
console.log(request, sender, sendResponse);
sendResponse('回复：' + JSON.stringify(request));
});
injected script 和 content-script
由于injected script就相当于页面内执行的js，所以它没权限访问chrome对象，所以他们直接的沟通方式主要是利用window.postMessage或者通过DOM事件来实现。
injected-script中：
window.postMessage({"test": 'test！'}, '*');
上一页 [1] [2] [3] 下一页
