如何修改浏览器扩展popup页面中img元素的src属性

首先明确核心规则：

• 浏览器扩展的content script（也就是你写的foreground.js）运行在目标网页的独立沙箱里，它的全局document对象永远指向当前打开的目标网页DOM，不存在popup.getElementById()这类可以跨上下文直接操作popup DOM的API，两个页面的运行环境是完全隔离的。
• popup页面的DOM只能由popup自身引入的、运行在popup上下文的JS文件操作，不能由其他上下文的脚本直接修改。

你现有代码的问题 #

1. 你在foreground.js里写的Document.getElementById('#imgAchatEnCours')存在语法错误：getElementById的参数不需要带#前缀，且构造函数首字母为小写document；就算修正语法，这行代码操作的也是目标网页里id匹配的元素，根本碰不到popup里的图片节点。
2. 你试图用localStorage传值的思路方向可行，但后续操作DOM的逻辑写在了foreground.js里，执行上下文不对，不可能生效。

可直接落地的实现方案 #

核心逻辑拆分：foreground.js只负责从目标网页提取数据，数据传递完成后，由popup自己的JS操作自身DOM完成渲染。

1. 精简foreground.js逻辑，只保留网页信息提取能力 #

删掉foreground.js里所有试图操作popup DOM的代码，只保留爬取数据、存储数据的逻辑，推荐使用扩展原生的chrome.storage做数据存储（比localStorage适配性更好，不会和网页自身的localStorage冲突）：

// foreground.js 仅运行在目标网页上下文
// 提取目标页信息
const productPrice = document.getElementsByClassName('a-offscreen')[6]?.innerText;
const productTitle = document.querySelector('#productTitle')?.textContent;
const productImg = document.querySelector('#imgTagWrapperId img')?.src;

// 存入扩展本地存储
chrome.storage.local.set({
  currentProduct: {
    price: productPrice,
    title: productTitle,
    imgSrc: productImg
  }
}, () => {
  console.log('商品信息已完成存储');
});

注意：使用chrome.storage需要在扩展的manifest.json中声明storage权限：

"permissions": ["storage"]

2. 编写popup专属的JS文件，操作自身DOM #

在popup同级目录新建popup.js，这个文件运行在popup的上下文里，它的document对象直接指向popup自身的DOM结构：

// popup.js 仅运行在popup上下文
document.addEventListener('DOMContentLoaded', () => {
  // 读取存储里的商品数据
  chrome.storage.local.get('currentProduct', (res) => {
    const productInfo = res.currentProduct;
    if (productInfo?.imgSrc) {
      // 直接查找popup内的图片节点，修改src属性
      const targetImg = document.getElementById('imgAchatEnCours');
      targetImg.src = productInfo.imgSrc;
    }
  })
})

3. 在popup.html中引入专属JS #

把你原来引入的im_achat.js替换成新写的popup.js，确保script标签放在body末尾，等DOM加载完成后再执行逻辑：

<!-- 原有内容保留 -->
<script src="jquery.js"></script>
<script src="popup.js"></script>

可选：实时消息通信方案 #

如果你需要打开popup时获取当前网页的最新数据，不想依赖提前存储，可以用扩展的消息通信API实现：

• popup打开时主动向当前标签页的content script发送数据请求消息
• content script收到请求后立刻提取当前页面的最新数据，回传给popup
• popup收到回传的数据后，自行更新DOM完成渲染
  这种方案不需要提前写入存储，实时性更高，适合动态变化的页面场景。

内容的提问来源于stack exchange，提问作者e.clochard