Chrome扩展jQuery未加载排查：点击按钮替换网页图片失败

你遇到的问题主要有两个核心点：Content Scripts无法加载外部CDN资源，以及Popup与网页上下文隔离导致无法直接操作页面元素，下面一步步帮你修正：

1. 修复Content Scripts的jQuery加载问题 #

Chrome扩展的Content Scripts不允许直接引用外部URL的JS文件，必须使用本地文件。你需要先把jQuery下载到你的扩展目录中（比如命名为jquery.min.js），然后修改manifest.json的content_scripts配置：

{
  "manifest_version": 2,
  "name": "Getting started example",
  "description": "example",
  "version": "1.0",
  "content_scripts": [
    {
      "js": ["jquery.min.js", "content.js"], // 先加载本地jQuery，再加载自定义脚本
      "matches": ["http://*/*", "https://*/*"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

2. 解决Popup与网页的上下文隔离问题 #

Popup有自己独立的DOM和JavaScript运行环境，和当前打开的网页完全隔离——你在Popup里写的$("#change").click(...)只能操作Popup里的元素，根本碰不到网页中的<img>标签。正确的做法是通过消息传递让Popup通知Content Script执行替换操作：

步骤1：创建content.js（原changeIMG.js的功能迁移到这里） #

// 监听来自Popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "replaceImages") {
    $("img").attr("src", "https://image.flaticon.com/teams/slug/freepik.jpg");
    sendResponse({status: "done"});
  }
});

步骤2：修改popup.html和Popup脚本 #

把原来的changeIMG.js改成popup.js，专门处理Popup的按钮点击和消息发送：

popup.html：

<!DOCTYPE html>
<html>
<head>
  <!-- 这里的jQuery是给Popup自己用的，可选，不用也可以用原生JS -->
  <script src="jquery.min.js"></script>
</head>
<body>
  <button id="change">Click</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js：

$("#change").click(function() {
  // 向当前活跃标签页的Content Script发送消息
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {action: "replaceImages"}, (response) => {
      console.log("图片替换完成:", response.status);
    });
  });
});

额外提示 #

• 如果你不想用jQuery，完全可以用原生JS替代，比如document.getElementById("change").addEventListener(...)和document.querySelectorAll("img")，这样还能减少扩展体积。
• 确保你的扩展目录结构正确：所有文件（manifest.json、jquery.min.js、content.js、popup.html、popup.js、icon.png）都在同一个根目录下。

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