基本知识
在具体的开发之前,我们先来科普一些基础知识。现阶段的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();
更多学习资料:请看下面↓↓↓