我的第一个chrome扩展（2）——基本知识
1.manifest介绍界面：json格式
json：JavaScript Object Notation
包括两种结构：
key:value对：{{"A1":"value1","A2":"value2","A3":"value3"},{…},{…}}
值的有序集合 {"books":["book1","book2","book3"]}
value类型：字符串，数字，对象，数组，bool类型和null中的一种
json格式的数据可嵌套
2.DOM:document object model
DOM参阅：
http://www.ituring.com.cn/article/60188
http://www.w3school.com.cn/htmldom/
分为核心DOM，XML DOM和HTML DOM
HTML DOM的树状结构图：
每个文件有一个根元素<html>
每个根元素有两个子元素<head><body>
标签必须成对出现或者是自闭标签，嵌套关系必须明确
标签可以包含一些属性或者子节点，子节点可以是元素也可以是文本，如：
<img src="data:images/dog.png" />
<div>Hello World!</div><input type="text" id="stu_name" value="Billy" />
上面的input有type，id和value三个属性
type="text"表示是文本输出框
id="stu_name"表明给这个元素分配了一个名为stu_name的id
value="Billy"表示输入框的默认值为Billy
不同元素往往拥有不同的属性名，比如对于img元素，通常会包含src属性以指定所显示图片的地址，而input元素往往会包含type属性来描述输入框的类型。
js中有多种获取DOM元素的方法：
getElementById:通过id获取元素（HTML中元素的id唯一）
getElementsByName：通过name获取元素
getElementsByTagName：通过标签名获取元素
getElementsByClass:通过类名获取元素
后三种获得的是一个包含一个或多个元素的数组（必须是数组）
getAttribute：读取元素属性
setAttribute：添加或更改元素属性
removeAttribute：删除元素属性
var imgurl = document.getElementById('my_image').src;
document.getElementById('my_another_image').src = imgurl;CSS的选择器：tagName，.className，#id
p {
width: 200px; //p标签的宽度为200px
}
.postlist {
width: 150px; //postlist类的元素宽为150px
}
#footer {
width: 100px; //id为footer的元素宽度为100px
}CSS选择器还可以通过元素属性进行定位
input[type="text"]{
font-size:16px;
} //作用于所有文本输入框
3.跨域请求：通过XMLHttpRequest请求数据时禁止跨域
需要在Manifest的permissions属性中声明需要的权限
注意：阻塞函数与非阻塞函数
大多数API调用为非阻塞函数，因此要用回调函数传递结果
如：function httpRequest(url,callback)(url为传入网址，callback为处理传回数据的函数）
问题：传回的数据安全起见不能直接用innerHTML插入或eval执行
若将数据写入：使用innerText
若是json格式的数据：使用JSON.parse解析 ？
结合try-catch判定数据的格式 ？
4.常驻后台
注意：js的格式：函数除定义外，调用时记得加；
加入background域即可
我的第一个chrome扩展（2）——基本知识的更多相关文章
- 我的第一个chrome扩展（1）——读样例，实现时钟
学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
- 如何通过写一个chrome扩展启动本地程序
@(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...
- 如何开发一个chrome扩展
chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...
- 推荐一个Chrome扩展应用，能够自动去除CSDN广告
作为一个程序员,每天编程遇到问题时,少不了前往国内著名的CSDN网站上查信息,看是否有同行遇到类似问题.很多时候根据遇到问题的错误消息进行搜索,结果都是一篇篇CSDN博客.这些博客打开后都会显示很多广 ...
- 跟我一起写一个chrome扩展程序
在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...
- 自己写一个chrome扩展程序 - 右键菜单扩展
最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...
- 我的第一个chrome扩展（0）——目标
当前有两个方向: 一.实现一个自动解码的地址栏监视器 扩展程序在后台不断监视地址栏输入,地址栏输入并回车后检查输入,若输入符合解码条件则调用网站信息进行解码,并将结果输出到地址栏,否则不改变: 初始阶 ...
- 我的第一个chrome扩展（3）——继续读样例
1.操作用户正在浏览的界面 http://www.ituring.com.cn/article/60212 问题:1.google未定义ID,用name为何无法找到? 2.如何让整个按钮一起动?原函数 ...
随机推荐
- 人见人爱A^B
求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方” Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果A= ...
- Codeforces Round #330 (Div. 2)
C题题目出错了,unrating,2题就能有很好的名次,只能呵呵了. 水 A - Vitaly and Night /***************************************** ...
- 简单几何(直线与圆的交点) ZOJ Collision 3728
题目传送门 题意:有两个一大一小的同心圆,圆心在原点,大圆外有一小圆,其圆心有一个速度(vx, vy),如果碰到了小圆会反弹,问该圆在大圆内运动的时间 分析:将圆外的小圆看成一个点,判断该直线与同心圆 ...
- SGU438 The Glorious Karlutka River =)（最大流）
题目大概说有m个人要过一条宽W的河,人最远跳远距离是d,河上有n个垃圾堆,每个垃圾堆都有坐标和同一时间能容纳的人数,问所有人最少要跳几次才能跳到对岸. 又是一题根据时间拆点的最大流. 二分时间建容量网 ...
- Vijos 1100 (区间DP)
题目链接: https://vijos.org/p/1100 题目大意:NOIP著名的加分二叉树.给出一棵树的中序遍历,加分规则左子树*右子树+根.空子树分数为1.问最大加分的树结构,输出树结构的先序 ...
- Windows Phone 7 播放视频
在Windows Phone 7中播放视频有两种方式,一种是使用MediaElement 控件来播放,一种是使用启动器MediaPlayerLanucher来实现视频的播放.用MediaElement ...
- mongodb与mysql命令对比
mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...
- [转] - QThread应用探讨
QThread 似乎是很难的一个东西,特别是信号和槽,有非常多的人(尽管使用者本人往往不知道)在用不恰当(甚至错误)的方式在使用 QThread,随便用google一搜,就能搜出大量结果出来.无怪乎Q ...
- windows服务器。linux服务器的集成包推荐
我对linux不熟悉,这个有点不好意思,虽然我是做php开发的.我只是对apache+php+mysql的操作熟悉而已,但是linux的服务器配置什么的都太懂 所以我就安装了windows2008,安 ...
- hdu 1116 并查集和欧拉路径
---恢复内容开始--- 把它看成是一个图 只是需要欧拉路径就可以了 首尾能连成一条线即可 如果要判断这个图是否连通 得用并查集 在hrbust oj里面看答案学到的方法 不用各种for循环套着判断能 ...