Chrome扩展开发攻略:Chrome扩展插件是如何开发的?

Chrome扩展开发攻略:Chrome扩展插件是如何开发的?

前言当你看到这篇文章说明你已经很好奇Chrome的各种扩展（插件）是如何开发创造出来的，你或许也在思考自己该从何下手才能掌握浏览器扩展的开发。那么，这篇文章将用一个Demo尝试满足你的好奇并解答你的疑惑。
基本知识HTML标签的基本认识
CSS选择器和基本布局样式
JavaScript基本语法知识以及Dom操作
前端基础十分简单，如果你暂时没有前端开发的基本知识可以到MDN进行学习。
浏览器扩展WebExtensions扩展的能力提升或补充网站的功能，比如稀土掘金为各位开发者提供的工具插件，提供包括记笔记等功能。
操控网页内容，诸如去除页面广告类扩展。
添加开发工具，有Vue和React的devTools，以及前端较为广泛使用的FeHelper。
为网页注入脚本，有用户脚本管理工具Tampermonkey。</p>扩展中的文件.├──icon│├──icon_120x120.png//不同大小的图片，用于在工具栏等处显示│├──icon_48x48.png│└──icon_80x80.png├──manifest.json//扩展必须包含的json文件，可以使用“//”写行注释├──popup.html//弹出页面├──scripts│├──background.js//后台运行的脚本文件│└──popup.js//用于操作Dom└──styles└──inline.css//样式manifest.json这是唯一一个在每个扩展里面必须存在的文件。它包含了关于这个扩展插件基本的元数据（metadata），比如它的名字、版本和所需权限。并且，它也对扩展中其他文件进行了链接。
{"manifest_version":2,//指定扩展使用的manifest.json的版本"name":"文章浏览量增加器",//扩展的名称"short_name":"upCount","description":"自动刷新文章的浏览量",//扩展的描述信息"version":"0.1.0",//版本号"background":{//引入一个或者多个后台脚本文件，以及一个可选的后台页面文件"scripts":["./scripts/background.js"//引入的路径],"persistent":true//是否持续运行},"browser_action":{"default_icon":"./icon/icon_120x120.png","default_title":"文章浏览量增加器","default_popup":"./popup.html"},"icons":{"120":"./icon/icon_120x120.png","80":"./icon/icon_80x80.png","48":"./icon/icon_48x48.png"},"permissions":["activeTab","tabs","http://*/*","https://*/*"]}popup.html弹出的页面inline.css引入的样式文件
</p>popup.js用于操作Dom和与background.js通信
//获取Dom以便对其操作constsaveEl=document.querySelector('#save');conststartEl=document.querySelector('#start');constpauseEl=document.querySelector('#pause');consturlField=document.querySelector('#urlField');consttbody=document.querySelector('#urlTableData');constresetEl=document.querySelector('#reset');consttfootEl=document.querySelector('tfoot');//获取本地存储数据functiongetSites(){conststr=window.localStorage.getItem('sites')||'[]';returnJSON.parse(str);}//URL校验方法functioncheckURL(url){consturlReg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/;returnurlReg.test(url);}functionbuttonDisable(sites){if(sites.length){tfootEl.classList.add('hidden');resetEl.removeAttribute('disabled');startEl.removeAttribute('disabled');pauseEl.removeAttribute('disabled');}else{tfootEl.classList.remove('hidden');resetEl.setAttribute('disabled','disabled');startEl.setAttribute('disabled','disabled');pauseEl.setAttribute('disabled','disabled');}}functioncreateTbodyContent(sites){tbody.innerHTML='';for(letitemofsites){consttrEl=document.createElement('tr');trEl.innerHTML=`<tdclass='urlCol'title='${item}'>${item}</td><tdclass='operationCol'><divclass='del'id='${item}'title='删除${item}'>删除</div></td>`tbody.prepend(trEl)}}//接受background返回值并存储,同时确定按钮是否disabledfunctioncallbackSites(res){constsites=JSON.parse(res).sites;createTbodyContent(sites);window.localStorage.setItem('sites',JSON.stringify(sites));buttonDisable(sites)}//根据本地获取的url生成表格createTbodyContent(getSites());buttonDisable(getSites());//全局点击事件绑定document.addEventListener("click",(e)=>{if(checkURL(e.target.id)){chrome.runtime.sendMessage({type:'del',data:e.target.id},callbackSites);}switch(e.target.id){case'save':{if(urlField.value.trim()===''){alert('请输入URL');return;}letresult=checkURL(urlField.value.trim())if(result){chrome.extension.sendMessage({type:'save',data:urlField.value.trim()},(res)=>{callbackSites(res);urlField.value='';});}else{alert('你输入的URL不正确')}break;}case'start':{chrome.tabs.query({active:true,currentWindow:true},(tabs)=>{chrome.extension.sendMessage({type:'start',windowId:tabs[0].windowId,tabId:tabs[0].id,},(res)=>{window.localStorage.setItem('status',JSON.stringify(JSON.parse(res).status));console.log(JSON.parse(res).status);})})break;}case"pause":{chrome.extension.sendMessage({type:'pause'})break;}case"reset":{chrome.extension.sendMessage({type:'reset'},callbackSites)}}})