从 0 开始入门 Chrome Ext 安全 -- 了解一个 Chrome Ext
Posted Seebug漏洞平台
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从 0 开始入门 Chrome Ext 安全 -- 了解一个 Chrome Ext相关的知识,希望对你有一定的参考价值。
时间: 2019年11月21日
1.获取一个插件的代码
2.manifest.json
browser_action
这个字段主要负责扩展图标点击后的弹出内容,一般为popup.html
content_scripts
matches 代表scripts插入的时机,默认为document_idle,代表页面空闲时
js 代表插入的scripts文件路径
run_at 定义了哪些页面需要插入scripts
permissions
这个字段定义了插件的权限,其中包括从浏览器tab、历史纪录、cookie、页面数据等多个维度的权限定义
content_security_policy
这个字段定义了插件页面的CSP
但这个字段不影响content_scripts里的脚本
background
这个字段定义插件的后台页面,这个页面在默认设置下是在后台持续运行的,只随浏览器的开启和关闭
persistent 定义了后台页面对应的路径
page 定义了后台的html页面
scripts 当值为false时,background的页面不会在后台一直运行
3.Chrome Ext的主要展现方式
browser_action
"browser_action": {
"default_icon": "img/header.jpg",
"default_title": "LoRexxar Tools",
"default_popup": "popup.html"
},
{"permissions": ["contextMenus"]}
chrome.contextMenus.create({
title: "测试右键菜单",
onclick: function(){alert('您点击了右键菜单!');}
});
override - 覆盖页面
"chrome_url_overrides":
{
"newtab": "newtab.html",
"history": "history.html",
"bookmarks": "bookmarks.html"
}
devtools - 开发者工具
chrome.devtools.panels:面板相关;
chrome.devtools.inspectedWindow:获取被审查窗口的有关信息;
chrome.devtools.network:获取有关网络请求的信息;
{
// 只能指向一个HTML文件,不能是JS文件
"devtools_page": "devtools.html"
}
option - 选项
{
"options_ui":
{
"page": "options.html",
"chrome_style": true
},
}
omnibox - 搜索建议
{
// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
"omnibox": { "keyword" : "go" },
}
chrome.omnibox
这个api来定义。
notifications - 提醒
chrome.notifications.create(null, {
type: 'basic',
iconUrl: 'img/header.jpg',
title: 'test',
message: 'i found you!'
});
4.权限体系和api
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
injected script:直接F12就可以调试
content-script:在F12中console选择相应的域
popup js: 在插件右键的列表中有审查弹出内容
background js: 需要在插件管理页面点击背景页然后调试
5.通信方式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
popup 和 background
chrome.extension.getBackgroundPage()
获取background页面的对象,而background可以直接用
chrome.extension.getViews({type:'popup'})
获取popup页面的对象。
// background.js
function test()
{
alert('test');
}
// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 访问bg的函数
alert(bg.document.body.innerHTML); // 访问bg的DOM
popupackground 和 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
window.postMessage
或者通过DOM事件来实现。
window.postMessage({"test": 'test!'}, '*');
window.addEventListener("message", function(e)
{
console.log(e.data);
}, false);
popupackground 动态注入js
chrome.tabs.executeScript
来执行脚本,从而实现对页面DOM的操作。
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
// 动态执行JS代码
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 动态执行JS文件
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});
chrome.storage
6.总 结
7.参考链接
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
https://developer.chrome.com/extensions/content_scripts
往 期 热 门
(点击图片跳转)
觉得不错点个“在看”哦
以上是关于从 0 开始入门 Chrome Ext 安全 -- 了解一个 Chrome Ext的主要内容,如果未能解决你的问题,请参考以下文章