新手笔记，有建议，请告诉我
- 当前目录结构
- 项目文件夹中：
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