Chrome中输出‘Hello World’的浏览器扩展无法正常工作

问题概述 #

开发Chrome扩展时遇到以下问题：

• 预期功能：地址栏输入HW按Tab触发扩展，回车后在当前标签页显示Hello World（非弹窗）
• 实际表现：触发后网页无任何反应，开发者工具控制台无日志输出

源码结构 #

test-extn/
├─ manifest.json
└─ background.js

配置与代码 #

manifest.json #

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "Prints 'Hello World' in the tab.",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "omnibox": {
    "keyword": "HW"
  }
}

background.js #

// Log to confirm that the service worker is loaded
console.log('Service Worker Loaded');

chrome.omnibox.onInputEntered.addListener((text) => {
  console.log('Inside listener')
  if (text === 'HW') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id },
        function: () => {
          document.body.innerHTML = "<h1>Hello World</h1>";
        }
      });
    });
  }
});

操作步骤 #

• 打开chrome://extensions/，启用开发者模式
• 加载已解压的test-extn文件夹
• 打开新标签页，地址栏输入HW按Tab，显示扩展名称后按回车，无任何反应

观察结果 #

• chrome://serviceworker-internals/显示service worker已注册激活并运行
• 网页开发者工具的控制台/网络标签页无background.js相关日志

问题排查与修复 #

1. Omnibox事件参数逻辑错误 #

当你输入HW按Tab触发扩展后，回车时传递给onInputEntered的text参数是空字符串——因为HW是扩展的触发关键词，而非用户输入的文本内容。你的判断条件if (text === 'HW')永远不会成立，导致后续注入脚本的代码完全不执行。

修复：移除无效的判断条件，直接执行注入逻辑：

console.log('Service Worker Loaded');

chrome.omnibox.onInputEntered.addListener((text) => {
  console.log('Inside listener, input text:', text);
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      function: () => {
        document.body.innerHTML = "<h1>Hello World</h1>";
      }
    });
  });
});

2. Service Worker日志查看位置错误 #

background service worker的日志不在网页开发者工具中，需要在扩展专属控制台查看：

• 打开chrome://extensions/
• 找到你的扩展，点击「服务工作者」下方的inspect链接，弹出的控制台才是service worker的日志输出窗口

3. 新标签页注入限制 #

Chrome默认新标签页（chrome://newtab/）属于受限制URL，scripting.executeScript无法向其注入脚本。建议换普通网页（如https://example.com）测试，或者在manifest中添加host_permissions（但Chrome对新标签页的注入限制严格，优先测试普通网页）。

完整修复后的background.js #

console.log('Service Worker Loaded');

chrome.omnibox.onInputEntered.addListener(() => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    // 跳过chrome://类受限制URL
    if (!tabs[0].url.startsWith('chrome://')) {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id },
        function: () => {
          document.body.innerHTML = "<h1>Hello World</h1>";
        }
      });
    } else {
      console.log('无法向chrome://类URL注入脚本');
    }
  });
});

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