文章目录

一、manifest.json
- 1.1 name 插件的名字
- 1.2 version 插件的版本
- 1.3 manifest_version 清单文件的版本
- 1.4 description 插件描述
- 1.4 icons 设置图标的图片
二、content_scripts 直接注入页面的JS
- 2.1 matches 设置匹配url的规则
- 2.2 加载我们的插件
三、broswer_action 与 page_action
- 3.1 default_icon 设置图标的图形
- 3.2 default_title 鼠标悬停时的文字
- 3.3 default_popup 点击弹出框
- - 3.3.1 default_popup 打开的文件不能直接写js文件。
四、permissions 声明需要使用到的API
五、background.js
- 5.1 persistent 开启状态

一、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.4 icons 设置图标的图片

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

"icons":{"16":"image/tools.png","32":"image/tools.png","128":"image/tools.png"
}

效果:

二、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"}],
}

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

document.addEventListener('DOMContentLoaded', function()
{console.log('我被执行了！');
});

addEventListener(参数1，参数2) 方法用于向指定元素添加事件句柄。
参数一：必须。字符串，指定事件名。
参数二：必须。指定事件触发时执行的函数。
详细介绍参考:菜鸟教程
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"]}]
}

index.js

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

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

2.2 加载我们的插件

1、打开设置-更多工具-扩展程序
2、打开开发者模式
3、选择加载已解压的扩展程序
然后我们随便进入一个网站测试以下
效果:

可以发现我们的插件成功执行!

匹配所有bilibili开头的url,

"content_scripts":[{"matches":["https://www.bilibili.com/*"],"js":["index.js"]}
]

注意：每次修改过manifest.json文件后我们都要重启一下插件

三、broswer_action 与 page_action

browser_action 是浏览器右边的小按钮图标一直存在
例如：
page_action 是内置到浏览器url里边的小按钮只有在匹配某些特定的网页时才显示
例如：

3.1 default_icon 设置图标的图形

"browser_action":{"default_icon": "image/tools.png"
}

效果:

3.2 default_title 鼠标悬停时的文字

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

效果:

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"
}

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>

效果：

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

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

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

官网API接口说明：Chrome API Permission

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

"permissions":["tabs"],

五、background.js

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

"background":{"scripts":["background.js"]"persistent": false},
}

background.js

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

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

5.1 persistent 开启状态

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

首次安装或更新完版本时
触发特定事件时
content script 向其发送消息时
其他页面（例如popup）调用runtime.getBackgroundPage时

Chrome插件开发、脚本开发笔记相关推荐

Hi3516开发笔记（三）：Hi3516虚拟机基础环境搭建之交叉编译环境境搭建以及开机启动脚本分析
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/121458516 长期持续项目技术分享,Shang业Di ...
NSIS安装包开发笔记（一）：NSIS介绍、使用NSIS默认向导脚本制作Windows安装包
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/116445811 长期持续带来更多项目与技术分 ...
Polyworks脚本开发学习笔记(六)-比较运算、数学运算、逻辑运算及流程控制
Polyworks脚本开发学习笔记(六)-比较运算.数学运算.逻辑运算及流程控制前言比较运算.逻辑运算及流程控制是编程的基本语法,Polyworks的语法规则与VB/C#/Python等并没有很大 ...
Polyworks脚本开发学习笔记(十一)-玩转获取参数(GET)与设置参数
Polyworks脚本开发学习笔记(十一)-玩转获取参数(GET)与设置参数 Polyworks采用了脚本语言作为二次开发的工具,因此语言格式上非常规范和统一.其中一个重要的特点就是,几乎所有的对象都 ...
Polyworks脚本开发学习笔记(十八)-用SDK开发Polyworks插件
Polyworks脚本开发学习笔记(十八)-用SDK开发Polyworks插件插件是由PolyWorks加载的动态链接库(DLL文件),然后查询Polyworks模块,以确定它们具有哪些功能,提供给 ...
Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件
Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件用Polyworks脚本开发,没有高级语言的支持,功能难免单一,一些比较复杂的交互实现不了,界面和报告也很 ...
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发 Polyworks支持C#二次开发,用对应的SDK文档试着做一下开发样例. 新建一个C#项目,在解决方案中右键添加引用 ...
Polyworks脚本开发学习笔记(十)-互动式开发及出错控制
Polyworks脚本开发学习笔记(十)-互动式开发及出错控制第八章组合的各种命令,完成了一个对所选的测点名称进行命名的任务.但是,由于任务中没有交互环节,只能机械地将曲面点 - 包边点改为Flu ...
Polyworks脚本开发学习笔记(一)-脚本开发环境
Polyworks脚本开发学习笔记(一)-脚本开发环境背景 Polyworks的扫描尺寸测量分析模块是我工作中经常用到的一个模块,我不是做测量的,但是利用Polyworks对扫描获得的点云来进行尺寸 ...

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