怎样使用JavaScript操作浏览器扩展(Extension)的API？-js教程-PHP中文网

怎样使用JavaScript操作浏览器扩展(Extension)的API？

狼影

发布： 2025-10-07 08:45:02

原创

874人浏览过

答案是通过WebExtensions API使用JavaScript操作浏览器扩展。manifest.json定义元信息和权限，background.js监听事件如点击并注入content-script.js，后者修改DOM但需通过chrome.runtime.sendMessage与background通信，实现跨上下文交互，从而控制标签页、网络请求等行为。

怎样使用javascript操作浏览器扩展(extension)的api？

JavaScript 操作浏览器扩展的 API 主要是通过浏览器提供的 WebExtensions API 实现的。这类 API 允许你在扩展的不同部分（如背景脚本、内容脚本、弹出页面等）中使用 JavaScript 来控制浏览器行为，比如操作标签页、监听网络请求、读取或修改页面内容等。

了解扩展的基本结构

一个典型的浏览器扩展包含以下几个核心文件：

manifest.json：定义扩展的元信息和权限
background.js：运行在后台的脚本，用于监听事件
content-script.js：注入到网页中的脚本，可操作页面 DOM
popup.html / popup.js：点击扩展图标时弹出的界面

这些部分都可以使用 JavaScript 调用 WebExtensions API，但权限和可用 API 可能不同。

在 background.js 中使用扩展 API

背景脚本通常用于监听浏览器事件，例如标签变化、网络请求或用户点击。

立即学习“Java免费学习笔记（深入）”；

示例：监听浏览器动作按钮被点击

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js']
  });
});

登录后复制

这段代码会在用户点击扩展图标时，向当前标签页注入 content-script.js。

在 content-script 中与页面交互

content script 可以访问和修改网页的 DOM，但它运行在独立的环境，不能直接调用 chrome.* API（除了少数例外）。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

示例：修改页面标题

// content-script.js
document.title = '已被扩展修改';

登录后复制

如果需要从 content script 调用扩展 API，必须通过消息传递机制与 background script 通信。

通过消息传递跨上下文通信

content script 和 background script 之间可以通过 chrome.runtime.sendMessage 和 chrome.runtime.onMessage 通信。

content-script 发送消息

chrome.runtime.sendMessage({ action: 'changeTabTitle', title: '新标签名' });

登录后复制

background.js 接收消息

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'changeTabTitle') {
    chrome.tabs.update(sender.tab.id, { title: request.title });
  }
});

登录后复制

这种模式是扩展开发中最常见的交互方式。

基本上就这些。只要配置好 manifest 权限，合理划分 background 和 content script 的职责，并通过消息通信，就能用 JavaScript 灵活操作浏览器扩展功能。

以上就是怎样使用JavaScript操作浏览器扩展(Extension)的API？的详细内容，更多请关注php中文网其它相关文章！