Chrome插件开发入门 chrome插件开发 说白了就是前端开发,只需要你懂一点js、css、html 就可以马上动手做一个浏览器插件。
先看看效果图:
在Chrome平台的支持下, 我们的扩展可以平滑运行在任何 Chrome 兼容的浏览器中,以及任何操作系统中! 而扩展本身不用修订任何代码!
一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从XMLHttpRequest到JSON到HTML5全都有。 应用(扩展)可以与Web页面交互,或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用(扩展)还可以访问浏览器提供的内部功能,例如标签或书签等。
{
"name": "oldriver's First Extension历史上的今天",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.历史上的今天--oldriver",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
},
"permissions": [
"http://www.ipip5.com/today/api.php" //第三方数据api.注意这里chrome平台已经帮你做了跨域处理
]
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>oldriver's 历史上的今天</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<style>
body {
min-width:357px;
overflow-x:hidden;
}
</style>
</head>
<body>
<ul class="list-group" width="200px">
</ul>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="index.js"></script>
</body>
</html>
$.getJSON("http://www.ipip5.com/today/api.php?type=json",function(data){
console.log(data);
$(".list-group").append('<li class="list-group-item active">历史上的今天:'+data.today+'</li>')
for(var i=0;i<data.result.length;i++){
$(".list-group").append('<li class="list-group-item">'+data.result[i].year+'年:'+data.result[i].title+'</li>')
}
})
当本地开发不能跨域请求时,可以选择把工程放在本地服务器如tomcat,把模拟的json数据放进json文件里请求,而上传chrome时不必这么做,因为chrome已经帮你做了跨域请求的处理。 这个例子比较简单,读者可以尝试做个知乎日报的插件练手,相关接口分析见 : https://github.com/izzyleung/ZhihuDailyPurify/wiki/%E7%9F%A5%E4%B9%8E%E6%97%A5%E6%8A%A5-API-%E5%88%86%E6%9E%90
本教程源码下载: https://github.com/jkxqj/today