Allen's blog Allen's blog
首页
面经
算法 (opens new window)
分类

Allen

前端CV工程师
首页
面经
算法 (opens new window)
分类
  • Javascript

  • TypeScript

  • CSS

  • Vue

  • React

  • 框架和构建工具

  • 工具库

  • 常见业务场景

  • Bug

  • 项目实战

    • 飞书多维表格React项目

    • tj-school-vue2

    • my-linter

    • chrome-extension

      • 前言
        • chrome 扩展开发基本概念
        • 开发流程
    • 特征采集系统electron

  • 前端
  • 项目实战
  • chrome-extension
Allen
2023-10-26
目录

前言

公司项目涉及团队版,调试的时候经常需要切换账号,同时,平时浏览很多网页的时候也有自动化一些操作,最常见的就是账号登录,本项目主要目的就是解决账号切换的自动登录问题,同时熟悉一下,chrome extensions 的 API。

下面是我阅读官方文档 (opens new window)的理解和总结

# chrome 扩展开发基本概念

扩展包含四部分文件:

The manifest

在扩展根目录下,必须有文件名为manifest.json的文件。manifest 记录重要的元信息。

它做了一下几件事:

  1. 声明了权限
  2. 定义了资源
  3. 指定了哪些文件运行在后台,哪些文件运行在 页面

The service worker

扩展的 service worker 处理和监听浏览器事件,包括导航到一个新页面、删除书签、关闭一个 tab(tab 就是一个页面)

Content scripts

Content scripts 可以在网页上执行脚本,可以获取和修改 DOM,Content scripts 只能调用 Chrome API 的一部分,但是可以间接地通过与service worker交换信息来调用其余的 chrome API

The popup and other pages

这里的 popup 指的是扩展的弹出面板。popup 页面不是必要的,看需要可有可无。其他页面指的是可以在浏览器单独打开一些定义的页面。

# 开发流程

具体的可以参考文章:development-basics (opens new window)

这里记一些配置

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}
1
2
3
4
5
6
7
8
9
10

扩展图标是 default_icon popup 页面是 default_popup

上次更新: 2023/12/16, 09:22:46
设置路径别名
关键问题方案

← 设置路径别名 关键问题方案→

最近更新
01
rollup使用配置文件rollup.config.ts打包
12-08
02
package.json导出类型
12-08
03
关键问题方案
11-17
更多文章>
Theme by Vdoing | Copyright © 2023-2023 Allen | Github
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式