前端时间看到别人博客上面写的chrome扩展开发，自己也想动手试下，就顺便写了一个小例子（为公司的测试环境设置cookie），现在记录下来。方便下次开发的时候能快速回忆起来
目录结构
index.html -> 点击插件后的弹窗
图片 -> 发布插件和插件栏显示所用
manifest.json 配置文件
script 脚本文件
下面从manifest.json开始解释
{
"browser_action": {
"default_icon": "48.jpg",
"default_popup": "index.html"
},
"content_scripts": [ {
"js": [ "scripts/lib/jquery-1.7.2.min.js", "scripts/main.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"description": "Company test environment cookie settings(公司预发布环境cookie设置)",
"icons": {
"16": "16.jpg",
"48": "48.jpg",
"128":"128.jpg"
},
"manifest_version": 2,
"name": "预发布环境设置",
"permissions": ["webRequest","notifications", "cookies", "tabs", "http://*/*", "https://*/*","http://www.zaful.com/","<all_urls>" ],
"version": "1.1.0",
"background": { "scripts": ["scripts/lib/jquery-1.7.2.min.js", "scripts/background.js"] }
}
browser_action 插件栏的图标,指定弹出模板(注意，现在browser_action和page_action不能一起使用了)
content_scripts 指定和页面进行交互的脚本,并且可以调用chrome API和background_script进行交互
descriptions 插件描述
icons 发布时有用
manifest_versions 版本，现在都是使用2
name 插件名称
permissions 一些功能的权限(cookie，弹窗之类的)
background 弹窗里面的脚本
然后是index.html 弹窗模板
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>预发布环境设置</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<script type='text/javascript' src='scripts/lib/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='scripts/background.js'></script>
<script type='text/javascript' src='scripts/main.js'></script>
<style type=text/css>
.wrapper{width: 100px;}
</style>
<body>
<div class=wrapper id=top>
<div>
<input id="savehm" name="savehm" type="checkbox"> 预发布
</div>
</div>
</body></html>
这个很明显了，就不多做解释了
background.js 弹窗里面的脚本 主要是定义一些chrome通知的方法
function inYuFaBu() {
var notification = new Notification('预发布提示', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: "已经进入预发布环境",
});
}
function outYuFaBu() {
var notification = new Notification('预发布提示', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: "退出预发布环境",
});
}
这里主要是调用chrome自带的通知方法 Notification 需要在配置文件里面设置permissions
main.js 主要逻辑都在这个里面
var url = '';
var domain = '';
var $body = '';
function getHost(url)
{
var host = "null";
if(typeof url == "undefined"|| null == url) {
url = window.location.href;
$body = $('body');
}
var regex = /^\w+\:\/\/([^＼/]*).*/;
var match = url.match(regex);
if(typeof match != "undefined" && null != match) {
host = match[1];
domain = host.split('.');
domain.shift();
domain = '.' + domain.join('.');
}
return 'http://'+host;
}
function setCookie() {
chrome.cookies.set({
domain: domain,
expirationDate: 1505720700,
httpOnly: false,
name:"staging",
path: "/",
secure: false,
url: url,
value: "true"
},function(cookie){
chrome.extension.getBackgroundPage().inYuFaBu();
});
}
function removeCookie(url){
chrome.cookies.remove({
'url':url,
'name':'staging'
},function () {
chrome.extension.getBackgroundPage().outYuFaBu();
});
}
function initCookie(url) {
var str="";
chrome.cookies.get({"name": "staging","url":url },function(cookie){
if(cookie){
str=cookie.value;
}
if(""!=str){
$('#savehm').attr("checked",true);
chrome.extension.getBackgroundPage().inYuFaBu();
}
});
}
function init(){
chrome.tabs.getSelected(null, function(tab) {
if(tab){
url = getHost(tab.url);
initCookie(url);
}
});
$('#savehm').click(function() {
if($('#savehm').attr('checked')) {
setCookie();
}else{
removeCookie(url);
}
});
$('#savemm').click(function() {
if($('#savemm').attr('checked')){
$('#savehm').attr("checked",true);
}else{
$('#savehm').attr("checked",false);
}
});
}
document.addEventListener('DOMContentLoaded', function () {
init();
});
document.addeventListener 监听点击插件后，加载完成开始初始化 init()
init() 里面有一个chrome.tab的接口 大概就是监听chrome的标签页的一系列接口,在这个里面我们会拿当前页面的url并且匹配主域名,然后初始化cookie initCookie()
initCookie() 主要就是拿当前域名下面 看有没有一个叫staging的cookie 如果有,就通过chrome.extension的接口调用background.js 里面定义好的通知方法
setCookie() removeCookie() 就是设置cookie和删除cookie了 也都是调用了chrome自带的接口
下面说一下调试的tips
我们可以点击右键，然后审查弹出内容，就可以查看源码和调试了 （如果有某个功能自己不能实现，可以去chrome应用中心找到类似的功能的插件，然后打断点研究）
可以通过已安装插件的id，在本地chrome的插件里面查找，文件夹里面就是源码了
打包，上传
选中开发者模式 然后打包扩展程序 然后就会生成一个.crx文件 把这个文件拖到扩展程序这个页面就可以装上去了，另外一个.pem的文件是一个密匙文件,(下次重新打包如果有的话就需要选择，也可以直接删掉，就不用选择了）
发布的时候不能够发布crx文件，需要压缩成zip文件，然后按照上面的目录结构基本可以通过审核
发布之前需要交5美元的保护费-_- 可以办一个双币信用卡 然后地址填香港就可以了
