美文网首页
5分钟开始你的Chrome插件开发

5分钟开始你的Chrome插件开发

作者: 捡了幸福的猪 | 来源:发表于2021-09-29 19:01 被阅读0次

快速了解 & 直接下载上手开发

1、什么是Chrome插件

  • Chrome插件通常是.crx后缀的文件;通过谷歌网上应用商店下载或者在开发者模式中可以直接拖入到浏览器进行安装。
  • Chrome插件实际就是html+js+css开发的web应用;
  • 可以使用Chrome提供的浏览器API,增强浏扩展览器的功能

2、插件核心概念

开发Chrome插件就是按照Chrome插件的开发规范写Web页面。规范包括:

  • 后台页面/事件页面(backgrund)
    后台网页是运行在浏览器后台的,随着浏览器的启动开始运行,浏览器关闭结束运行。 事件页面则是需要调用时加载,脚本空闲时被卸载,两者都是运行在后台。

  • 用户界面网页(popup)
    点击插件出来的小弹窗,每次点击弹出开始运行,弹窗关闭后结束,可以与backgrund脚本交互

  • 内容脚本(content)
    安装插件后每打开一个网页可以将content脚本注入到页面中,内容脚本可以读取浏览器访问的网页的细节,并且可以修改页面。

// TODO 细化

3、重点!!!直接上手开发的框架

前面描述过, Chrome插件实际就是html+js+css开发的web应用; 所以进行Chrome插件开发的最简单方案就是直接写html+js+css就可以。

对于比较复杂的插件, 完全可以使用React、Vue等框架,而目前这些框架又有对应的脚手架,直接使用脚手架搭建也很迅速。 不过直接使用脚手架搭建的项目包含的能力远超过实际的Chrome插件的需要。实际的Chrome插件就是多个页面, 所以可以直接使用Webpack+babel+react/vue+UI 快速搭建一个简单易用的多页项目用于Chrome插件开发。

!!!现在这样的事情已经做好啦,我基于react-crx 增加了devtools等功能, 代码仓库在这里: carrot大家需要的话直接下载下来就能开发啦~~~~

这个框架的能力包括:

  • 独立popup、content、background、devtools目录
  • 按照Chrome Extension最终生成目录要求配置webpack
  • 封装axios,可以将API请求委托给background script执行,从而实现跨域请求
  • 设置.env.development环境变量,便于在开发环境下禁止委托background script发起请求
  • ...

!!!实际效果如下:

  • 插件安装: 安装效果.png
  • Popup能力: image.png
  • Content能力: Content能力.png

    增加右下角浮动Icon,点击显示弹窗

  • Devtools 能力: Devtools面板.png

hi~~ 点赞了嘛~~~

参考文档

1、Chrome开发教程
2、create-react-app脚手架搭建chrome插件项目
3、说说Chrome插件从开发调试到打包发布
4、https://jishuin.proginn.com/p/763bfbd54785

相关文章

  • Mac下导出chrome插件

    Mac下导出chrome插件Chrome Extensions 插件扩展程序开发入门mac 下chrome扩展插件...

  • Chrome插件开发

    Chrome插件开发

  • 开发笔记

    最近做rails开发。 1 chrome 插件 postman这个chrome插件,用来调试api还是颇为方便的。...

  • 技术开发中好用的chrome插件

    今天的主要推荐技术开发用的Chrome插件,对做技术开发的朋友很有帮助,用了这些chrome插件,开发效率可以得到...

  • react-native Expo 下载

    reactNative开发工具 Expo自行下载:Chrome插件下载(需要梯子翻墙)1、下载Chrome插件AP...

  • Chrome扩展开发

    Chrome扩展开发 标签(空格分隔): Chrome扩展 1、写在前面 Chrome插件是一个用Web技术开发...

  • Chrome插件初步上手体验

    最近有接到任务需要开发一款具备自动抓取功能的chrome插件,借此机会也对chrome插件开发工作有了初步的认识,...

  • 5分钟开始你的Chrome插件开发

    快速了解 & 直接下载上手开发 1、什么是Chrome插件 Chrome插件通常是.crx后缀的文件;通过谷歌网上...

  • 像用 IDEA 调试 Java 代码一样,用 WebStorm

    开发工具 WebStorm + Google Chrome + JetBrains IDE Support 插件 ...

  • chrome插件开发

    Chrome插件的开发,实际上就是开发一个Web应用,然后按照Chrome的规则将这个快捷方式安装到Chrome的...

网友评论

      本文标题:5分钟开始你的Chrome插件开发

      本文链接:https://www.haomeiwen.com/subject/eamrnltx.html