前言最近在研究一些有趣的东西。前几天玩了一个微信聊天机器人来美化图片。今天想写一个浏览器插件。话不多说，我们直接开始吧。写个浏览器插件比较简单。和我们平时的开发项目一样，先创建一个文件夹，保证下面会有一个manifest.json文件。这是我的项目结构：注意：这里会有一个小坑，mainfest.json文件的名字一定要写对，否则在开发者模式下加载插件会报错。接下来是基本配置{"name":"IRONMAN","version":"1.0.0","description":"我是钢铁侠","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是必不可少的，推荐使用description和icons。这里是大佬贴出来的分析：{//manifest文件的版本，这个必须要写，必须是2"manifest_version":2,//插件名称"name":"demo",//Plugin"version":"1.0.0",//Plug-indescription"description":"SimpleChromeextensiondemo",//Icons,偷懒没关系，全部用一个尺寸"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":"ThisisanexampleChromeplugin","default_popup":"popup.html"},//仅当特定页面出现时显示的图标reopened/*"page_action":{"default_icon":"img/icon.png","default_title":"我是pageAction","default_popup":"popup.html"},*///需要的JS直接注入页面"content_scripts":[{//"matches":["http://*/*","https://*/*"],//""表示匹配所有地址"matches":[""],//多个JS按Sequentialinjectionof"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",//label"notifications",//notification"webRequest",//webrequest"webRequestBlocking","storage",//插件本地存储"http://*/*",//网站that可以通过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之后的配置页面，如果两个都写，新版Chrome只认后面一个"options_ui":{"page":"options.html",//添加一些默认样式，推荐使用"chrome_style":true},//注册一个关键字到地址栏提供搜索建议，只能设置一个关键字"omnibox":{"keyword":"go"},//默认语言"default_locale":"zh_CN",//devtools页面入口，注意只能指向HTML文件，不能指向JS文件"devtools_page":"devtools.html"}下面一步步介绍我是如何实现的两个插件的功能1.注册监听事件在插件的后台脚本中注册监听事件：加载脚本后，会触发监听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:[newchrome.declarativeContent.PageStateMatcher({pageUrl:{hostEquals:'www.baidu.com'},})],动作:[新的chrome.declarativeContent.ShowPageAction()]}]);});});2、注册权限因为我们后台使用了chrome.storage等API，所以需要在manifest.json中注册“权限”：["storage","declarativeContent","tabs","activeTab","contextMenus",],3.在扩展页面刷新我们的扩展点击查看后台页面，可以看到打印的内容4.在引入ICON图标之前发布的配置文件中已经配置了图标，钢铁侠的图标也可以在上面的屏幕截图中可以看到。所以这里有两点需要注意：对于未压缩的扩展，只能使用png图标。图标可以适配不同大小，如果你懒，一个都用。5.引入弹出页面。我简单的在页面中写了两个功能：改变页面颜色和恢复页面颜色。<元名称="viewport"content="width=device-width,initial-scale=1.0">文档点击变成虾皮红修复
</body>js文件如下：letchangeColor=document.getElementById('btn');letclear=document.getElementById('clear');chrome.storage.sync.get('color',function(数据){changeColor.style.backgroundColor=data.color;changeColor.setAttribute('value',data.color);});changeColor.onclick=function(element){letcolor=element.target.value;chrome.tabs.query({active:true,currentWindow:true},function(tabs){chrome.tabs.executeScript(tabs[0].id,{code:'document.body.style.backgroundColor="'+颜色+'";'});});};clear.onclick=(ele)=>{chrome.tabs.query({active:true,currentWindow:true},function(tabs){letcolor='#fff'chrome.tabs.executeScript(tabs[0].id,{code:'document.body.style.backgroundColor="'+color+'";'});});}使用chrome.storage.sync.get获取内存中的颜色使用chrome.tabs.executeScript往页面注脚本。需要注意的是，我们使用的所有chromeAPI都需要在manifest.json中进行配置。现在我们可以在百度页面播放我们的插件了！点击后外观也可以恢复颜色。这样第一个改色恢复网站的功能就完成了。接下来，我想做一个翻译功能。6.继续添加后台脚本chrome.contextMenus.create({id:"9527",contexts:['selection'],title:'让钢铁侠翻译：%s',//显示的文字，除非是"separator"类型否则需要此参数，如果类型为"selection"，则可以使用%s显示选中的文本})console.log(chrome.contextMenus)chrome.contextMenus.onClicked.addListener((info,tab)=>{constquery=info.selectionText;consturl="https://fanyi.baidu.com/translate?#est/zh/"+query;chrome.tabs.create({url:url});})这个脚本的作用是在页面上创建一个右键操作菜单。如图所示，我们可以添加一个监听事件，在点击时对相应的URL做一些事情。例子中我给选中的文字添加了翻译功能，通过监听点击事件跳转到百度翻译，把选中的文字拿过来翻译。这里还要注意：contextMenus需要在manijest.json中注册。至此我们的功能已经完全实现。由于匠心不足，暂时没有研发更多实用功能。希望大家多多提建议~~最后，网上一些比较全面的教程+API谷歌插件开发API插件开发指南最后，谢谢大家！
