如何实现输入触发函数调用的Chrome Manifest V3扩展？新手求助

一、标准文件结构 #

你需要的文件结构如下：

• manifest.json（扩展核心配置）
• popup.html（弹窗界面，包含输入框和触发按钮）
• popup.js（弹窗交互逻辑，处理按钮点击事件）
• injector.js（注入到目标网页的脚本，实现具体功能函数）

二、各文件正确实现代码 #

1. manifest.json（Manifest V3规范） #

{
  "manifest_version": 3,
  "name": "我的第一个Chrome扩展",
  "version": "1.0",
  "description": "通过输入编号调用对应函数的扩展",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "permissions": ["activeTab", "scripting"],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

• 关键点：manifest_version必须设为3；permissions需要activeTab（获取当前激活标签页）和scripting（注入脚本权限）；action配置弹窗入口。

2. popup.html（弹窗UI） #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 200px;
      padding: 15px;
    }
    .input-group {
      margin-bottom: 10px;
    }
    input, button {
      width: 100%;
      padding: 6px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="input-group">
    <label>输入函数编号（1/2/3）：</label>
    <input type="text" id="funcNumber" placeholder="比如1">
  </div>
  <button id="callFuncBtn">调用函数</button>

  <script src="popup.js"></script>
</body>
</html>

• 极简界面，适配Chrome弹窗尺寸；引入popup.js处理交互逻辑。

3. popup.js（弹窗逻辑） #

document.getElementById('callFuncBtn').addEventListener('click', async () => {
  const funcNum = document.getElementById('funcNumber').value.trim();
  if (!['1', '2', '3'].includes(funcNum)) {
    alert('请输入有效的编号：1/2/3');
    return;
  }

  try {
    // 获取当前激活的标签页
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 注入脚本并传递函数编号
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['injector.js'],
      args: [funcNum]
    });
  } catch (err) {
    console.error('注入脚本失败：', err);
    alert('调用失败，请查看控制台错误');
  }
});

• 监听按钮点击，验证输入的编号合法性；使用Chrome的scripting.executeScriptAPI将injector.js注入到当前标签页，并传递编号参数。

4. injector.js（网页注入脚本） #

// 定义不同编号对应的函数
function func1() {
  alert('你调用了函数1！当前网页标题：' + document.title);
}

function func2() {
  document.body.style.backgroundColor = '#f0f8ff';
  alert('函数2执行：网页背景已修改');
}

function func3() {
  const paragraphs = document.querySelectorAll('p');
  alert('函数3执行：当前网页有' + paragraphs.length + '个段落');
}

// 获取popup传递的参数，执行对应函数
const args = chrome.runtime.getArguments();
const funcNum = args[0];
switch (funcNum) {
  case '1':
    func1();
    break;
  case '2':
    func2();
    break;
  case '3':
    func3();
    break;
  default:
    alert('无效的函数编号');
}

• 先定义各个功能函数；通过chrome.runtime.getArguments()获取popup传递的编号，用switch判断执行对应函数。

三、测试与调试步骤 #

1. 准备3个尺寸的图标（16x16、48x48、128x128），放在扩展根目录（可使用在线图标工具生成）。
2. 打开Chrome浏览器，进入chrome://extensions/，开启右上角的「开发者模式」。
3. 点击「加载已解压的扩展程序」，选择你的扩展根目录。
4. 点击浏览器工具栏的扩展图标，弹出界面后输入编号，点击按钮测试功能。
5. 如果出现错误，右键扩展图标→「检查弹出内容」，查看控制台日志排查问题。

内容的提问来源于stack exchange，提问作者Mahdiweb