位置: 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项目实战)

  • 报税扣款锁定如何解除
  • 税金及附加二级明细
  • 收到以前年度退所得税分录
  • 租地建厂房房产税谁交
  • 贸易公司经营范围有限制吗
  • 自来水税率是9%还是3%
  • 叉车折旧年限是多少年
  • 旅游开发行业的会计怎么做
  • 发出商品是用进货吗
  • 暂估跨年取得发票怎么办
  • 汽车保险专用发票怎么做账
  • 简单征收的进项税额怎么调出来?
  • 支付职工一次性补助
  • 税控盘抵减增值税需要结转吗
  • 接受长期股权投资的条件
  • 抵押担保查询
  • 自然灾害造成库存商品毁损
  • 借款合同印花税减免优惠政策
  • 周年庆典布置现场
  • 公司的一些党员特别喜欢健身
  • 外汇收不到会不会丢
  • 怎么进行利润招财
  • 不能抵扣的进项税怎么做账
  • 金税盘全额抵扣分录
  • 2020国家生育津贴多少钱
  • 公司结算工资
  • 公司租房可以入公积金吗
  • 无票收入负数怎么报增值税
  • 公司注销报表怎么调
  • 购销合同印花税税率
  • 工资计提如何做账
  • 来料加工需要交税吗
  • linux安装c语言环境
  • 土地使用权转让协议
  • 什么票据行为是合法的
  • 系统之家的系统免费吗
  • 支付给代理机构的手续费计入
  • 报废汽车残值收入的商品编码编码
  • linux怎么检查网络状态
  • 企业生产经营过程中的在产品属于
  • 给php开发者的编程代码
  • 调整多计提企业利润
  • bat开源项目
  • 成本核算流程及注意事项
  • 投资担保公司的钱都去哪了
  • spring的aoc和aop
  • 留购价计入什么费
  • 农民专业合作社是什么性质
  • css的transition滑动效果
  • php sql 教程
  • 公司对其他公司的投资怎么做账
  • python中myqr的用法
  • php用户登录注册源码
  • mongodb最新版本
  • Discus X 3 门户改造熊掌号网页教程
  • 生产成本制造费用借贷方向
  • 利润敏感性分析法可以帮助企业有哪些决策?
  • 周转材料应该计入什么科目
  • 民间非营利组织会计制度
  • 质量问题举例
  • 跨年的管理费用怎么处理
  • 租赁收入属于什么行业
  • 服务业成本的会计核算
  • 员工提前预支工资合法吗
  • win2003开机蓝屏
  • mac salad
  • linux内核模块编译步骤
  • win8.1企业版激活密钥最新
  • xp双系统怎么切换系统
  • centos7安装MySQL8.0
  • Linux桌面环境选择
  • win1020h2更新卡在1
  • 双系统怎么屏蔽另一个磁盘
  • linux shell语句
  • 非常漂亮的英文怎么说
  • jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
  • Android mediaplayer 网络超时
  • Using Django with GAE Python 后台抓取多个网站的页面全文
  • 你家预收租金到哪里去了
  • 补发上个月的工资怎么做账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设