The World Best ST.

chrome插件

字数统计: 1.2k阅读时长: 4 min
2020/03/16 Share

chrome插件开发

写在前面

见过了形形色色的谷歌插件, 自己也想了解一下谷歌的插件是如何开发的。

其实chrome插件又叫chrome拓展, 是一个使用Web技术开发、用来增强浏览器功能的软?> 件。插件除了前端技术之外, 还可以配合C++编写dll动态链接库实现一些更底层的操作。

插件有什么好处

可以自由的定制你的浏览器, 美支支

chrome插件提供了很多的API, 帮助我们更好的实现自定义功能:

  • 书签控制
  • 下载控制
  • 窗口控制
  • 标签控制
  • 网络请求控制、各类事件监听
  • 自定义原生菜单
  • 完善的通信机制

Chrome插件和Firefox插件的区别

chrome插件能运行在所有的webkit内核的浏览器上, firefox插件只能运行在firefox上

正式开始开发

chrome插件对结构没有明确的要求, 只需要保证本目录有一个mainfest.json文件即可。

在开发中, 代码有任何改动都必须重新加载插件, 只需要在插件管理页面按下Ctrl+R即可

mainfest.json

这个文件主要是用来配置所有和插件相关的配置, 必须放在根目录下. 其中mainfest_version,name,version3个是必不可少的, description,icons是推荐的

常见的配置项:

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
{
// 清单文件的版本,这个必须写,而且必须是2
"manifest_version": 2,
// 插件的名称
"name": "demo",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的Chrome扩展demo",
// 图标,一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 会一直常驻的后台JS或后台页面
"background":
{
// 2种指定方式,如果指定JS,那么会自动生成一个背景页
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 浏览器右上角图标设置,browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题,可选
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入页面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
"run_at": "document_start"
},
// 这里仅仅是为了演示content-script可以配置多个规则
{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"]
}
],
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
],
// 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
"web_accessible_resources": ["js/inject.js"],
// 插件主页,这个很重要,不要浪费了这个免费广告位
"homepage_url": "https://www.baidu.com",
// 覆盖浏览器默认页面
"chrome_url_overrides":
{
// 覆盖浏览器默认的新标签页
"newtab": "newtab.html"
},
// Chrome40以前的插件配置页写法
"options_page": "options.html",
// Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
"options_ui":
{
"page": "options.html",
// 添加一些默认的样式,推荐使用
"chrome_style": true
},
// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
"omnibox": { "keyword" : "go" },
// 默认语言
"default_locale": "zh_CN",
// devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
"devtools_page": "devtools.html"
}

※chrome插件完整的配置指导地址(需要科学上网):https://developer.chrome.com/extensions/manifest

content-scripts

所谓content-scripts, 其实就是Chrome插件中向页面注入脚本的一种形式(虽然名为script, 其实还可以包括css的), 借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS(如果需要动态注入,可以参考下文),最常见的比如:广告屏蔽、页面CSS定制, 等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
// 需要直接注入页面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
"run_at": "document_start"
}
],
}
CATALOG
  1. 1. chrome插件开发
    1. 1.1. 插件有什么好处
    2. 1.2. Chrome插件和Firefox插件的区别
    3. 1.3. 正式开始开发
      1. 1.3.1. mainfest.json
        1. 1.3.1.1. content-scripts