新手笔记,有建议,请告诉我
- 当前目录结构
- 项目文件夹中:
manifest.json #用于配置插件的权限和信息,以及对应文件的路径
option.html #用于选项的配置页面,就是右击右上角插件显示选项的页面
popup.html #用于画popup的页面,popup就是右上角点击插件后显示的页面
devtools.html #devtiool的导航页面,没什么作用,但是一定要有
devtool.html #用于画devtool的页面
js文件夹
css文件夹
img文件夹
fonts文件夹
- js文件夹中:
a.js #用于读取文档的js文件,权限也只能操作文档
background.js #用于运行初始化的js,可以设置右键菜单,可以跨域请求
dev.js #用于devtool页面配对的js文件
devtools.js #用于配置devtool的页面
pp.js #用于popup页面配对的js文件
- img文件夹中:
png.png #用于插件的图片,暂时发现必须是png格式
- 其他使用的css框架放入对应文件夹即可,当前使用bootstrap框架
- manifest.json
{
"name": "测试工具",
"manifest_version": 2,
"version": "0.0.1",
"description": "一切为了测试",
"icons":
{
"16": "img/png.png",
"48": "img/png.png",
"128": "img/png.png"
},
"browser_action": {
"default_icon": "img/png.png",
"default_title": "这是一个Chrome插件,一起为了测试",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [""],
"js": ["js/a.js"]
}
],
"background":
{
"scripts": ["js/background.js"]
},
"options_page": "option.html",
"options_ui":
{
"page": "option.html",
"chrome_style": true
},
"homepage_url": "https://www.baidu.com",
"devtools_page": "devtools.html",
"permissions":
[
"contextMenus",
"tabs",
"notifications",
"webRequest",
"webRequestBlocking",
"storage",
"http://*/*",
"https://*/*"
]
}
- 画页面
页面只是纯的html代码,如果使用onclick之类触发js的方法,这里的会报错,需要在js绑定操作
radio 的方式:获得:$('input[type=radio][name=addr]').change(function () {this.value}),赋值:$('input[type=radio][value=' + items.ele + ']')[0].checked = true
勾选框的方式:获得: $('#num1').change(function () {this.checked}) ,赋值:$('#num1')[0].checked = items.num
输入框的方式: 获得:$('#f1').change(function () {this.value }) ,赋值:$('#f1')[0].value = items.f
select的方式: 获得:$('#addr').change(function () {this.options[this.selectedIndex].value}) ,赋值:$("#addr").val(items.addr)
- 存储值
除了浏览器的localStorage等存储信息,还有插件特有的功能:
$('#addr').change(function () {
chrome.storage.sync.set({ addr: this.options[this.selectedIndex].value }, function () {
chrome.storage.sync.get({ addr: '310000' }, function (items) {
console.log(items.addr);
});
});
});
#此处存的值不能大于4K,不然会报错
- 通信和调用
background.js 通知 context(a.js) 使用sendmessage的通信:
#background.js 发送信息,使用:
function sendMessageToContentScript(message, callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
if (callback) callback(response);
});
});
}
# a.js中接受信息,使用:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{})
#其中当刷新组件代码后,还需要刷新测试页面,保证通信一致
在dev.js中调用background.js 中的方式:
chrome.extension.getBackgroundPage().xxxx方法;
在a.js,通知background.js:
#a.js中:
chrome.runtime.sendMessage({ cmd: 'c', value: v }, function(response) {
console.log('收到来自后台的回复:' + response);
});
#background.js中:
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
sendResponse(xxxx)
return true;
#这里的返回必须添加,不然总是报错
})
- 右键菜单设置
chrome.contextMenus.create({ "id": "main", "visible": true, "title": "xxx", contexts: ['editable'], onclick: shenfenzheng })
其中的contexts当为normal时,可以显示多级菜单,不然只能显示一级
运行方式
1,谷歌浏览器或者谷歌内核的浏览器选择扩展程序、或者应用中心等管理插件的地方
2,打开开发者模式
3,加载已解压的扩展程序,指定到项目目录,即可
其他方式,打包扩展程序,指定到项目目录,打包,生成pem文件和crx文件。可以把crx上传到谷歌的应用商店,不过需要5美元;或者把crx格式改成zip格式,给他人后,拖拽进入开发者模式的插件管理页面。样例地址:
https://gitee.com/tuboyou/ChromeExtraTool4Test