优雅哥

Chrome插件开发、脚本开发笔记

5/6/2020 效率

# 文章目录

# 一、manifest.json

注意：json 文件中不允许使用注释！

这是一个 Chrome 插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。
其中，manifest_version、name、version 3 个是必不可少的，description和icons是推荐的。

# 1.1 name 插件的名字

# 1.2 version 插件的版本

# 1.3 manifest_version 清单文件的版本

  • manifest_version: 清单文件(Json)的版本，这个必须写，而且必须是 2

# 1.4 description 插件描述

```javascript
{
    "name":"Peng Gang's first Plug-in",
    "version":"1.0.0",
    "manifest_verson":"2",
    "description":"这是我的第一个Chrome插件"
}
1
2
3
4
5
6
7

在这里插入图片描述

# 1.4 icons 设置图标的图片

2.2 有讲如何将我们插件安装到扩展程序面板

"icons":{
        "16":"image/tools.png",
        "32":"image/tools.png",
        "128":"image/tools.png"
}
1
2
3
4
5

效果:
在这里插入图片描述

# 二、content_scripts 直接注入页面的 JS

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

例：

{
	// 需要直接注入页面的JS、css
	"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"
		}
	],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

特别注意，如果没有主动指定run_at为document_start（默认为 document_idle），下面这种代码是不会生效的：

document.addEventListener('DOMContentLoaded', function()
{
	console.log('我被执行了！');
});
1
2
3
4
  • addEventListener(参数 1，参数 2) 方法用于向指定元素添加事件句柄。
    参数一：必须。字符串，指定事件名。
    参数二：必须。指定事件触发时执行的函数。
    详细介绍参考:菜鸟教程 (opens new window)
  • DOMContentLoaded
    当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
    注意：它和 load 方法功能上很相似，但却又有细微的差别：
    load:应该仅用于检测一个完全加载的页面。
  • 区别:页面的 load 事件会在 DOMContentLoaded 被触发之后才触发,也就是 DOMcontentLoaded 早于 load

content-scripts 和原始页面共享 DOM，但是不共享 JS，如要访问页面 JS（例如某个 JS 变量），只能通过injected js来实现。
content-scripts 不能访问绝大部分 chrome.xxx.api，除了下面这 4 种：

  • chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
  • chrome.i18n
  • chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
  • chrome.storage
    其实看到这里不要悲观，这些 API 绝大部分时候都够用了，非要调用其它 API 的话，你还可以通过通信来实现让 background 来帮你调用（关于通信，后文有详细介绍）。

# 2.1 matches 设置匹配 url 的规则

如果要匹配所有网页，可以使用 all_urls

{
    "name":"Peng Gang's first Plug-in",
    "version":"1.0.0",
    "manifest_version":2,

    "content_scripts":[
        {
            "matches":["<all_urls>"],
            "js":["index.js"]
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

index.js

alert("我的插件里边的index.js");
1

如果满足条件就执行 js 里边的文件

# 2.2 加载我们的插件

1、打开 设置-更多工具-扩展程序
2、打开开发者模式
3、选择 加载已解压的扩展程序
然后我们随便进入一个网站测试以下
效果:
在这里插入图片描述
可以发现我们的插件成功执行!

匹配所有 bilibili 开头的 url,

"content_scripts":[
        {
            "matches":["https://www.bilibili.com/*"],
            "js":["index.js"]
        }
]
1
2
3
4
5
6

注意：每次修改过manifest.json文件后我们都要重启一下插件
在这里插入图片描述

# 三、broswer_action 与 page_action

  • browser_action 是浏览器右边的小按钮图标 一直存在
    例如：
    在这里插入图片描述

  • page_action 是内置到浏览器 url 里边的小按钮 只有在匹配某些特定的网页时才显示
    例如：
    在这里插入图片描述

# 3.1 default_icon 设置图标的图形

"browser_action":{
        "default_icon": "image/tools.png"
}
1
2
3

效果:
在这里插入图片描述

# 3.2 default_title 鼠标悬停时的文字

"browser_action":{
        "default_icon": "image/tools.png",
        "default_title": "作者:疯狂的地球人"
}
1
2
3
4

效果:
在这里插入图片描述

# 3.3 default_popup 点击弹出框

几乎所有的插件点击过后都有一个页面弹出，类似这种:

在这里插入图片描述

那这是怎么制作出来的呢？这时候就该我们的 default_popup 出场了！

  • default_popup 可以设置当用户点击按钮过后显示的页面(例 3.3)

  • popup 可以包含任意你想要的 HTML 内容，并且会自适应大小。可以通过 default_popup 字段来指定 popup 页面，也可以调用 setPopup()方法。
    需要特别注意的是，由于单击图标打开 popup，焦点离开又立即关闭，所以 popup 页面的生命周期一般很短，需要长时间运行的代码千万不要写在 popup 里面。

  • 在权限上，它和 background 非常类似，它们之间最大的不同是生命周期的不同，popup 中可以直接通过 chrome.extension.getBackgroundPage()获取 background 的 window 对象。

例 3.3：

"browser_action":{
        "default_icon": "image/tools.png",
        "default_title": "作者:疯狂的地球人",
        "default_popup": "popup.html"
}
1
2
3
4
5

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        span{
            color: white;
            font-size: 20px;
            background: linear-gradient(to right,red,purple);
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <span>
        CSDN:疯狂的地球人出品
    </span>
</body>
</html>
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

效果：
在这里插入图片描述

# 3.3.1 default_popup 打开的文件不能直接写 js 文件。

在 default_popup 打开的文件中，不能直接在 script 标签中写脚本。只能使用引入的方式使用 js 文件。
例如：

# 四、permissions 声明需要使用到的 API

官网 API 接口说明：Chrome API Permission (opens new window)

声明要使用那些 API：
例如：

"permissions":["tabs"],
1

# 五、background.js

up 主:只要你打开浏览器，它就是会执行。

"background":{
      "scripts":["background.js"]
      "persistent": false
    },
}
1
2
3
4
5

background.js

chrome.browserAction.onClicked.addListener(function() {
  //chrome.tabs.create({url:"https://www.baidu.com"});
  chrome.tabs.create({ url: "popup.html" });
});
1
2
3
4

上面这段代码的作用是监听 browser_acction 的点击事件，当发生点击事件的时候，调用 chrome 的 API tabs 创建一个指定目录的标签页。
注意：browser_action 的default_popup 方法的优先级高于这个接口

# 5.1 persistent 开启状态

Persistent background pages：一直开启
需要时开启，可通过将 persistent 设置为 false 来设置
开启时机：

  • 首次安装或更新完版本时
  • 触发特定事件时
  • content script 向其发送消息时
  • 其他页面（例如 popup）调用 runtime.getBackgroundPage 时
最后更新于: 2021年9月15日星期三晚上10点10分
Dawn
DDRKirby(ISQ)