chrome extension 扩展开发入门

2,197 阅读2分钟

chrome extension 是什么

扩展程序是自定义浏览体验的小型软件程序。它们让用户可以通过多种方式定制 Chrome 的功能和行为,例如能够提供以下内容:

  • 生产力工具
  • 网页内容丰富
  • 信息聚合
  • 乐趣和游戏等

chrome extension 能做什么

增强浏览器功能,轻松实现属于自己的“定制版”浏览器,等等。

Chrome插件提供了很多实用API供我们使用,包括但不限于:

  • 书签控制;
  • 下载控制;
  • 窗口控制;
  • 标签控制;
  • 网络请求控制,各类事件监听;
  • 自定义原生菜单;
  • 完善的通信机制;
  • 等等;

chrome extension 的开发与调试

调试

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。 勾选开发者模式即可以文件夹的形式直接加载插件,否则只能安装.crx格式的文件。Chrome要求插件必须从它的Chrome应用商店安装,其它任何网站下载的都无法直接安装,所以,其实我们可以把crx文件解压,然后通过开发者模式直接加载。

开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R即可,以防万一最好还把页面刷新一下。

开发

扩展程序主要结构

  • Manifest (清单文件)
  • Background Script (后台脚本)
  • UI Elements (页面元素)
  • Content Script (内容脚本)
  • Options Page(配置页面)

chrome extension 结构

扩展的结构

background scripts

background scripts是扩展的事件处理程序; 它包含对扩展浏览器事件的监听,触发后执行指示的逻辑。有效的后台脚本仅在需要时加载,并在空闲时卸载。

用户界面

  1. popup
  2. 可以包含带有 JavaScript 逻辑的普通 HTML 页面。
  3. 还可以调用tabs.createwindow.open()显示扩展中存在的其他 HTML 文件。 使用页面操作和弹出窗口的扩展程序可以使用declarative content API 在后台脚本中设置弹出窗口何时可供用户使用的规则。当条件满足时,后台脚本与弹出窗口通信,使其图标可被用户点击。

content scripts

image.png

通信

读取或写入网页的扩展程序使用content scripts。内容脚本包含在已加载到浏览器的页面上下文中执行的 JavaScript。content scripts读取和修改浏览器访问的网页的 DOM。 还可以通过使用storage API交换消息和存储值来进行父子通信。

通信

  1. popupbackground之间的通信 background => popup 是通过getBackgroundPage, popup => background是通过getViews

  2. backgroundcontent之间的通信

  • 长连接: chrome.tabs.connect 和 chrome.runtime.connect
  • 短连接: chrome.tabs.sendMessage
  1. popupcontent之间的通信

    chrome.runtime.sendMessage, chrome.runtime.onMessage

chrome extension 常用api

官方示例