创建点击即可运行JS的Chrome简易扩展及问题排查

一、按钮点击无反应的原因及修复 #

你看到的CSS source map 404警告是目标网站自身资源问题，和你的扩展无关，无需处理。按钮点击无响应，核心是扩展权限配置或脚本执行逻辑有误，按以下步骤修复：

1. 修正manifest.json权限配置 #

确保Manifest V3中包含activeTab和scripting权限，正确声明popup相关配置：

{
  "manifest_version": 3,
  "name": "一键执行脚本",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

2. 调整popup.js的脚本执行逻辑 #

必须使用chrome.scripting.executeScript向当前标签页注入脚本，示例代码：

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const runBtn = document.getElementById('runScriptBtn');
  runBtn.addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
    await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: () => {
        // 此处替换为你需要执行的DOM操作或JS逻辑
        console.log('脚本执行成功');
        document.body.style.backgroundColor = '#f0f0f0';
      }
    });
    window.close();
  });
});

3. 匹配的popup.html结构 #

确保按钮ID与popup.js中的选择器一致：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {width: 140px; padding: 12px; margin: 0;}
    button {width: 100%; padding: 8px; border: none; border-radius: 4px; cursor: pointer;}
  </style>
</head>
<body>
  <button id="runScriptBtn">执行脚本</button>
  <script src="popup.js"></script>
</body>
</html>

二、实现点击图标直接运行脚本（无需popup） #

要跳过弹窗直接执行脚本，需移除popup配置，改用后台服务工作者监听图标点击事件：

1. 修改manifest.json #

删除default_popup，添加background字段声明服务工作者：

{
  "manifest_version": 3,
  "name": "一键执行脚本",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

2. 编写background.js脚本 #

监听图标点击事件，直接向当前标签页注入脚本：

// background.js
chrome.action.onClicked.addListener(async (tab) => {
  await chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: () => {
      // 替换为你的目标JS逻辑
      console.log("图标点击触发脚本执行");
      // 示例：批量修改页面段落文字颜色
      document.querySelectorAll('p').forEach(p => p.style.color = '#2c3e50');
    }
  });
});

3. 关键注意事项 #

• activeTab权限会在用户点击图标时自动授予当前标签页临时权限，无需提前申请；
• 若需限定脚本运行的域名，可在manifest.json中添加host_permissions，例如"host_permissions": ["https://*.example.com/*"]；
• 修改扩展代码后，需在Chrome扩展管理页面点击「重新加载」生效。

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