Chrome扩展(Manifest V3)通过Content Script注入图片遭浏览器拦截的解决方法

开发基于Manifest Version 3的Chrome扩展时，通过contentScript.js向页面注入图片，但图片无法加载，仅显示标题。将图片URL在新标签页打开时，出现错误提示：

kmifipphflgbabnneonimcpamgkkilkn is blocked
This page has been blocked by Microsoft Edge

请问该问题是否由安全机制导致，应如何解决？

相关代码 #

const newVedioLoaded = ()=>{
    const bookmarkBtnExists = document.getElementsByClassName("bookmark-btn")[0];
    console.log(bookmarkBtnExists)
    if(!bookmarkBtnExists){
        bookmarkBtn = document.createElement('img');
        bookmarkBtn.src = chrome.runtime.getURL("Assets/bookmark.png");
        bookmarkBtn.className = 'ytp-button ' + 'bookmark-btn';
        bookmarkBtn.title = 'Click to book mark the current timestamp'
        youtubeLeftcontrol = document.getElementsByClassName('ytp-left-controls')[0];
        youtubePlayer = document.getElementsByClassName('vedio-stream')[0];
        youtubeLeftcontrol.appendChild(bookmarkBtn)
    }
    console.log(bookmarkBtn);
}

这个问题确实是浏览器安全机制导致的，核心是Manifest V3的扩展资源访问限制，解决步骤如下：

• 配置web_accessible_resources字段
  在MV3规范中，扩展内部资源必须通过manifest.json的web_accessible_resources声明，才能被内容脚本注入到宿主页面。添加以下配置：

  "web_accessible_resources": [
      {
          "resources": ["Assets/bookmark.png"],
          "matches": ["https://www.youtube.com/*"] // 替换为你要注入的目标网站，或用"<all_urls>"适配所有网站
      }
  ]
  

  注意资源路径要和实际文件结构完全一致，matches尽量缩小范围，避免不必要的资源暴露。

• 校验资源路径
  确认Assets/bookmark.png存在于扩展根目录，路径大小写要严格匹配（浏览器内部处理区分大小写）。

• 刷新扩展并清除缓存
  进入浏览器扩展管理页面（chrome://extensions/），开启开发者模式，点击"重新加载"按钮，清除旧配置缓存后再测试。

• 适配Edge浏览器
  Edge的安全拦截策略更严格，确保扩展已被加入信任列表，可先在Chrome中验证功能正常，再同步适配Edge的扩展配置。

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