Chrome插件-浏览器插件开发-插件安装-插件调试-概述

文章目录

1.简述
2.弹出界面
3.背景界面
4.插件安装
5.调试
6.打包
7.作者答疑

现今浏览器可以实现大部分数据信息的展示，提供给读者进行浏览，开发浏览器插件，可以有效实现对获取的数据进行进一步的加工和使用。本文介绍如何开发在chrome浏览器中的插件开发。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。本文主要图解插件开发的一些基本概念。

1.简述

Chrome插件没有严格的项目结构要求，只要保证本目录有一个manifest.json即可。一个简单的插件目录如下所示：

它由一个配置文件manifest.json，一个背景界面background.html，一个弹出界面popup.html和一个选项界面options.html组成，其中最为关键的是配置文件，源代码如下所示：

{"manifest_version": 2,"name": "股票信息","version": "1.0.0","description": "股票信息","background":{//背景页面"page": "background.html"},"browser_action":{"default_icon": "img/app.png","default_title": "股票信息",//弹出页面"default_popup": "popup.html"},"content_scripts":[{"matches": ["<all_urls>"],"js": ["js/jquery-3.6.0.min.js"],"run_at": "document_start"}],"permissions":["contextMenus","tabs","notifications","webRequest","webRequestBlocking","storage","http://*/*","https://*/*"],"homepage_url": "https://www.zhiliaos.com"
}

2.弹出界面

在浏览器的上端图标点击弹出的按钮，如下图所示：

3.背景界面

显示关键信息界面，如下图所示：

4.插件安装

打开界面，如下图所示：

打开开发者模式，选择加载插件，如果修改了插件，点击重载按钮更新，如下图所示：

5.调试

打开对应页面，按普通页面模式进行调试，如下图所示：

6.打包

选择打包扩展程序，选择对应的扩展文件夹进行打包，如下图所示：

7.作者答疑

有疑问，请留言。

Chrome插件-浏览器插件开发-插件安装-插件调试-概述相关推荐

Google Chrome 11 浏览器下Flash Debug 插件无效的解决办法
谷歌浏览器用起来就一个字爽所以本人在开发Flex的时候也希望能用chrome来调试自己的flex程序,但是发现无法连接Debug插件,下面总结可能出现问题的地方: 1.首先你要确定是否安装了 ...
jenkins 安装插件失败_Jenkins 自动化安装插件
手工安装 Jenkins 插件的方法通常,我们有两种方法安装 Jenkins 插件.第一种方法是到 Jenkins 插件管理页面搜索插件,然后安装.第二种方法是上传 Jenkins 插件的 hpi ...
wordpress安装jquery插件失败_wordpress怎么安装插件
wordpress想要扩展功能,就可以去下载不能的插件,安装了这些插件以后,就可以做相关的操作了,插件有很多,并不是所有的插件都能用到在后台,点击外观-插件-就可以看到很多插件,就可以看到很多插件 ...
【chorme插件开发】第一节：chrome内核浏览器插件开发的说明
浏览器插件开发说明教程说明的是chrome谷歌浏览器内核浏览器的插件开发,适用于QQ浏览器.搜狗浏览器.360浏览器.谷歌浏览器等相关使用chrome开源内核的浏览器的插件开发.不适用火狐浏览器.欧 ...
10分钟带你入门chrome(谷歌)浏览器插件开发
整理chrome插件有哪些能力,插件开发入门,整理文档. chrome谷歌浏览器插件开发,听上去很高大上,其实只要熟悉HTML.CSS.JS即可开发,插件也是将html页面渲染出来并执行js脚本而已. ...
当开发帆软插件得时候如果安装插件遇到 ***插件版本过低请安装高版本插件
当我们做了某个插件后,安装时提示插件版本过低请安装高版本插件,很可能你扩展得Provider上加了如下注解: @API(level = 2 ) 而这个Provider得方法currentAPILe ...
sublime下载php插件安装插件,Sublime使用，安装插件
1.安装Package Control 从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代码粘贴进去并 enter 执行,不 ...
在Visual Studio中使用GitHub扩展插件【1】——安装插件新建仓库
文章目录前言准备工具操作步骤安装Extension 新建Repository 新建Solution 将已有Solution添加到Git中 Commit & Sync & Pus ...
谷歌(Chrome)浏览器插件开发教程
谷歌浏览器插件是一种小型的用于定制浏览器体验的程序.通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了. 开发谷歌浏览器插件 ...