席新亮'; ?>

首页 / 前端经验分享

学了这么久前端,你会开发Chrome扩展吗?

By 席新亮 •  2016-12-05 14:33:33 •  554次点击

引言


最近公司要做一个抓取微博数据的工具,帮助一些公司抓取目标标签用户的用户信息,最后产品经理确定将“Chrome扩展”作为产品形态,对于一些没有插件开发经验的程序员,似乎开发一个这样的扩展(插件)很难、很牛的样子。其实,没有你想象的那么难,和正常Web开发差不多,只是换了一个陌生的开发环境而已。下面,咱们一起做一个简单的“Chrome扩展”,用以入门。

运行环境

l Chrome浏览器

l 360浏览器极速版本

l 以及国内的其他以Chrome类似内核为版本的浏览器

基础知识

“Chrome扩展”本质上是一个有JavaScript文件、CSS文件、HTML文件、图片等相关文件组织在一起的文件包,一般情况下载的“Chrome扩展”都是以“.crx”结尾的文件。

 

安装后会在浏览器的右上角显示一个icon,如下图:

开始创建

一、创建一个文件夹“HelloWorld”

二、文件夹内创建一个文件“manifest.json”,“manifest.json”的代码如下:

{
  "manifest_version": 2,
  "name": "HelloWorld",
  "version": "1.0",
  "description": "我的第一个入门Chrome扩展.",
  "icons": {
    "16": "images/icon.png",
    "48": "images/icon.png",
    "128": "images/icon.png"
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon.png"
    },
    "default_title": "HelloWorld",
    "default_popup": "popup.html"
  }
}

说明:

l “manifest_version”字段,指定清单文件格式的版本,在Chrome18之后,应该都是2,所以这个值直接设定为2就OK了

l “name”字段,表示扩展的名字

l “version”字段,表示扩展的版本

l “description”字段,表示扩展的描述

l “icons” 字段,表示插件图标,需准备16*16(扩展信息栏)、48*48(扩展管理页面)、128*128(用在安装过程中)的三个图标文件,建议为PNG格式,因为PNG对透明的支持最好

l “browser_action”字段,初学者可以理解为右上角弹框的相关程序配置,本示例中主要介绍了“default_icon”字段,表示默认的图标。

l “default_popup”字段,表示右上角弹框气泡面板

三、再见夹内创建“popup.html”文件,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
HelloWorld
</body>
</html>

四,文件都创建完毕之后,进入“Chrome浏览器”的扩展应用加载页面,勾选“开发者模式”如下图所示:

五,点击“加载已解压的扩展程序”,选择刚才创建的文件夹,加载完毕之后,就会出现图中的HelloWord应用。

六,点击右上角,显示“HelloWorld”气泡,如下图:

七,如果您想打包扩展,给其他朋友使用,可以点击扩展页面中的“打包扩展程序”

八,加载开发的文件夹,如下图:

九,生成两个文件“HelloWord.crx”扩展程序文件与“HelloWord.pem”密钥文件,如下图

最后,你就可以分享给朋友看看你的战果了。

 

更多信息,请参考官网(需要VPN):https://developer.chrome.com/extensions


一个人静静坐在电脑面前写代码的感觉,那是什么感觉?那是武林高手闭关修炼的感觉。




Chrome扩展  Chrome插件  前端社区  前端技术  前端教程 

1 回复 | 直到2017-03-23 22:17

回复

登录提问 or 还没有账号?去注册

前端范

现在注册 已注册请 登录
前端经验分享

只有经历实战才叫高手,欢迎高手们分享宝贵经验

此板块 新建话题 上一贴 下一贴

官方公众号


100000前端码农使用“js攻城师”,免费扫码加入

微信号:js_gcs

干货技术(js、html5、Node.js等)、实战经验、原创文章应有尽有!