共计 5526 个字符，预计需要花费 14 分钟才能阅读完成。
前言
最近在钻研一些比拟有意思的货色，前几天玩了一个微信聊天机器人，丑化图片的，明天想写个浏览器插件。话不多说间接开始。
注释
想写一个浏览器插件比较简单，跟咱们平时开发我的项目一样，首先创立一个文件夹，保障上面会有一个 manifest.json 文件即可。
这是我的我的项目构造：
留神：这里会有个小坑，mainfest.json文件名肯定要写对，不然应用开发者模式加载插件的时候就会报错。
接下来是一个最根本的配置
{
"name": "IRON MAN",
"version": "1.0.0",
"description": "I am iron man",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "images/4.png",
"48": "images/4.png",
"128": "images/4.png"
},
"page_action": {
"default_popup": "popup.html",
"default_icon": "images/4.png"
}
}配置好之后就能够去浏览器中增加插件了，就是这么简略
从右上角菜单 -> 更多工具 -> 扩大程序能够进入 插件治理页面，也能够间接在地址栏输出 chrome://extensions 拜访。
勾选 开发者模式 即能够文件夹的模式间接加载插件，否则只能装置 .crx 格局的文件。
manifest.json的配置：
在 manifest.json 中，manifest_version、name、version 3 个是必不可少的，description和 icons 是举荐的。
这里贴一下从大佬那里粘贴来的解析：
{
// 清单文件的版本，这个必须写，而且必须是 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"
}接下来一步一步介绍我是怎么实现两个插件的性能的
1. 注册监听事件
在扩大程序的 background 脚本中注册监听事件：在脚本加载之后即触发监听
chrome.runtime.onInstalled.addListener(function () {chrome.storage.sync.set({ color: '#e84f20'}, function () {console.log("虾皮的橙色");
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({pageUrl: { hostEquals: 'www.baidu.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});2. 注册权限
因为咱们在 background 中应用了 chrome.storage 等 api，须要在 manifest.json 中注册
"permissions": [
"storage",
"declarativeContent",
"tabs",
"activeTab",
"contextMenus",
],3. 在扩大程序页面刷新咱们的扩大程序
点击查看 背景页, 能够看到打印内容
4. 引入 ICON 图标
其实之前放出的配置文件中曾经配置了图标，在下面的截图中也能够看到钢铁侠的图标。那么这里提两点留神点：
- 对于未压缩的扩大程序，只能应用 png 图标。
- 图标是能够适配不同的大小的，懒的话就全用一个。
5. 引入 popup 页面
我在页面中简略写了两个性能：让页面变色，让页面色彩复原。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
height: 50px;
background-color: #e84f20;
border-radius: 4px;
line-height: 50px;
text-align: center;
padding: 0 5px;
color: #fff;
margin-right: 20px;
}
.wrapper {
width: 500px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<Button id="btn" class="btn"> 点击变成虾皮红 </Button>
<Button id='clear' class="btn"> 复原 </Button>
</div>
<script src="./popup.js"></script>
</body>
</html>js 文件如下：
let changeColor = document.getElementById('btn');
let clear = document.getElementById('clear');
chrome.storage.sync.get('color', function (data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function (element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
chrome.tabs.executeScript(tabs[0].id,
{code: 'document.body.style.backgroundColor ="' + color + '";'});
});
};
clear.onclick = (ele) => {chrome.tabs.query({ active: true, currentWindow: true}, function (tabs) {
let color = '#fff'
chrome.tabs.executeScript(tabs[0].id,
{code: 'document.body.style.backgroundColor ="' + color + '";'});
});
}应用 chrome.storage.sync.get 获取内存中的色彩。应用 chrome.tabs.executeScript 往页面注入脚本。
须要留神的是：咱们应用到的 chrome API 都须要在 manifest.json 中配置
当初咱们就能够在 baidu 的页面中玩咱们的插件了!
点击之后的样子
也能够将色彩复原。
那么第一个给网站变色彩和复原的性能曾经实现了。接下来想做个翻译的性能。
6. 持续增加 background 脚本
chrome.contextMenus.create({
id: "9527",
contexts: ['selection'],
title: '让钢铁侠翻译：%s', // 显示的文字，除非为“separator”类型否则此参数必须，如果类型为“selection”，能够应用 %s 显示选定的文本
})
console.log(chrome.contextMenus)
chrome.contextMenus.onClicked.addListener((info, tab) => {
const query = info.selectionText;
const url = "https://fanyi.baidu.com/translate?#est/zh/" + query;
chrome.tabs.create({url: url});
})这段脚本的性能是在页面中创立一个右键的操作菜单，如图所示
咱们能够增加监听事件在点击的时候去对应的网址做一些事件。例子中我是给选中的文本增加了一个翻译的性能，通过监听点击事件跳转到百度翻译，并把选中文本带过来进行翻译。
这里同样须要留神：contextMenus 须要在 manijest.json 中注册。
到这里咱们的性能就曾经齐全实现了。因为才思不够麻利，临时没什么更加实用功能的研发。心愿各位能够才思泉涌给我一些倡议~~
最初
网上一些比拟全的教程 +API
谷歌插件开发 API
插件开发指南
最初谢谢大家！
正文完
