• 开发 Chrome 扩展
  • Hello, World
    • 项目
    • 加载未打包的扩展
    • icon
    • 刷新
    • 引入 JS 与错误处理

开发 Chrome 扩展

开发 Chrome 扩展除了需要基本的 HTML, CSS, JS 之外, 还可以使用 Chrome 额外提供的 API.

除了需要的 .html, .css 和 .js 文件之外呢, 扩展还包括不同类型的文件, 具体可以包含哪些文件取决于扩展提供的功能. 下面列出最经常用到的文件

• The manifest

每个扩展都必须提供一个名为 manifest.json 的文件, 而且这个文件必须位于扩展的根目录. manifest.json 通常提供了重要的元数据, 资源定义, 权限许可, 并且指明哪些文件在后台运行, 哪些在页面运行.

• The service worker

插件的 service worker 用来监听和处理浏览器事件, 包括导航🧭到新页面、移除书签🔖或者关闭一个页面等. service worker 可以使用所有的 Chrome APIs 但是它不能直接与页面的内容交互

• content scripts

content scripts 才在网页的环境中执行 JS. 它们可以读取和修改扩展注入的页面的 DOM. content scripts 只能使用一部分 Chrome APIs 但是可以与 service worker 交换信息来间接访问剩下的 APIs.

• The popup and other pages

扩展可以包括各式各样的 HTML 文件, 比如弹出页面, 选项页面和其他页面. 所有页面都可以访问 Chrome APIs

Hello, World

项目

下面写一个 Hello World 版本的插件, 插件的功能就是创建点击插件时展示 Hello World 和当前时间.

创建一个文件夹, 并创建 manifest.json.

{"manifest_version": 3,"name": "Hello, World","description": "show Hello World on popup","version": "1.0","action": {"default_popup": "hello_world.html","default_icon": "favicon-16x16.png"}
}

这个文件必须包含的 key 是 manifest_version, name 和 version. 开发阶段支持 // 形式的注释, 如果要上架到 Chrome Web Store 必须移除注释.

使用 https://favicon.io/ 创建扩展的图标. 然后创建 hello_world.html

Hello World

加载未打包的扩展

在开发者模式下加载未打包的扩展
1️⃣在 Chrome 浏览器中输入 chrome://extensions/ 进入扩展管理页面. 点击右上角开关打开开发者模式

点击「加载已解压的扩展程序」并选择开发插件代码的文件夹

然后选择浏览器右上角的扩展按钮🔘,并将自己的开发的扩展固定在导航栏部分. 之后点击我们的插件就可以看到效果了

icon

其实发现了上面的截图中, 扩展页面是没有图片的. 在 manifest.json 中通过 icons 声明

{..."icons": {"16": "favicon-16x16.png","32": "favicon-32x32.png","48": "android-chrome-192x192.png","128": "android-chrome-512x512.png"}
}

不同大小的 icon 用在不同的地方展示

• 16x16: 用在浏览器右上角的扩展和扩展按钮点击后的展示
• 32x32: windows 操作系统要求 32x32 大小
• 48x48: 在扩展管理页面
• 128x128: 安装时展示, 在 Chrome Web Store 中展示

刷新

如果我们修改了代码, 可以在扩展管理页面点击右下角的刷新按钮刷新

Hello World

当然, 不是所有文件修改后都需要刷新, 只有 manifest.json, service worker, content scripts 修改了才需要刷新.

引入 JS 与错误处理

我们可以创建 popup.js 并在 hello_world.html 中引入

console.log('Hello, World.')

Hello World

为了看到打印的内容, 需要完成下面的操作

• 点击扩展的刷新按钮
• 点击扩展, 弹出页面
• 右击页面, 出现菜单并选择「检查」项
• 在弹出的扩展的开发者工具中, 选择 console 选项卡, 就可以看到输入的内容了😊
  

如果 JS 中出现了错误, 例如打印一个不存在的变量, 然后重复上面刷新的步骤

console.log(a)

之后, 在扩展管理页面扩展就出现了「错误」按钮, 点击就可以看到具体的错误代码和错误原因.