谈一谈|谷歌插件入门

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

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 总结

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



目录
相关文章
|
1月前
|
人工智能 安全 机器人
国内怎么使用claude?这篇文章教会你!
渴望体验 Anthropic 公司的杰作
144 1
|
6月前
|
Java Apache Android开发
Struts 2的秘密武器:揭秘社区中隐藏的学习宝藏,让你从新手到高手的不归路!
【8月更文挑战第31天】Struts 2学习资源丰富,除官方文档外,TutorialsPoint和W3Schools等网站提供详尽教程;《Apache Struts 2实战》等书籍含全面实例。Udemy、Pluralsight及YouTube上视频课程众多,Apache Software Foundation亦有网络研讨会。实践方面,GitHub上的开源项目及个人小项目都是好选择。寻求帮助可访问Apache官方论坛、Stack Overflow等平台。
56 0
|
9月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
206 2
|
Web App开发 存储 监控
全网最详细的谷歌插件开发小册📚(2)
使用tabs API chrome.tabs API 允许插件操作浏览器的标签页,例如创建新的标签页,关闭标签页,切换标签页,修改标签页的URL等。以下是一个创建新标签页的示例:
499 1
|
Web App开发 前端开发 JavaScript
全网最详细的谷歌插件开发小册📚(1)
Chrome插件 Chrome插件,或称为扩展,是一种专为Google Chrome浏览器设计的软件应用程序。插件可以让开发者向浏览器中添加新的特性或功能,或者对现有的功能进行增强或改变。从改变浏览器的视觉主题,到阻止广告,从管理密码到加强网络安全,Chrome插件的使用场景几乎无所不包,给用户带来高度定制化的浏览体验。 插件运行在Chrome浏览器的沙盒环境中,这意味着它们在浏览器中执行,但不会影响到计算机的其他部分。这种设计保证了浏览器的稳定性和用户的安全。 插件的开发主要依赖于Web技术,包括HTML、CSS和JavaScript,因此,任何有Web开发经验的人都能够相对容易地开始Chr
996 0
|
测试技术 BI Android开发
移动app自动化测试工具发展历程--完整版
移动app自动化测试工具发展历程--完整版
234 0
移动app自动化测试工具发展历程--完整版
|
设计模式 SQL 缓存
真香!Github一夜爆火,阿里性能优化不传之秘终于开源
性能调优,是从开发岗跃迁至架构岗的拦路虎。如果你是一个小白,那么恭喜你性能优化这个东西你暂时还不需要扛着。但如果你是公司的中坚力量,想把技术水平往架构层面靠近,那么性能优化这个东西你必须要扛下来,并且解决它。
|
机器学习/深度学习 人工智能 前端开发
黑科技:进阶必备,推荐两款自动生成代码神器
最近两年,在互联网行业各大技术峰会上,都能看到关于工程效能这个概念,从侧面也反映出了研发效能已经逐渐被各企业所重视!
504 0
黑科技:进阶必备,推荐两款自动生成代码神器
|
文字识别 搜索推荐 Windows
5款让人惊艳的黑科技软件,只要用过一次就会爱上
今天要给大家推荐5款让人惊艳的黑科技软件,每个都是同类软件中的个中翘楚,请大家给我高调地使用起来,不用替我藏着掖着。
490 0
5款让人惊艳的黑科技软件,只要用过一次就会爱上
|
编解码 移动开发 数据可视化
自研开源项目正式动工,顺便分享 10个酷炫后台模板
自研开源项目正式动工,顺便分享 10个酷炫后台模板
350 0
自研开源项目正式动工,顺便分享 10个酷炫后台模板