tags:学习
[toc]
- manifest.json (各类声明,有且仅有一个)
- xxxx.js(各种javascript文件,负责逻辑控制)
- xxxx.html(需要显示的网页)
- xxxx.css(网页的样式)
- xxxx.png(显示的图标等)
有三种地方可以写js,起的作用各不相同
- background
- popup
- inject
ext一旦载入,(手动或伴随浏览器第一次启动而载入)就会运行。只运行一次。 一般负责后台需要运行,或者初始化某些东西时候用
鼠标左键点击ext图标,会出现一个弹出的网页。需要弹出网页时用。不声明就不会弹出。
在浏览网页时,对当前页面进行修改。 本篇主要介绍内容。
{
"name": "My extension",
"content_scripts": [
{
"matches": ["http://*.nytimes.com/*"],
"css": ["myStyles.css"],
"js": ["contentScript.js"]
}
],
}
matches : 我的注入会在哪些url上生效
css : 我注入的内容,需要用到的格式
js : 我的逻辑
{
"permissions": [
"activeTab"
]
}
一般来说,写注入js大都为了修改网页。而修改网页最重要的一点,就是找到要修改的东西所在的位置。当找到之后,要对找到的东西进行修改,这是第二点。
我们知道html有树形的文档结构,各个节点,还有子节点。这里可以自行补充一些关于DOM的知识。这里不赘述。
js提供了去寻找这些节点的一套方法
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- getElementsByName()
- document.querySelector()
- document.querySelectorAll()
另外,还可以使用jquery帮你做好的方法。 去搜索这些方法的关键词,都可以找到很多的说明和例子。 实际应用中,推荐用jquery的方法,比较简便。
jquery的基础语法是
$(selector).action()
$(selector) : 代表选择节点,selector是一个查找用的字符串
.action() : 代表你对这个节点做什么样的操作
选择和操作就是最重要最基本的2个技能
选择的方法参看这里
操作的方法参看这里
以上就是最简易的chorme ext修改页面的介绍。具体学习还需结合实际例子,边学边练以达到更好效果。