如何制作一个Chrome扩展程序.pptx
《如何制作一个Chrome扩展程序.pptx》由会员分享,可在线阅读,更多相关《如何制作一个Chrome扩展程序.pptx(21页珍藏版)》请在冰豆网上搜索。
chromeextension谷歌浏览器扩展程序,在看PPT之前教你区分“插件”与“扩展程序”,插件对应的是“Plugin”,扩展对应的是“Extension”,所以它俩背后其实是两个完全不同的词。
插件并不会增加浏览器自身的功能,可调用操作系统的API,并且不同操作系统的插件一般不能混用。
我们经常遇到的插件有:
Flash插件、PDF插件、Java插件等等。
相比较之下,扩展则可以增加浏览器本身的功能,也可以调用浏览器的API,并且同一个浏览器的扩展一般也都是可以跨操作系统使用的。
PS:
其实多数人平时并没有区分这两个词,包括我自己,vs,什么是浏览器扩展程序?
GoogleChromeExtensionsarebrowserextensionsthatmodifytheGoogleChromebrowser.TheseextensionsarewrittenusingwebtechnologieslikeHTML,JavaScript,andCSS.通俗的讲,浏览器扩展程序就是一个通过调用浏览器API实现扩展浏览器功能的小程序。
但这又不是我们通常讲的可执行程序。
它其实就是一个文件包,直接加载到浏览器里面就可以工作。
浏览器扩展程序可以用来干什么?
当浏览器无法完成你想做的事,或者网站本身功能存在局限时。
你不妨考虑自己做个扩展来帮助你。
情景1:
读英文网页的时候有的单词不认识,有的句子不会翻译,又不想打开翻译软件一个个查。
(某些浏览器并不自带翻译功能)情景2:
访问网站时总会弹出各种广告,关都关不掉。
(浏览器没有屏蔽广告的功能)情景3:
嫌某个网页的背景太丑了,我想自己给他设置一个背景。
(该网站没有为用户提供背景风格切换功能)遇到以上问题,你不必忍气吞声,现有的一键翻译扩展程序,广告屏蔽插件(扩展程序)等均可以解决。
用户如何使用扩展程序?
Optionspage,Defaultpopup,ContextMenus,开始制作你自己的扩展程序!
扩展程序文件目录分析,谷歌翻译,多功能翻译,迅雷下载插件,manifest.json(清单文件),manifest_version:
2,name:
我的应用,version:
版本字符串,icons:
.,browser_action:
default_icon:
19:
images/icon19.png,38:
images/icon38.png,default_title:
GoogleMail,default_popup:
popup.html,background:
scripts:
background.js,content_scripts:
matches:
http:
/css:
mystyles.css,js:
jquery.js,myscript.js,options_page:
aFile.html,permissions:
.,background,default_popup,content_scripts消息传递,Popuppage,Optionpage,Etc.,BackgroundPage,ContentScripts,PageAction,BrowserAction,Background(后台页面),每个扩展程序最多只能有一个“backgroundpage”后台网页是一个HTML页面(也可以只是一个脚本),在扩展程序的进程中运行,整个生命周期中都存在。
主要用于管理浏览器本身的事务或状态。
如监听点击扩展图标事件,监听右键点击相应菜单,创建菜单,更换图标,对popup页面的请求做出相应等,Popuppage(弹出内容),点击浏览器右上角的扩展图标时,有时会弹出一个页面,这是HTML页面,是default_popup设置的。
如果该参数为空,则默认不弹出页面。
我们可以通过这个页面进行扩展程序的设置,或者查看扩展的工作状态。
ContentScripts(内容脚本),内容脚本是在网页的上下文中运行的JavaScript文件,它们可以通过标准的文档对象模型(DOM)来获取浏览器访问的网页详情,或者作出更改。
换句话说,ContentScripts可以直接操控用户打开的网页。
可以对其DOM作任何操作,但是由于它与网页自带的脚本文件处于不同环境下。
所以不能对用户网页的方法和变量进行访问。
一个简单的实例,自动转跳,文件目录和manifest参数,BackgroundPageCode,我的工作,Lofter标签批量添加器,网页元素模糊工具,Lofter标签批量添加器,每添加一个标签需要点击1次,加满标签需要点击10次,将标签分类打包存放,选中类别名称,则把相应标签批量加入标签框,Lofter标签管理页:
OptionsPage,网页元素模糊工具,在不想让他人看到的隐私信息上点击右键,选择“模糊处理”,这样就产生了模糊效果,这样可以直接截图保存。
避免了使用画笔工具的二次涂抹。
网页元素模糊器弹出页面:
PopupPage,DESIGNBY:
Charry,THANKS,完,