跳到主要内容

浏览器插件开发

插件是基于Web技术构建的，例如HTML、JavaScript和CSS。它们在单独的沙盒执行环境中运行并与Chrome浏览器进行交互

发布上传插件到谷歌商店​

  • 1、注册开发者账户
  • 2、提交chrome扩展程序或者chrome插件
  • 3、编辑chrome插件信息

manifest.json配置​

manifest.json配置文件

  • 配置快捷键
  • 配置弹窗
  • 配置权限
    • 如配置书签，才能使用书签的api
json
{
    // 插件名称
    "name": "Hello Extensions",
    // 插件的描述
    "description" : "Base Level Extension",
    // 插件的版本
    "version": "1.0",
    // 配置插件程序的版本号，主流版本是2，最新是3
    "manifest_version": 2
}

content_scripts​

  • 用于定义内容脚本
  • 用于与网页内容交互的脚本。内容脚本允许你在浏览器的页面上执行自定义的 JavaScript 代码，并与页面 DOM 进行交互

options_ui​

  • options_ui 用于定义插件的选项页面，即用户可以在浏览器中配置插件的地方。通过这个配置，开发者可以指定一个 HTML 文件，作为插件的选项页面

background​

  • background 用于定义插件的后台脚本。插件的后台脚本可以在插件安装后一直运行，用于执行一些后台任务、监听事件等

permissions​

  • 配置相关权限
    • 如书签访问权限

设置弹框​

  • 经常会点击右上角插件图标时弹出一个小窗口的页面，焦点离开时就关闭了，一般做一些临时性的交互操作；在配置文件中新增browser_action字段，配置popup弹框
json
{
   ....
    // 新增popup弹框
    "browser_action": {
      "default_popup": "popup.html",
      "default_icon": "popup.png"
    }
}

快捷键​

  • 可以在manifest.json中设置一个键盘快捷键的命令，通过快捷键来弹出popup页面
json
{
  ....
  // 新增命令
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens popup.html"
    }
  }
}

配置权限​

  • 1、必须在扩展程序清单中声明“书签”权限，才能使用书签 API。 例如：
js
{
  "name": "My extension",
  "permissions": [
    "bookmarks"
  ],
}

跳转页面​

浏览器插件的环境和普通网页的环境有所不同，有一些安全性和权限方面的限制，需要使用浏览器扩展提供的 API 来跳转页面

  • chrome.tabs.create
js
chrome.tabs.create({ url: 'https://www.example.com' });