最快学习chrome extension注入

tags:学习

[toc]

快速搭建一个chrome ext

chrome ext由哪些必备文件组成

• manifest.json (各类声明，有且仅有一个）
• xxxx.js（各种javascript文件，负责逻辑控制）
• xxxx.html(需要显示的网页)
• xxxx.css(网页的样式）
• xxxx.png(显示的图标等）

chrome ext的三种作用范围

有三种地方可以写js，起的作用各不相同

• background
• popup
• inject

background

ext一旦载入，（手动或伴随浏览器第一次启动而载入）就会运行。只运行一次。
一般负责后台需要运行，或者初始化某些东西时候用

popup

鼠标左键点击ext图标，会出现一个弹出的网页。需要弹出网页时用。不声明就不会弹出。

注入

在浏览网页时，对当前页面进行修改。
本篇主要介绍内容。

先创建manifest.json

官方资料

要注入，需要写入content_scripts

{
 "name": "My extension",

 "content_scripts": [
   {
     "matches": ["http://*.nytimes.com/*"],
     "css": ["myStyles.css"],
     "js": ["contentScript.js"]
   }
 ],

}

matches 我的注入会在哪些url上生效 css 我注入的内容，需要用到的格式 js 我的逻辑

对当前页面操作，必须加上权限

{
    "permissions": [
        "activeTab"
    ]
}

开始写注入js

一般来说，写注入js大都为了修改网页。而修改网页最重要的一点，就是找到要修改的东西所在的位置。当找到之后，要对找到的东西进行修改，这是第二点。

我们知道html有树形的文档结构，各个节点，还有子节点。这里可以自行补充一些关于DOM的知识。这里不赘述。

js提供了去寻找这些节点的一套方法

• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• getElementsByName()
• document.querySelector()
• document.querySelectorAll()

另外，还可以使用jquery帮你做好的方法。
去搜索这些方法的关键词，都可以找到很多的说明和例子。
实际应用中，推荐用jquery的方法，比较简便。

jquery教程

jquery的基础语法是

$(selector).action()

$(selector) 代表选择节点，selector是一个查找用的字符串 .action() 代表你对这个节点做什么样的操作

选择和操作就是最重要最基本的2个技能

选择的方法参看这里

操作的方法参看这里

总结

以上就是最简易的chorme ext修改页面的介绍。具体学习还需结合实际例子，边学边练以达到更好效果。

本作品采用《CC 协议》，转载必须注明作者和本文链接