demo.gif
这几天ios离职，接手了他的Google扩展，令人措手不及的是当天就来了一个新的扩展开发，只有硬着头皮上了。
参考文档：Google文档
先看一下项目的目录结构
目录结构
images ---------------- 放置一些图标的文件夹
|icon.png
|xxx.png
lib ------------------- 放置一些引用js
|jquery-2.0.0.min.js
|xxx.js
background.js --------- 用来存储一些数据
content_script.js ----- 页面刷新的时候会执行此js
popup.html ------------ 弹窗页面
popup.css ------------- 弹窗引入的css
popup.js -------------- 弹窗引入的js 弹窗打开的时候会执行
manifest.json --------- 清单文件
里面的manifest.json文件常用说明一下：
{
// 必须属性
// 清单文件的格式版本，chrome18之后，都为2
"manifest_version":2,
// 扩展的名字
"name": "My Extension",
// 扩展的版本
"version": "versionString",
// 推荐属性
// 扩展的描述
"description": "A plain text description",
// 扩展的图标 16*16 48*48 128*128
"icons": { ... },
// 默认local，用来支持国际化
"default_locale": "en",
// 后台运行的脚本，我一般用来保存数据，可以是js，可以是html
"background": {
"scripts": ["background.js"]
},
// 扩展点击是的动作
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
// 标题
"default_title": "My Extension",
// 弹窗
"default_popup": "popup.html"
},
// 权限申请
// "tabs" ，访问浏览器选项卡
// "history" ，读取修改用户的浏览记录
// "cookies" ，读取修改Cookie
// "events" ，监控事件，让你感兴趣的事发生是可以得到通知
// "downloads" ，监视，操纵，搜索下载的文件
// "http://*/*" ，访问的权限
// "activeTab"，获取当前活动选项卡
// .......
"permissions" : [...],
// 当前页面执行的脚本
"content_scripts":[{
// 匹配那个页面会执行
"matches":[
"https://*/*",
"*://*/*",
"https://*.google.com/*"
],
// 执行的js
"js":["lib/jquery-2.0.0.min.js", "content_script.js"],
// 什么时候执行
"run_at": "document_end"
}],
//更新的url
"update_url": "http://path/to/updateInfo.xml"
}
以上，就是大致的配置说明，详细的可以去看官网。下一步，就来写一个小Demo。
Demo目录结构
目录结构.png
代码说明
这个扩展什么作用都没有,代码也比较简单，就只拿来作为一些方法的说明，里面的一些地方已经打了注释。一大段代码来袭：
// manifest.json
{
"manifest_version": 2,
"name": "我的简书",
"version": "1.0.0",
"background": { "scripts": ["lib/jquery-2.0.0.min.js", "background.js"]},
"description": "我的简书",
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": {
"default_icon": "images/icon.png",
"default_title": "我的简书",
"default_popup": "popup.html"
},
"permissions" : [
"tabs",
"http://*.jianshu.com/*",
"https://*.jianshu.com/*"
],
"content_scripts":[{
"matches":[
"http://*.jianshu.com/*",
"https://*.jianshu.com/*"
],
"js":["lib/jquery-2.0.0.min.js", "content_script.js"],
"run_at": "document_end"
}]
}
//popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="lib/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popup.css" media="screen" />
</head>
<body class="body_content">
<h3>我的简书</h3>
<button id="toggle_pop">关闭浮窗</button>
</body>
</html>
//popup.css
.body_content{
width: 200px;
}
// popup.js
// 打开插件的监听
document.addEventListener('DOMContentLoaded', function () {
init();
});
// popup 初始化
function init() {
var pop_show = chrome.extension.getBackgroundPage().pop_show;
buttonTextChange(pop_show);
}
$(function () {
// 按钮的点击事件
$('#toggle_pop').click(function (e) {
// 向扩展发送消息 background 第三个参数是成功的回调 看实际情况要不要
chrome.extension.sendMessage({ type: "toggle_pop" }, function (response) {
log(response);
buttonTextChange(response.pop_show);
// 查询当前页面的tab信息
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
// 向content_script 发送消息 第三个参数是成功的回调 看实际情况要不要
chrome.tabs.sendMessage(tabs[0].id, { message: "togle", show_pop: response.pop_show }, function (response) {
});
});
});
});
});
// 日志
function log(msg) {
console.log(msg);
}
// 改变按钮的文字
function buttonTextChange(pop_show) {
if (pop_show) {
$('#toggle_pop').text('关闭浮窗');
} else {
$('#toggle_pop').text('打开浮窗');
}
}
// content_script.js
// 初始化
function init() {
getArticles();
}
// 监听popup来的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendRequest) {
log(request);
var message = request.message;
if (message === "togle") {
show_pop(request.show_pop);
}
});
// 日志
function log(msg) {
console.log(msg);
}
// 插入html
function intoHtml(html) {
$('body').append(html);
$('.box').css({
"position": "absolute",
"top": "150px",
"left": "100px",
"width": "320px",
"height": "380px",
"background": "#fff",
"cursor": "move",
"border-radius":"10px",
"box-shadow": "2px 2px 2px #888888"
});
$('.ul-class').css({
"margin-left": "20px",
});
$(".box").mousedown(function (e) {
iDiffX = e.pageX - $(this).offset().left;
iDiffY = e.pageY - $(this).offset().top;
$(document).mousemove(function (e) {
$(".box").css({ "left": (e.pageX - iDiffX), "top": (e.pageY - iDiffY) });
});
});
$(".box").mouseup(function () {
$(document).unbind("mousemove");
});
}
// 移除html
function deteleHtml() {
$('.box').remove();
}
// 是否显示浮窗
function show_pop(pop_show) {
if (pop_show) {
var html ='<div class="box" id="Drigging">我是一个小插件 小呀嘛小插件...<ul class="ul-class">'
chrome.runtime.sendMessage({ type: 'articles'}, function (response) {
var titles = response.titles;
log(titles);
$.each(titles,function(index,item){
html+= '<li>'+item+'</li>';
});
html+='</ul></div>';
intoHtml(html);
});
} else {
deteleHtml();
}
}
// 得到页面的文章
function getArticles() {
var titles = $('.note-list li .title');
var titles_tem = [];
$.each(titles, function (index, item) {
var title = $(item).text();
log(title);
titles_tem.push(title);
});
chrome.runtime.sendMessage({ type: 'sava_article', titles: titles_tem }, function (response) {
show_pop(response.pop_show);
});
}
init();
// background.js
// 浮窗是否显示
var pop_show = false;
// 标题
var titles = [];
// 监听从popup 和 content_script 发来的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendRequest) {
if (request.type == 'toggle_pop') {
pop_show = !pop_show;
sendRequest({ pop_show: pop_show });
}
else if (request.type == 'show_pop') {
sendRequest({ pop_show: pop_show });
}
else if (request.type == 'sava_article') {
titles = request.titles;
sendRequest({ pop_show: pop_show });
}
else if (request.type == 'articles') {
sendRequest({ titles: titles });
}
})
源代码
github:chrome-jianshu
写到这里就水完了，哈哈哈哈，如有错误，欢迎斧正。
