本文已参加「新人创作礼」活动，一起敞开创作之路。
chrome拓宽文档参阅:
- developer.chrome.com/docs/extens…
- www.kkh86.com/it/chrome-e…
- blog.haoji.me/chrome-plug…
- chrome.cenchy.com/getstarted.…
关于chrome拓宽：
关于chrome拓宽，也有的人称为chrome插件，英文官方名称为Chrome extensions，在此作者将运用拓宽称号，不多做纠结，原生开发中大多数运用是html、json、js、css等文件，个人认为chrome拓宽关于前端开发是较为友爱。笔者本身便是前端，因而在下方描绘时将默许大家都对前端有所研究，提早对不能照顾到的人说声抱歉。
实践开发：
刨除你的拓宽上线发布流程外，完好的开发调试流程如下：
-
新建文件夹，在文件夹根目录中放置你的manifest.json文件，并环绕该文件放入你自己需求的内容。
-
完结开发后在chrome浏览器中进入拓宽程序
-
在右上角你能够看到开发者模式开关，将它翻开
-
随后点击左上角呈现的【加载已解压的拓宽程序】，挑选你的拓宽程序根目录即可。
-
随后你能够看到你的拓宽程序呈现。
-
在浏览器右上角你也能够看的你的拓宽icon
整个结构需求基于名为【manifest】的json文件进行开发，你能够理解为它是咱们与chrome的桥梁，chrome经过读取该文件的内容来实现咱们拓宽的功用与展现，manifest.json的装备单部分内容如下：
{
"manifest_version": 2,
//告诉chrome需求用哪个版本来解析咱们的文件，现在有且只要2与3，两者差异在于manifest的部分装备写法不同，笔者将在下文中进行举例，在本次实践中运用的是2.
"name": "FxExtensions",//给你的拓宽起个姓名，能够为中文。
"description": "it is a description",//对这个拓宽进行一些描绘。
"version": "1.0",//你的拓宽的版本号，一般只要拓宽上线市场时才会用到，自己本地文娱无需介意。
"icons": {
//此为你在拓宽程序主页面展现的icon
"16":'image/icon.png',//能够设置不同尺寸关于不同的icon。
"48":'image/icon.png',
"128":'image/icon.png'
},
"browser_action": {
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一，前两者差异为，browser为一切网站常驻且常量(icon不为灰色),page为只在特定网站常量，其他时刻为灰色(能够理解为不行运用状况),但二者可装备项完全一致，笔者考虑是否page_action还有额定的装备项如：装备哪个页面为可运用状况。但查阅官方文档 发现并没有如笔者所想，装备哪个页面为可运用状况需求用写在background.js(下文会对此阐明)的chrome.api来进行调用，因而笔者觉得有些不合理性，在manifest_version为3的版本中，browser_action与page_action也确实统一运用单action字段，不再区分二者，关于app，笔者在查阅中发现与前两者相差较大，且运用人数貌不是很多，因而在此小挖一坑，日后来填，感兴趣的可自行查阅。
"default_icon": "image/icon.png",//此为你在浏览器右上角显现的icon
"default_popup": "popup.html",//当你点击浏览器右上角显现的icon时(不为灰状况),弹出的展现页面
"default_title": "鼠标悬浮展现内容"//鼠标悬浮在icon时显现的title文字。与image标签的title属性类似。
},
"background":{
//常驻后台的JS或许页面，一般为JS，，该装备如它的姓名一样，在背后默默支持，一般会在浏览器敞开时开端执行，浏览器封闭后结束，一般用来跑一些程序函数等，在下文中会有具体阐明。
"page": "background.html"//2种指定方式，假如指定JS，那么会自动生成一个背景页
//"scripts": ["js/background.js"]
},
"content_scripts":[
// 需求直接注入页面的JS，该内容会在下文与background一起阐明。
{
//"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"],
"run_at": "document_start"
// 代码注入的时刻，可选值： "document_start", "document_end", or "document_idle"，最后一个表明页面空闲时，默许document_idle
},
],
"permissions":[
//权限恳求，当你想要运用chrome供给的api才能时，你需求向chrome"报备"，该数组便是报备列表。假如不需求它的才能，就不需求写该装备。
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 告诉
"webRequest", // web恳求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 能够经过executeScript或许insertCSS访问的网站
"https://*/*" // 能够经过executeScript或许insertCSS访问的网站
]
//除此之外还有很多装备项，在此不一一列举，感兴趣的可自行查阅
//version3:https://developer.chrome.com/docs/extensions/mv3/manifest
//version2:https://developer.chrome.com/docs/extensions/mv2/manifest
}
接下来咱们进行一个最小本钱最少装备的开发，manifest.json如下：
{
"manifest_version": 2,
"name": "FxExtensions",
"description": "it is a description",
"version": "1.0",
"icons": {
"16":"image/icon.png",
"48":"image/icon.png",
"128":"image/icon.png"
},
"browser_action": {
"default_icon": "image/icon.png",
"default_popup": "popup.html",
"default_title": "鼠标悬浮展现内容"
}
}
能够看到，整个装备单只要根本的装备项，不包括background,permissions,content_scripts等参数。在装备单上咱们能够看到，装备上指向了两个文件，一个是icon，另一个是html文件，因而咱们还需求一个icon.png以及一个popup.html。整个目录结构如下
出于便于后期保护以及代码的洁净整齐，咱们将未来可能用到的内容新建文件夹，便于后续办理，实践不运用文件夹一股脑放在根目录也是能够，icon.png放在了image文件夹下，icon大小官方建议大概是19px*19px。接下来咱们编辑popup.html的内容，一步一步来，咱们先做到根本静态展现，html代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
padding: 0;
margin: 0;
}
.popup-main{
background-color: #ecf5ff;
padding: 8px;
height: 150px;
overflow: hidden;
}
.popup-avatar{
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 4px;
overflow: hidden;
}
.popup-image{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<main class="popup-main">
<div class="popup-avatar">
<img class="popup-image" src="image/avatar.png" alt="">
</div>
</main>
</body>
</html>
能够看到，整个html的功用是展现了一个名为【avatar】的图片，并在款式进步行了修改。avatar读者能够自行随意挑选一个你有的图片放在image文件夹下，笔者在此不做供给。完结整个代码编写后，参照上文提到的打包流程，点击【加载已解压的拓宽程序】按钮，挑选新建的文件夹，理论上你就会看到你的拓宽程序加载成功了。
在浏览器右上角左键点击你的icon，弹出内容大致如下：
你也能够右键单击弹出内容，审查元素，即咱们常用的F12。
假如你成功呈现了该步骤，阐明现在你的操作是正确的，假如你没能在右上角找到你的icon,不妨点击这里看看是否没有将它常驻在浏览器上。
至此，最根本的拓宽功用便已经完结。不妨对这个页面进行你的个性化改动，打造归于你的拓宽页面。
tips: 更改代码后无需重新打包，只需在拓宽页面点击左上角【更新】按钮并刷新浏览器即可(有时候这两个步骤也不需求，只需求点击右上角插件icon再次敞开封闭即可)
