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' >") )

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

1 个答案: