开发 Chrome 扩展 之 Hello World 心血来潮

• 开发 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"