chrome插件编写基本入门
作为一名程序猿，怎么能不会写chrome插件呢[笑]
所以今天就教教大家怎么写最基本的chrome插件，不对，确切地说是互相学习一起学习。
（我是不会告诉你说我也是刚学会没多久的！😂）
基础知识：
首先，我们要知道一个 chrome插件需要哪些文件
其实很简单
- 配置（入口）文件
manifest.json xx.htmlxx.cssxx.js- 图片
这就OK了，如果再看这篇文章的你 是一位前端攻城狮、程序猿，那么恭喜你，你的学习难度会很小分分钟的事情，很容易就能学会（当然我指的是基础，最基本的写法）
由于 html、css、js 及文件组织，跟普通的 web 开发一样，那写 Chrome 扩展主要就是 manifest 文件的编写和扩展的调试了
manifest.json
- 基本属性
包括扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 manifest 版本（manifest_version）等信息。
name、version 和 manifest_version 是必须的，而且 manifest_version 必须为 2
（别问我为啥是2，我也不知道）
举个栗子：
{
//这是必须的
"name": "coding冒泡点赞狂魔",
"manifest_version": 2,
"version": "1.0",
//这是可选的
"description": "coding点赞脚本"
}
- browser_action
browser_action指定扩展的图标放在Chrome工具栏中，它定义了扩展图标文件位置（default_icon）、悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）
用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。
如果你想创建一个不总是可见的图标, 可以使用page action来代替browser action.
举个栗子
{
...
"browser_action": {
"default_icon": "1.png",
"default_title": "我是点赞狂魔",
"default_popup": "popup.html"
},
...
}
- permissions
这个牛逼了，比较重要的
permissions 属性是一个数组，它定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）等，可以根据需要添加。
扩展或app将使用的一组权限。每个权限是一列已知字符串列表中的一个，如geolocatioin或者一个匹配模式，来指定可以访问的一个或者多个主机。权限可以帮助限定危险，如果你的扩展或者app被攻击。一些权限在安装之前，会告知用户
如果一个扩展api需要你的声明一个权限在manifest文件，一般的，api的文档将告诉怎么做。例如，Tabs页面告诉你这么声明一个tabs权限。
这是一个扩展的manifest文件的权限设置的一部分。
举个栗子
{
...
"permissions": [
"tabs",
"bookmarks",
"http://www.blogger.com/",
"http://*.google.com/",
"unlimitedStorage",
...
],
...
}
- background
扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态。
background 可以使扩展常驻后台，比较常用的是指定子属性 scripts，表示在扩展启动时自动创建一个包含所有指定脚本的页面。
举个栗子
{
...
"background": {
"scripts": ["myscript.js"]
},
...
}
- content_scripts
Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
举个栗子
{
...
"content_scripts": [
{
"matches": ["https://coding.net/*"], // 这是必须项
"js": ["jquery.min.js"], // 这是可选
"css": ["xx.css"]， // 这是可选
...
}
]
...
}
使用 content_scripts 字段，一个扩展可以向一个页面注入多个content_script脚本；每个content script脚本可以包括多个javascript脚本和css文件。
简单的说content_scripts会根据你在它内部定义的 matches规则 去匹配url，然后在匹配成功的url页面中注入 你指定的js和css等
- 好了， 学会这些之后，你就能做一个简单的 chrome插件了，有一点要注意==
content scripts是打开页面后直接注入你可以不需要background和permissions，而如果你想点击你的插件图标再执行注入的话你就必须使用background和permissions将代码注入页面，扩展必须具有cross-origin 权限， 还必须可以使用chrome.tabs模块。 可以通过在manifest文件的permissions字段里声明来取得这些权限。一旦设置好了权限，就可以通过调用executeScript()来注入javascript脚本。如果要注入css，可以调用insertCSS()。==*
举个栗子
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,{code:"document.body.bgColor='red'"});
});
这样 你就可以点击图标之后把对应网页的背景色变成红色
然而，有时候我们的代码可能会比较多，直接写在executeScript()中不美观，那么我们就可以新建一个文件
举个栗子
/* action.js */
document.body.bgColor='red';
alert('已改变背景色');
/* main.js */
chrome.browserAction.onClicked.addListener(function(tab) {
hrome.tabs.executeScript(null,{file:"action.js"});
});
总结
最后我们来总结一下上面所学习的部分，把所有代码整合到一起，就拿我的一个简单的基本插件为例：
目录结构：
---- 插件文件夹
-------- manifest.json
-------- jquery.min.js
-------- like.js
-------- myscript.js
- manifest.js
{
"name": "coding冒泡点赞狂魔",
"manifest_version": 2,
"version": "1.0",
"description": "coding点赞脚本",
"browser_action": {
"default_icon": "1.png"
"default_title": "我是点赞狂魔"
},
"permissions": [
"tabs", "https://coding.net/*\"
],
"background": {
"scripts": ["myscript.js"]
},
"content_scripts": [
{
"matches": ["https://coding.net/*"],
"js": ["jquery.min.js"]
}
]
}
- myscript.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,{file:"like.js"});
});
- like.js
jQuery('.heart.icon.empty').click();
console.log('已点赞');
console.log(jQuery('.heart.icon.empty').click());
alert('已点赞 '+ jQuery('.heart.icon.empty').click().length + '条');
参考链接
支付宝打赏
微信打赏