将脚本注入到当前活动的标签页中

概述

实现功能：用户在浏览 Chrome 扩展文档和 Chrome 网上应用店文档时，通过点击扩展图标或使用快捷键来切换专注模式。在专注模式下，页面会隐藏导航栏等干扰元素，只显示主要内容，帮助用户更好地专注于阅读。

教程

1. 创建项目结构

首先创建以下文件结构：

focus-mode/
├── images/
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-48.png
│   └── icon-128.png
├── manifest.json
├── background.js
└──

2. 配置 manifest.json

创建 manifest.json 文件，这是 Chrome 扩展的配置文件：

{
    "manifest_version": 3,
    "name": "Focus Mode",
    "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
    "version": "1.0",
    "icons": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": {
            "16": "images/icon-16.png",
            "32": "images/icon-32.png",
            "48": "images/icon-48.png",
            "128": "images/icon-128.png"
        }
    },
    "permissions": ["activeTab", "scripting"],
    "commands": {
        "_execute_action": {
        "suggested_key": {
            "default": "Ctrl+B",
            "mac": "Command+B"
        }
        }
    }
}

3. 创建后台脚本 (background.js)

创建 background.js 文件，实现扩展的核心功能：

// 适用站点
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

// 监听扩展程序安装完成事件
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: 'OFF',
  });
});

// 监听扩展程序徽章点击事件
chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });

    if (nextState === 'ON') {
      await chrome.scripting.insertCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id },
      });
    } else if (nextState === 'OFF') {
      await chrome.scripting.removeCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id },
      });
    }
  }
});

4. 创建样式文件 (focus-mode.css)

创建 focus-mode.css 文件，定义专注模式的样式：

* {
    display: none !important;
}

html,
body,
*:has(article),
article,
article * {
    display: revert !important;
}

[role='navigation'] {
    display: none !important;
}

article {
    margin: auto;
    max-width: 700px;
}

5. 准备图标

准备四个不同尺寸的图标文件（16x16、32x32、48x48、128x128 像素），并将它们放在 images 目录下。

6. 加载扩展

1. 打开 Chrome 浏览器
2. 访问 chrome://extensions/
3. 开启右上角的"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择包含扩展文件的目录

7. 使用扩展

1. 访问 Chrome 扩展文档 或 Chrome 网上应用店文档 页面
2. 点击扩展图标或使用快捷键（Windows/Linux: Ctrl+B, Mac: Command+B）来切换专注模式
3. 扩展图标上会显示当前状态（ON/OFF）

实现效果：

关闭：

开启：

完整示例代码👇

DEMO: chrome-extension-demos/03/focus-mode

资源

• 教程系列代码仓库

参考

• 将脚本注入到当前活动的标签页中  |  Chrome Extensions  |  Chrome for Developers