Create Safari Web Inspector Extensions
Media & Web 进阶 20m

创建 Safari Web Inspector 扩展

Create Safari Web Inspector Extensions

2022年6月6日

在 Apple 官方观看视频

一句话判断

Safari 16 现在支持 Web Inspector 扩展——你可以为 Safari 的开发者工具创建自定义标签页，用来调试特定框架、分析特定数据、或实现任何你想要的开发者工作流。

这场 Session 讲了什么

WebKit 团队的 Devin Rousso 详细讲解了如何为 Safari 的 Web Inspector 创建扩展。Web Inspector 扩展基于跨浏览器 Web Extensions 标准和 DevTools API 构建，允许开发者在 Web Inspector 中添加自定义标签页。

Session 用一个 Open Graph 扩展作为完整示例——这个扩展在 Web Inspector 中展示网页的社交媒体元数据（用于链接预览的信息）。从项目创建到 manifest 配置、devtools 页面结构、权限管理、代码执行，完整覆盖了开发流程。

Web Inspector 扩展通过 App Store 分发（作为 Safari Extension App 的一部分），与其他 Safari Web Extension 共享相同的基础架构。

值得深挖的点

扩展的页面结构。 Web Inspector 扩展比普通 Safari 扩展多了一个 devtools background page。这个页面在 Web Inspector 打开时创建，负责创建自定义标签页。每个 Web Inspector 实例都有独立的 devtools background page 实例。

devtools_panels.create API。 创建标签页需要三个参数：标签名称、图标路径（建议使用 SVG 矢量图以支持缩放）、标签页的 HTML 文件路径。标签页创建后会出现在 Web Inspector 的标签栏中。

权限模型。 扩展首次使用时需要用户授权。权限持续时间选项与其他 Safari 扩展一致（一天、始终允许等）。建议在 devtools tab 页面中请求权限，这样权限提示会出现在用户可见的上下文中。

代码执行。 扩展可以通过 chrome.devtools.inspectedWindow.eval() 在当前检查的页面中执行 JavaScript。这个 API 同时返回执行结果和可能的错误信息。执行上下文就是当前检查的页面，可以访问页面的 DOM 和 JavaScript 环境。

代码片段

// devtools_background.js - 创建 Web Inspector 标签页
chrome.devtools.panels.create(
    chrome.i18n.getMessage("devtools_tab_title"),  // 标签名称
    "images/logo.svg",  // 标签图标（矢量图）
    "devtools_tab.html",  // 标签页面
    (panel) => {
        // 标签页创建完成
        console.log("Open Graph 标签页已创建");
    }
);

// devtools_tab.js - 在标签页中获取页面数据
async function scanOpenGraphTags() {
    const [result, error] = await new Promise((resolve) => {
        chrome.devtools.inspectedWindow.eval(`
            // 在当前检查的页面中执行
            const metas = document.querySelectorAll('meta[property^="og:"]');
            const data = {};
            metas.forEach(meta => {
                const property = meta.getAttribute('property');
                const content = meta.getAttribute('content');
                data[property] = content;
            });
            JSON.stringify(data, null, 2);
        `, (result, error) => {
            resolve([result, error]);
        });
    });

    if (error) {
        showError(error);
        return;
    }

    const ogData = JSON.parse(result);
    displayOpenGraphData(ogData);
}

// manifest.json 中的 devtools 配置
// {
//   "manifest_version": 2,
//   "name": "Open Graph Inspector",
//   "devtools_page": "devtools_background.html",
//   ...
// }

最佳实践

  • 使用 SVG 矢量图作为标签图标，确保在任何缩放级别下都清晰
  • 在 devtools tab 页面中请求权限，让用户在可见的上下文中授权
  • 使用 chrome.devtools.inspectedWindow.eval() 而非 content scripts 来访问检查页面的数据
  • 每个 Web Inspector 窗口有独立的扩展实例，注意状态的隔离
  • 遵循跨浏览器 Web Extensions 标准，你的扩展理论上也能在其他浏览器的开发者工具中工作
  • 利用 chrome.i18n 实现标签名称的本地化

还有什么值得关注

  • Web Inspector 扩展通过 App Store 分发，用户从 Safari 的扩展偏好设置中启用
  • 如果已有其他浏览器的开发者工具扩展，可以用 safari-web-extension-converter 工具转换
  • 扩展可以访问 Web Inspector 的样式和组件，保持视觉一致性
  • 配合观看 “Meet Safari Web Extensions”（WWDC 2020）了解 Safari 扩展的基础知识
WWDC 2022