谈一谈|谷歌插件入门

简介: 谈一谈|谷歌插件入门

1 谷歌插件简介

谷歌插件及ChormeExtensions是一个小型的程序,它可以修改并增强chrome浏览器的功能。可以使用web技术(如HTMLCSSJavaScript)来编写。一个扩展就是一个压缩的包,里面有HTMLCSSJavaScript、图片或者任何你需要的资源。从本质上来讲,扩展就是一个web页面,它也可以使用浏览器为web页面提供的API

XMLHttpRequestJSONHTML5等。

 

2 插件基础

2.1 创建manifest.json文件

任何谷歌插件都必须拥有的文件,这个文件的作用简单来说就是这个插件的组成清单,在这个清单上大约能看的这个插件的大体作用

代码展示:

{

"manifest_version":2

   "name": "我的扩展",//扩展名字

   "version": "1.0",//扩展版本

   "description": "第一次没啥好说的.",//扩展描述

   //浏览器小窗口

   "browser_action": {

     "default_icon": "icon.png",//小窗口图标

     "default_popup": "popup.html"//小窗口内容

   },

   //扩展图标

   "icons":{

     "16": "images/get_started16.png",

     "32": "images/get_started32.png",

     "48": "images/get_started48.png",

     "128": "images/get_started128.png"

     },

}

下面是manifest.json的配置项

(1)Icons

插件的程序图标,可以一个或多个16的是插件页面图标48是管理界面图标

128是安装界面图标

(2)brower_action和page_action

这两个功能都是用来处理扩展在浏览器工具栏上的表现

区别是前者啥地方都能用后者是特定页面才能用

(3)default_popup

在用户点解扩展图标时可以设置弹出一个popup页面这个页面可以说是一个简单的网页也可以有自己的js脚本点击图标时运行此脚本

(4)Permissions

background里使用一些chrmoeapi,需要授权才能使用。

2.2 background

background可以认为是插件运行是在浏览器中的一个后台脚本,与当前浏览页面无关。

Backgropund包括(pagescriptspersistent

Page是后台网站的主页(不一定要求有)

Scripts就是后台引入的脚本文件

Persistent就是后台程序是否持久运行

2.3 content script

这部分脚本,简单来说是插入到网页中的脚本。它具有独立而富有包容性。所谓独立,指它的工作空间,命名空间,域等是独立的,不会说跟插入到的页面的某些函数和变量发生冲突。所谓包容性,指插件把自己的一些脚本(content script)插入到符合条件的页面里,作为页面的脚本,因此与插入的页面共享dom的,即用dom操作是针对插入的网页的,在这些脚本里使用的window对象跟插入页面的window是一样的。

主要用在消息传递上(使用postMessageonmessage


3 成果

3.1成果展示

3.2成果展示

3.3成果展示


4 总结

谷歌插件开发必须要有一定的前端开发基础,而我的前端基础才处于起步阶段,只初步了解一些静态网页的制作。所以还不能为其添加后台脚本,并且无法实现前端后台脚本之间的信息交流。总的来说,我能实现的只有插件的安装与小图标的设置与工具栏页面的简单显示。



目录
相关文章
|
2月前
|
算法 前端开发 语音技术
推荐6款2023年爆火的开源项目,你值得一试!
推荐6款2023年爆火的开源项目,你值得一试!
推荐6款2023年爆火的开源项目,你值得一试!
|
10月前
|
Web App开发 前端开发 JavaScript
全网最详细的谷歌插件开发小册📚(1)
Chrome插件 Chrome插件,或称为扩展,是一种专为Google Chrome浏览器设计的软件应用程序。插件可以让开发者向浏览器中添加新的特性或功能,或者对现有的功能进行增强或改变。从改变浏览器的视觉主题,到阻止广告,从管理密码到加强网络安全,Chrome插件的使用场景几乎无所不包,给用户带来高度定制化的浏览体验。 插件运行在Chrome浏览器的沙盒环境中,这意味着它们在浏览器中执行,但不会影响到计算机的其他部分。这种设计保证了浏览器的稳定性和用户的安全。 插件的开发主要依赖于Web技术,包括HTML、CSS和JavaScript,因此,任何有Web开发经验的人都能够相对容易地开始Chr
652 0
|
10月前
|
Web App开发 存储 监控
全网最详细的谷歌插件开发小册📚(2)
使用tabs API chrome.tabs API 允许插件操作浏览器的标签页,例如创建新的标签页,关闭标签页,切换标签页,修改标签页的URL等。以下是一个创建新标签页的示例:
293 1
|
数据可视化 数据安全/隐私保护 Python
开发了一款小众开源工具,没想到还有这么多人用!
由于 Gitee Pages 的访问速度很快,很多朋友会选择 Gitee Pages 部署项目(如:个人博客、开源项目国内镜像站点)。但是它不像 GitHub Pages 那样,一提交代码就能自动更新 Pages,因为 Gitee 的自动部署属于 Gitee Pages Pro 的服务。
277 0
开发了一款小众开源工具,没想到还有这么多人用!
|
Linux Windows
事半功倍!强烈推荐这款学术利器!
在校学生或者从事科研相关工作的同学,经常会和学术论文打交道。 例如,毕业生在完成毕业论文的过程中,会阅读大量相关领域的学术论文。
事半功倍!强烈推荐这款学术利器!
|
搜索推荐 定位技术 iOS开发
用了 Google 这么久,竟然不知道还有这些高级技巧
搜索引擎基本上是我们每个人天天都要用的东西,但大部分人使用搜索引擎的时候多半是输入关键字之后直接回车,那么你是否遇到过在试了各种关键字之后依然没找到自己想要的答案的时候呢,搜索引擎是智能的,同时也是不智能的,比如我们输入关键字苹果,它怎么知道你是想找水果苹果,还是想找苹果手机呢。
123 0
用了 Google 这么久,竟然不知道还有这些高级技巧
|
IDE Apache 开发工具
盘点开发者最喜爱的十大开源Xcode插件
Xcode IDE拥有着诸如导航、重构、校准等众多非常高大上的工具,而予以辅助的插件更是在Xcode的基础上对相关功能进行改进与扩展。在应用开发过程中,通过开源包管理器Alcatraz对插件进行安装管理,打造最为强大的开发环境,早已成为开发者们的必备功课。本文总结介绍了备受开发者喜爱的10款开源Xcode插件,涉及代码编辑、注释、管理等各个方面。
696 0
盘点开发者最喜爱的十大开源Xcode插件
|
安全 NoSQL 程序员
开源代码分析技巧之四——国外技术社区提问
在分析源码的时候,我们或多或少都会遇到过技术瓶颈。如果不突破这个瓶颈,接下来的研究就无法继续进行。并且不止对自己是瓶颈、对团队人员、技术顾问、资深人士都没有很好的解决办法。这时候,不妨试一下给源代码作者团队邮件提问。
110 0
|
Web App开发 JavaScript 前端开发
谷歌最新开源前端框架了解一下?前端小白都能看懂的8本书
跨平台、免费、开源,谷歌又搞“大新闻”?谷歌最新前端开发框架Flutter1.0版本已发布,可以极速构建漂亮的原生应用。各位前端大神都在用什么开发?下面八本书会帮助你快速入门,成为顶尖前端!
4461 0
|
前端开发 JavaScript API
如何阅读大型前端开源项目的源码,授人以鱼不如授人以渔
目前网上有很多「XX源码分析」这样的文章,不过这些文章分析源码的范围有限,有时候讲的内容不是读者最关心的。同时我也注意到,源码是在不断更新的,文章里写的源码往往已经过时了。因为这些问题,很多同学都喜欢自己看源码,自己动手,丰衣足食。
1707 0