javascript - Chrome 扩展程序 - 无法在浏览器中找到图像

Question

在开发 Chrome 扩展程序时，我通过内容 javascript 从图像文件夹中注入图像。但是 chrome 无法将其注入/加载到网页中并显示损坏的图像而不是图像。

通过检查网页，我发现 src=chrome-extension://mjpjhbhenfpklnbkbegbhdnganbppjdd/images/imgage1.png ，单击它将在新选项卡中打开图像。

为了问题理解，我这里贴了menifest.json文件和contentscript.js的相关代码

在 menifest.json 文件（版本 2）中，

 "web_accessible_resouces" : ["jquery.js","contentscript.js","images/image1.png"],

在 contentscript.js 中

var imurl = chrome.extension.getURL('/images/image1.png');

$jq(this).html( $jq(this).html().replace(/(\d-\d)/g,"<a href='#' class='anchr'>$1</a><img width='10' length='10' src='"+imurl+"' class='image1' >") );

任何人都可以提出解决方案吗？

Answer 1

这是资源注入的安全限制。使用内容脚本作为data-uri传递图像。

您的内容脚本可能看起来像

var imdata = data-uri-here;
$jq(this).html( $jq(this).html().replace(/(\d-\d)/g,"<a href='#' class='anchr'>$1</a><img width='10' length='10' src='"+imdata+"' class='image1' >") )