谈一谈|谷歌插件入门

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

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天前
|
人工智能 安全 机器人
国内怎么使用claude?这篇文章教会你!
渴望体验 Anthropic 公司的杰作
20 1
|
5月前
|
Java Apache Android开发
Struts 2的秘密武器:揭秘社区中隐藏的学习宝藏,让你从新手到高手的不归路!
【8月更文挑战第31天】Struts 2学习资源丰富,除官方文档外,TutorialsPoint和W3Schools等网站提供详尽教程;《Apache Struts 2实战》等书籍含全面实例。Udemy、Pluralsight及YouTube上视频课程众多,Apache Software Foundation亦有网络研讨会。实践方面,GitHub上的开源项目及个人小项目都是好选择。寻求帮助可访问Apache官方论坛、Stack Overflow等平台。
49 0
|
8月前
|
自然语言处理 安全 API
文心一言插件开发(第三篇
文心一言插件开发(第三篇
275 0
|
Web App开发 存储 监控
全网最详细的谷歌插件开发小册📚(2)
使用tabs API chrome.tabs API 允许插件操作浏览器的标签页,例如创建新的标签页,关闭标签页,切换标签页,修改标签页的URL等。以下是一个创建新标签页的示例:
485 1
|
Web App开发 前端开发 JavaScript
全网最详细的谷歌插件开发小册📚(1)
Chrome插件 Chrome插件,或称为扩展,是一种专为Google Chrome浏览器设计的软件应用程序。插件可以让开发者向浏览器中添加新的特性或功能,或者对现有的功能进行增强或改变。从改变浏览器的视觉主题,到阻止广告,从管理密码到加强网络安全,Chrome插件的使用场景几乎无所不包,给用户带来高度定制化的浏览体验。 插件运行在Chrome浏览器的沙盒环境中,这意味着它们在浏览器中执行,但不会影响到计算机的其他部分。这种设计保证了浏览器的稳定性和用户的安全。 插件的开发主要依赖于Web技术,包括HTML、CSS和JavaScript,因此,任何有Web开发经验的人都能够相对容易地开始Chr
975 0
|
Java 编译器 Maven
谷歌开源项目ProtoBuf一探(基础环境配置)
谷歌开源项目ProtoBuf一探(基础环境配置)
172 0
谷歌开源项目ProtoBuf一探(基础环境配置)
|
设计模式 SQL 缓存
真香!Github一夜爆火,阿里性能优化不传之秘终于开源
性能调优,是从开发岗跃迁至架构岗的拦路虎。如果你是一个小白,那么恭喜你性能优化这个东西你暂时还不需要扛着。但如果你是公司的中坚力量,想把技术水平往架构层面靠近,那么性能优化这个东西你必须要扛下来,并且解决它。
|
安全 NoSQL 程序员
开源代码分析技巧之四——国外技术社区提问
在分析源码的时候,我们或多或少都会遇到过技术瓶颈。如果不突破这个瓶颈,接下来的研究就无法继续进行。并且不止对自己是瓶颈、对团队人员、技术顾问、资深人士都没有很好的解决办法。这时候,不妨试一下给源代码作者团队邮件提问。
137 0
|
Web App开发 JavaScript 前端开发
谷歌最新开源前端框架了解一下?前端小白都能看懂的8本书
跨平台、免费、开源,谷歌又搞“大新闻”?谷歌最新前端开发框架Flutter1.0版本已发布,可以极速构建漂亮的原生应用。各位前端大神都在用什么开发?下面八本书会帮助你快速入门,成为顶尖前端!
4534 0

热门文章

最新文章