前言
最近在钻研一些比拟有意思的货色，前几天玩了一个微信聊天机器人，丑化图片的，明天想写个浏览器插件。话不多说间接开始。
注释
想写一个浏览器插件比较简单，跟咱们平时开发我的项目一样，首先创立一个文件夹，保障上面会有一个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、version3个是必不可少的，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
插件开发指南
最初谢谢大家！