chrome浏览器插件开发

什么是扩展程序？

浏览器插件是依附于浏览器，用来拓展网页功能的程序。可以获取和修改网页元素、实现各种自动化操作从而拓展网页功能。
Chrome 扩展程序可通过自定义界面、监控浏览器事件和修改网页来提升浏览体验。如需查看更多扩展程序功能示例，请访问 Chrome 应用商店。

它们是如何构建的？

您可以使用创建 Web 应用时所用的 Web 技术构建扩展程序：HTML、CSS 和 JavaScript。

他们可以做些什么？

除了 Web API 之外，扩展程序还可以使用 Chrome 扩展程序 API 来执行不同的任务。如需更加详细的信息，请参阅开发指南。

浏览器插件种类

常见的浏览器插件种类可以分为以下几种类型:

• 以chromium为内核的浏览器插件，如chrome、edge、opera。这类浏览器使用最为广泛。
• firefox浏览器插件
• safari浏览器插件

项目目录结构

• manifest.json
  所有的浏览器插件必须在根目录下新建文件 manifest.json 清单记录重要的元数据，定义资源，声明权限，并标识哪些文件在后台和页面上运行。
• service worker
  service worker 作用是处理和监听浏览器事件，相当于是在后台持续运行的脚本，可以使用浏览器的全部api;但是不能和页面内容直接交互。
• content scripts
  content scripts 是在网页上执行的javascript，可以读取和修改网页上的dom元素，但只能使用部分的浏览器api

插件页面

插件页面包括浏览器的图标以及其点击后的效果，如popup页面;options页面，也就是右键浏览器图标之后点击 选项 弹出的页面;其他页面，也就是除了上述两种页面的其他浏览器插件的页面。所有的插件页面都可以使用浏览器api

官方开发指南
语雀文档地址 感谢B站Up主“-吞吞-”的学习教程，挂下链接

项目代码结构

github项目开源代码地址

公司需求比较简单且很急，所以采用了最快的方式：

• 通过chrome插件的项目格式进行基础配置，对JS脚本代码进行套壳，使得可以通过chrome插件的形式使用。
• 只进行了manifest.json的插件基本配置，其他都是原生JS实现的。
• 属于开发成本最低最快的方式，仅支持内部使用局限性很大。打包后也无法正常使用会被检测机制过滤掉，需开发者账号提交代码审核并上架 Chrome Web Store，类似APP的开发流程和市场审核机制了。
  

实际效果

1.0版：功能实现测试，简单的查询与导出

2.0版：txt导入、xsl导入、数量限制、窗口缩放、本地测试功能、查询进度条、查询中断、查询结果表格分页等