Openresty Python LUA

Openresty Python LUA 学习资料 QQ群:397745473

0%

chrome插件开发与调试技巧

发表于 更新于 分类于

QQ群：397745473

chrome插件开发与调试技巧

chrome插件开发与调试技巧

参考文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Chrome 扩展开发文档
https://open.chrome.360.cn/extension_dev/overview.html

# 官方文档
https://developer.chrome.com/docs/extensions/

# 视频教程
https://space.bilibili.com/179754625/video
https://www.youtube.com/watch?v=xHUne74zxos&list=PLLPsLcbaFY22HWg-dDaVvQG3ZqIbfw6q0

# 其他参考资料
http://jzlin-blog.logdown.com/posts/143373-getting-started-with-building-a-chrome-extension


# 常用JS库
https://www.bootcdn.cn/
# 思维导图：https://gitee.com/dongzhongzhidong/js_notebook

# jspider 爬虫框架
http://dongzhongzhidong.gitee.io/jspider/#/

# 深入理解JavaScript系列
https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

技巧

1
2
3
4
5
6
7
1.在扩展管理页面上(chrome://extensions)，找到应用（扩展）ID;

2.查看应用（扩展）中的文件，使用类似这样的格式访问 chrome-extension://extensionId/filename

3.使用开发者工具设置脚本断点，单步调试，查看变量

4.使用控制台命令 location.reload(true)来重新加载当前的调试页面

辅助插件

1
2
3
4
5
FeHelper--Web前端助手:
https://github.com/zxlie/FeHelper

# tampermonkey
http://tampermonkey.net/

浏览器设置

1
2
3
4
5
6
7
点审查元素后点击设置 找到源代码区域,除了“启用通过Tab键移动焦点功能”不需要，其他的都勾上


元素面板
控制台
源代码  --片段
网络  搜索框

JS 快速入门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
声明局部变量 let var
全局申名 windows.变量名
原则上推荐不用while(容易死循环) 和 for 

# 
function name(arg){
    console.log(arg)
}
window.name
ƒ name(arg){
    console.log(arg)
}
name(111)
VM766:2 111


# 箭头函数
参数 => 函数体
# 匿名函数
!function(args){}(args)


# 逻辑简写
a=0
let b=a||2

# 数组
a.forEach(i=>console.log(i))
let a=[1,2,3,4]
undefined
a.map(i=>i*i)
(4) [1, 4, 9, 16]
a.filter(i=>i==1)
[1]
a.reduce((i,ii)=>i+ii)
10
a.some()
a.every()

#数组
拼接: [...a,...b]
固定遍历: [...Array(10)].forEach((i,index)=>console.log(index))
生成索引数组 [...Array(10).keys()]
[...document.querySelectorAll('div')].map(i=>i.id)
# 对象
windows
let a={
    key:'1234',
}
undefined
a.key
'1234'
Object.keys(a)
['key']
Object.values(a)
['1234']

JSON.stringify({1:'文字'})
let a = [{name:'10'},{name:'11'},{name:'12'}]
a.map(i=>parseInt(i.name)+1)
(3) [11, 12, 13]
类型转换: ''+11 会隐式转换成字符型
a.map(i=>+i.name+1)
(3) [11, 12, 13]
a.map(i=>''+i.name)
(3) ['10', '11', '12']

事件监听与JS函数

1
2
3
4
5
6
7
# 方法1 onclick 是会被覆盖的
temp1.onclick=(e)=>{console.log(e)}

# 方法2 addEventListener 是不会被覆盖的
temp1.addEventListener('click',function(){
    console.log('tttt');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 复写onclick事件
(e)=>{console.log('aaa');return false;}

# 移除事件
temp2.removeEventListener('click',getEventListeners(temp2).click[1].listener)

第0个事件为onclick事件，无法移除,移除方法:
temp2.onclick=(e)=>{return false}


# 移除多个监听事件
temp1.addEventListener('click',function(){console.log('aaaa');})  // 增加事件1
temp1.addEventListener('click',function(){console.log('bbbbbb');}) // 增加事件2

# 用forech移除多个事件
getEventListeners(temp1).click.forEach((i)=>temp1.removeEventListener('click',i.listener))

网络请求

XHR

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fetch("http://zhongguose.com/colors.json", {
  "headers": {
    "accept": "*/*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
    "cache-control": "no-cache",
    "pragma": "no-cache",
    "proxy-connection": "keep-alive",
    "sec-gpc": "1"
  },
  "referrer": "http://zhongguose.com/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "omit"
}).then(res=>res.json()).then(res=>console.log(res))

数据持久化

1
2
3
https://github.com/KonghaYao
# 爬虫库
https://github.com/KonghaYao/jspider

提取参数

1
2
3
4
5
getPram

# 常用JS库
https://www.bootcdn.cn/
# 思维导图：https://gitee.com/dongzhongzhidong/js_notebook

跨域问题

1
2
3
1. cors unblock 插件
2. 使用代理请求网站  # https://bird.ioliu.cn/
3. 使用本地代理

JS爬虫测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 获取所有网址,并把http替换成https
[...document.querySelectorAll("#cnblogs_post_body > p > a")].map(x=>x.href.replace('http','https'))

# 尝试获取第一条数据
fetch(temp1[1]).then(res=>res.text()).then(res=>console.log(res))

# 使用框架
await import('https://cdn.jsdelivr.net/npm/js-spider/dist/JSpider.esm.min.js').then({JSpider}=>{
    window.JSpider = JSpider;
});

// 导入插件，JSpider 还有很多功能插件
const {
    Request, // 请求库
    Download, // 下载库
} = JSpider.plugins;

数组操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
对数组增删改
splice
解构语法
let a=[1,2,3]
let b=['a','b',3]
let all=[...a,...b,'c']

数组批处理
forEach(遍历)
map（处理）

判断函数 some every
整理函数 filter sort

复杂函数 reduce  compose

对象操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
通常来说对不是用来遍历的, 但是特殊情况下可能需要进行遍历.

对像遍历
let obj={11:22,33:44}
Object.entries(obj).forEach(([key,value])=>console.log(key,value))

Date操作
new Date().toDateString()

Json操作
JSON.stringify(obj)
JSON.parse(JSON.stringify(obj))

#location
location.reload()强制更新

# FormData 用于上传文件和用户登陆的时候使用

Ajax

1
2
3
4
5
6
7
fatch

GET
POST

MIME 类型表

文件类型操作

QQ群：397745473

相关文章

欢迎关注我的其它发布渠道