位置: IT常识 - 正文

Chrome插件开发教程(chrome 浏览器插件开发)

编辑:rootadmin
Chrome插件开发教程

推荐整理分享Chrome插件开发教程(chrome 浏览器插件开发),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:chrome插件开发工具,chrome插件使用,chrome插件开发文档官方,chrome插件使用,chrome 浏览器插件开发,chrome插件开发工具,chrome插件开发文档官方,chrome插件开发视频教程,内容如对您有帮助,希望把文章链接给更多的朋友!

本文将详细介绍如何开发一款Chrome插件,包括插件的介绍、开发配置与调试。不包含插件的发布、审核等内容。

通过阅读本教程,你能够:

了解浏览器器插件,这里专指 Chrome Extension(CE)的基本知识和运行原理了解如何开发CE的界面和逻辑调试插件,根据错误信息做出修复什么是浏览器插件

浏览器插件是一种可增强网页功能的嵌入程序。有了插件,用户的使用不再局限于网页,还可以享用插件带来的增强功能。用户只需到官方插件商店搜索、下载、安装即可使用,非常便捷。 插件商店由不同的浏览器厂商维护,比如你要在Chrome上使用插件,要到Chrome Webstore下载安装。Firefox上亦然。

创建 manifest

新建文件夹,命名CE-Demo,增加一个manifest.json的文件,内容如下:

{ "name": "CE-Demo", "description": "CE-Demo's description shows here!", "version": "0.0.1", "manifest_version": 3}复制代码

该文件描述了插件的基本属性信息、代码的运行路径等。后面我会不断地丰富其内容。

加载插件

这里我们直接载入整个目录(尚未打包):

1.地址栏输入chrome://extensions进入插件管理页面。 2.选中界面右上角的开发者模式 3.点击左上角的加载已解压的扩展程序,并选中刚才的插件文件夹

插件已经成功载入。 可以点击扩展程序按钮,鼠标移动到插件右侧的固定按钮,固定到标签栏里。

标签栏多了个icon图标,点击可唤出插件的popup界面:

插件不会热更新,记得每次修改代码后点击刷新icon载入最新代码

添加功能

我们将实现一个简易版的历史记录插件。

注册 background.js

它是一种后台脚本,浏览器会在插件安装或重新加载时扫描它并初始化(事件的监听等)。它是整个插件的重要组成部分。必须在manifest里配置。

{"name": "CE-Demo", "description": "I am a demo", "version": "0.0.1", "manifest_version": 3, "background": { "service_worker": "background.js" }}复制代码Chrome插件开发教程(chrome 浏览器插件开发)

同时在插件目录添加background.js文件,包含以下代码:

chrome.runtime.onInstalled.addListener(() => { console.log('后台脚本运行成功!') chrome.storage.sync.set({ history: [] });});复制代码

代码将在插件安装完毕后,做两件事:

1.打印一段日志信息 2.通过storage API 设置一个初始值为空数组的存储字段。

要使用storage,需在manifest添加该权限:

{ ... "permissions": ["storage"] ...}复制代码

点击server worker链接打开devtools界面,即可看到日志信息:

添加历史界面

这里,我们选择popup的交互形式:当用户点击标签栏里插件图标时展示用户的访问历史(仅含插件安装后的历史)。 我们需要覆盖默认的popup界面,修改manifest:

{ ... "action": { "default_popup": "popup.html" }, ...}复制代码

在插件目录新增三个文件:popup.html、popup.js、popup.css:

<!DOCTYPE html><html> <head> <link rel="stylesheet" href="popup.css"> </head> <body> <div id="container"> 暂无浏览记录~ </div> <script src="popup.js"></script> </body></html>复制代码chrome.storage.sync.get("history", ({ history }) => { const contentHTML = history.length === 0 ? "暂无浏览记录~" : history .map((record) => { return ` <div class="item-box"> <div class="item-box_time">${record.time}</div> <a class="item-box_text" href="${record.url}">${record.title}</a> </div> `; }) .join(""); document.querySelector('#container').innerHTML = contentHTML});复制代码

上述代码先从storage里读取history内容,再将内容组装成html插入到文档中。

记录浏览历史

插件提供了内容脚本 Content Scripts(CS)的概念,当用户打开并访问某个网站时,浏览器将CS注入网站的文档里执行。 因此,我们需在CS脚本里编写记录的逻辑。 往manifest里添加CS:

{ ... "content_scripts": [ { "matches": ["*://*/*"], "js": ["content/index.js"] } ]}复制代码

插件目录里新增目录content并添加index.js文件:

chrome.storage.sync.get("history", ({ history }) => { console.log("history--->", history); history.unshift({ title: document.title, url: location.href, time: new Date().toLocaleString(), }); chrome.storage.sync.set({ history });});复制代码

上述代码获取访问的页面的 标题,url,访问时间存储到 storage里。 随便访问几个网页后,点击插件图标可以看到:

添加自定义icon 默认icon比较简陋,我们用一张熊猫图片作为插件的icon。 新增assets目录,放一个icon.png文件。 修改manifest:

{ "action": { "default_icon": { "16": "/assets/icon.png" } }}复制代码

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 提取码: yu27 百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址: http://github.crmeb.net/u/defu

Github 地址: http://github.crmeb.net/u/defu

链接:https://juejin.cn/post/7122439073058258958

本文链接地址:https://www.jiuchutong.com/zhishi/298298.html 转载请保留说明!

上一篇:【Javaweb学习笔记】在Eclipse中创建Web项目(javaweb总结笔记)

下一篇:Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】(最全vue项目实战)

  • 实收资本印花税按次还是按年
  • 房产税计税依据是什么
  • 国际货运代理企业应当遵循哪些原则
  • 个税申报数据有误,如何快速更正
  • 综合所得申报是报上个月的吗
  • 累计个税是每年累计吗
  • 小规模纳税人报税前需要做什么
  • 小规模纳税人不开票收入怎么报税
  • 收到投资款需要交税吗?
  • 预存1000送100促销活动方案
  • 一般纳税人在外地预缴税款
  • 私营独资企业需要做账吗
  • 差旅补贴需要缴纳个税吗
  • 预收电费怎么做会计分录
  • 银行开户许可证什么时候开始取消的
  • 营业账簿印花税包括什么
  • 人力资源公司为个人代缴社保
  • 纳税人必须先复议再诉讼
  • 预付年金终值与普通年金终值的关系
  • 国家税务局如何登录
  • 纳税申报表未开票收入可以填负数吗
  • 停车场领的定额发票要怎么报税?
  • 报销差旅费抵扣进项税分录
  • 两个公司发工资违法吗
  • 受托加工物资的账务处理例题
  • 跨年退货会计处理
  • 支付宝提现到企业账户 怎么开票
  • 已付货款没有发票能做支出吗
  • 递归 php
  • 车辆开具发票后会计分录?
  • moments的用法
  • 使用二氧化碳灭火器时人应该站在什么位置
  • PHP:imagegrabscreen()的用法_GD库图像处理函数
  • 其他收益年末需要结转吗
  • php中文出现乱码
  • 车子的保险费
  • yii gridview
  • 蓝桥杯b组2020
  • 人工智能ai软件免费版app
  • 如何取消axios请求
  • 前端手撕代码
  • 增值税专用发票有几联?
  • 收到银行的贷款怎么入账
  • 航天金税服务费280不交
  • 兼职算受雇吗
  • 互联网+文本格式
  • python np数组
  • pytest unittest
  • 增值税发票记账联用途
  • 建筑附加税税率
  • 资产负债表应收账款期末余额公式
  • 报销为什么不能打给投保人
  • 专项应付款能转出吗
  • 实发工资有小数点是如何解决的
  • 行政单位误餐费标准
  • 公司员工抽奖活动
  • 异地开立分公司条件
  • 在途物资和材料采购的区别
  • SQL2005、SQL2008允许远程连接的配置说明(附配置图)
  • 怎么怎么恢复
  • mac的mysql安装
  • win8.1 0x80072efe
  • centos如何清除硬盘数据
  • win7系统如何卸载office2007
  • win7定时开关怎么定时
  • 批量win10激活码怎么弄
  • 投影变换的使用方法
  • javascript的语法在哪一项中规定
  • Android Broadcast
  • perl脚本调试方法
  • unity怎么用
  • 分离与继承的思想是什么
  • linux sar文件路径
  • 7z.exe 命令行
  • shell for循环执行命令
  • 细说javascript
  • javascript基本语法
  • each和each
  • 煤炭资源税税率选煤税率多少黑龙江
  • 深圳市税务审批中心电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设