chrome扩展程序制作(一)—最小化应用

chrome浏览器

chrome浏览器之所以为神器,一是因为其性能和体验,二是功能丰富的各种插件。

一个没有安装插件的chrome只挖掘出其40%的潜力,选择好用且适合自己的插件,打造属于自己的独一无二的个性化浏览器才是真正的使用者。

市场上除了chrome浏览器,就是其他浏览器。浏览器是每个人上网冲浪的必备之物,截至到现在,浏览器依旧是网络的霸主,占据着不可替代的核心地位,至少还没有一个新兴的应用可以取代浏览器。

随着AR,VR,AI等一系列的技术的发展,浏览器的内容也逐渐延伸,越来越完善。

前端程序的调试也离不开chrome,当写完网页,也可以试试写一写App,GUI,H5,以及小程序,最后,使用了chrome的插件,何不自己写一个,不需要多么复杂的功能,先来一个hello world即可。

➢ 最小化应用

首先建立一个项目文件夹,用来存放插件的代码,名字随意

对于chrome插件来说,最重要的就是manifest.json文件,文字不可改,里面的配置决定了插件的API,其他的文件就等是前端的文件,html,css,js,并没有什么区别,平时怎么写,插件就照常写。

下面正式开始

首先,新建一个文件,命名为manifest.json,然后按需写上代码,如下文所示

{
  // 这个地方是固定的
  "manifest_version": 2,
// 插件显示的名称
  "name": "app",
// 对插件的详细描述
  "description": "fisrt demo",
// 版本描述
  "version": "1.0",
// 插件的默认设置
  "browser_action": {
    // 插件的图标
    "default_icon": "img/icon_128.png",
    // 插件的标题
    "default_title": "app",
    // 单击图标时,插件执行的页面
    "default_popup": "index.html"
  },
  // 后台页面设置
  "background": {
    // 后台页面默认脚本(主要是浏览器的事件)
    "scripts": ["js/index.js"],
    // 后台可持续性设置(关于性能)
    "persistent": false
  }
}

然后,新建index.html文件放在根目录下,再新建css,js,img文件夹,把对应的资源放在对应的文件夹下,(注意:除了manifest.json文件,其他的命名和位置并没有强制要求)

图片尺寸为128*128,png格式

index.html内容如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="main">Hello World</div>
</body>

<script src="js/jquery.min.js"></script>
 <script src="js/index.js"></script>
</html>

css代码如下

body{
    height:400px;
    width:600px;
    font-size:20px;
    background: white;
}
body:hover{
    color:blue;
}

js代码如下

$(document).ready(function(){
    console.log(1)
})