10分钟教你开发自己的Chrome浏览器插件

JKXQJ

发布于 2018-04-16 10:59:09

1.6K0

发布于 2018-04-16 10:59:09

文章被收录于专栏：老司机的技术博客老司机的技术博客

Chrome插件开发入门 chrome插件开发说白了就是前端开发，只需要你懂一点js、css、html 就可以马上动手做一个浏览器插件。

先看看效果图：

在Chrome平台的支持下, 我们的扩展可以平滑运行在任何 Chrome 兼容的浏览器中,以及任何操作系统中! 而扩展本身不用修订任何代码!

基本概念

一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。应用（扩展）本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。应用（扩展）可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用（扩展）还可以访问浏览器提供的内部功能，例如标签或书签等。

开发谷歌浏览器插件：历史上的今天

创建工作目录today

在工作目录内新建文件manifest.json

{
  "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平台已经帮你做了跨域处理
  ]
}

新建index.html ，并引入所需js和css

<!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>

新建 index.js

$.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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2016-07-27，如有侵权请联系 cloudcommunity@tencent.com 删除

json