当前位置：网站首页 > 技术文章 > 正文

Chrome 扩展开发:哪种实现方式适合您的需求

网站名称：Chrome 扩展开发:哪种实现方式适合您的需求
网站分类：技术文章
收录时间：2025-06-09 21:09
网站地址：

进入网站

“Chrome 扩展开发:哪种实现方式适合您的需求” 网站介绍

构建 Chrome 扩展有多种方式，每种方式都具有独特的功能。

开始之前

每个 Chrome 扩展都以 manifest.json 文件为起点，该文件是扩展的蓝图。它定义了扩展的名称、版本、权限等基本元数据，以及要使用的脚本或页面。

根据 Chrome 开发者官网的官方公告，从 2025 年 6 月起，Chrome 139 版本将只支持 Manifest V3，而 Manifest V2 将被逐步淘汰。

我们将基于 Manifest V3 标准进行深入探讨。

1. Popup

当用户点击工具栏中的扩展图标时，最常见的交互方式之一就是显示一个弹出窗口。在 manifest 中定义的这个弹出窗口是一个小型的 HTML 页面，通常包含一个简单的界面，用于快速交互。

目录结构 ：

popup
├── icon.png
├── manifest.json
└── popup.html

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "describe here",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

在 manifest.json 中，除了指定扩展的版本、名称和描述外，还通过 action.default_popup 字段配置弹出窗口的 HTML 文件（popup.html），并通过 action.default_icon 字段配置工具栏图标。

popup.html

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 16px">
    <h3>My Extension</h3>
  </div>
</body>
</html>

popup.html 构成了其用户界面的基础，它可能包含 CSS 和 JavaScript 文件，这些文件共同实现扩展的功能。

交互方式 ：

点击扩展工具栏图标，弹出窗口界面将会显示。

2. 新标签页（New Tab）

有些扩展可能更倾向于在点击时打开一个完整的标签页，而不是使用弹出窗口。这种方法在扩展需要更多空间来处理复杂交互时非常有用。

为此，扩展可以监听浏览器动作上的点击事件，然后通过编程方式打开一个新标签页。background.js 脚本处理此逻辑。

目录结构 ：

newtab
├── background.js
├── icon.png
├── index.html
└── manifest.json

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "describe here",
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "/background.js"
  }
}

在 manifest.json 中，通过 background.service_worker 字段指定 background.js。

background.js

chrome.action.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': chrome.runtime.getURL('index.html')},
  function(tab) {
    // 标签页已打开。
  });
});

在 background.js 中，它监听图标上的点击事件，并调用 chrome.tabs.create API 打开一个新标签页。新标签页的 URL 是通过 chrome.runtime.getURL('index.html') 生成的，它会自动解析HTML 文件（index.html）的相对路径。

index.html

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 16px">
    <h3>index page</h3>
  </div>
</body>
</html>

index.html 可以容纳比弹出窗口多得多的内容，因为它作为一个完整的独立页面。

交互方式 ：

点击工具栏图标打开一个新标签页。

3. 侧边栏（SideBar）

Chrome 还支持一个不太常见但很有趣的选项：侧边栏（或称侧边面板）。这个面板在当前网页旁边打开一个垂直面板，非常适合在浏览时需要保持可见的工具，如文档大纲或实时翻译器。

要使用侧边栏，manifest.json 需要 “sidePanel” 权限，并且扩展通过 chrome.sidebarAction API 控制它。与弹出窗口不同，侧边栏会一直保持打开状态，直到用户关闭它，这使它非常适合长期任务。

目录结构 ：

sidebar
├── background.js
├── icon.png
├── manifest.json
└── side_panel.html

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "plugin-test",
  "description": "describe here",
  "side_panel": {
    "default_path": "side_panel.html"
  },
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "/background.js"
  },
  "permissions": [
    "sidePanel"
  ]
}

在 manifest.json 中，通过 side_panel.default_path 字段声明侧边栏的 HTML 文件（side_panel.html）。此外，必须在权限数组中包含 “sidePanel” 权限，以启用侧边栏功能。

background.js

chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

点击事件将从 background.js 中监听以控制侧边栏。

side_panel.html

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 16px">
    <h3>side panel</h3>
  </div>
</body>
</html>

side_panel.html 可以像完整的标签页一样使用，两者都提供了丰富的接口实现可能性。

交互方式 ：

点击工具栏图标切换侧边栏的打开和关闭状态。

4.嵌入式小部件

有些扩展直接将交互式小部件嵌入网页来修改网页。内容脚本可以通过修改当前页面的 DOM 添加浮动工具栏或翻译气泡。这些脚本在网页内运行，但由于安全限制，它们不能使用大多数 Chrome 扩展 API。

目录结构 ：

widget
├── manifest.json
└── widget.js

manifest.json

{
  "manifest_version": 3,
  "version": "0.0.1",
  "name": "my-extension",
  "description": "describe here",
  "content_scripts": [
    {
      "matches": ["https://test.com/*"],
      "js": ["widget.js"]
    }
  ]
}

在 manifest.json 中，content_scripts 字段定义了哪些脚本将被注入到匹配的网页中，指定要注入的 JavaScript（或 CSS）文件以及决定何时注入的 URL 模式。

widget.js

const widget = document.createElement('div');
widget.id = 'extensionWidget';
widget.style.position = 'fixed';
widget.style.top = '15px';
widget.style.right = '160px';
widget.style.padding = '10px';
widget.style.background = 'blue';
widget.style.borderRadius = '8px';
widget.style.zIndex = '9999';

widget.innerHTML = `<h4 style="color: white">Extension Widget</h4>`;
document.body.appendChild(widget);

一旦扩展安装并启用，widget.js 将被注入并执行在所有匹配 https://test.com/* URL 模式的页面中，“Extension Widget” 小部件将在右上角显示。

这种方法允许与网页无缝集成，但需要小心处理页面元素, 以避免冲突。

总结

每种方法都有其适用场景 —— 弹出窗口适用于快速交互，新标签页适用于复杂的 UI，侧边栏适用于持久工具，嵌入式小部件适用于页面集成。最佳选择取决于您的扩展的具体需求和用户体验目标。

https://www.yuque.com/fengjutian/eyzi2i/izv3qrruvdes8th4?singleDoc# 《Chrome 扩展开发：哪种实现方式适合您的需求》

document.appendchild

上一篇：去掉主流视频网站右上角LOGO的方法
下一篇：32个手写JS，巩固你的JS基础(面试高频)

Chrome 扩展开发:哪种实现方式适合您的需求

“Chrome 扩展开发:哪种实现方式适合您的需求” 网站介绍

开始之前

1. Popup

2. 新标签页（New Tab）

3. 侧边栏（SideBar）

4.嵌入式小部件

总结

更多相关网站