你也可以开发自己浏览器插件

基本知识

在具体的开发之前，我们先来科普一些基础知识。现阶段的chrome的应用商店中，将插件（这里说的插件指代chrome应用的所有分类，下文亦同）分为如下几种，包括应用、游戏、扩展程序、主题背景。而且插件的种类多种多样，保罗万象，基本上都能找到你想要的功能的插件。

文件结构

在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。

其中，

• manifest.js  是整个插件的功能及文件配置清单，非常重要。

• static  目录是放置整个插件的静态资源文件的，包括css、js、图片等等资源

• template  目录是放置整个插件的功能页面模板的。

• _locales目录是放置整个插件的国际化语言脚本的。

一般来说，清单文件manifest.json文件是必须的，且必须放在插件开发目录的根目录上。其他的目录都可以自定义。

了解一下manifest.json文件

 

 

实现一个简单的插件

 

<1>创建文件

 

<2>manifest.json

{    "name": "临时任务",   

     "version": "0.9.0",   

     "manifest_version": 2,   

     "description": "这是描述",   

      "browser_action": {       

          "default_icon": "icon.png",       

          "default_title": "这是标题",       

          "default_popup": "popup.html"   

       }

}

<3>popup.html

<div>   

      <button id="addBtn">input</button>   

      <input id="input-id" type="text" placeholder="new Task"/>   

      <div id="dataList">    </div>

</div>

<script type="text/javascript" src="./main.js" ></script>

<style>   

.item-class{        margin:5px 0;        border-bottom:1px solid #999;    }   

#addBtn{        margin-bottom: 10px;    }   

</style>

<4>main.js

function init() {   

       // 给添加按钮加事件   

      document.getElementById('addBtn').addEventListener('click', function () {       

             // 获取input的值       

            let input_value = document.getElementById('input-id').value;       

            // 获取展示框       

            let showBox = document.getElementById('dataList')       

           // 给展示框添加数据       

           let oDiv = document.createElement('div');       

           oDiv.className = "item-class"       

           oDiv.innerHTML = input_value       

           showBox.appendChild(oDiv)       

           document.getElementById('input-id').value = ""       

     })

}

init();

更多学习资料：请看下面↓↓↓