标签：html5 google-chrome-extension cors browser-extension javascript
我正在尝试编写一个浏览器扩展程序来执行一些图像处理,但是我需要访问图像数据.我的方法是创建一个隐藏的canvas元素,通过drawImage向其绘制图像和视频,然后使用getImageData读取像素数据.这种方法效果很好,但在许多页面上,一半内容被CORS错误拒绝.
对于为什么存在CORS,我仍然感到困惑(不偷数据,但是如果数据在客户端计算机上,它是否已经“被盗”了？：S).它似乎导致的一切都是像JS脚本注入之类的迟钝的黑客.所以1.它不起作用,因为它太复杂了,以至于每个浏览器都无法正确管理,并且2.开发人员受到惩罚,必须编写特定于浏览器的解决方法.因此,我想我必须有一个错误的主意,因为这似乎很愚蠢.
退后一步,我认为可以执行某些图像处理的扩展的想法是完全正常的,并且不是恶意的,因此请不要回答“不,出于安全原因,您不应该这样做”.
我怀疑浏览器将扩展名视为可能试图做恶意事情的外来东西.如何使浏览器确信客户端需要这些功能,并赋予我访问图像和视频内容的权限？我已经拥有对DOM的完全访问权限,那么多花些钱会带来什么不同呢？
有没有其他方法可以从扩展程序获取图像/视频数据？
解决方法:
向清单文件添加正确的权限后,您可以像不受相同的原始策略限制那样处理跨域数据.在扩展过程中的background page或任何其他页面中,您可以获取所描述逻辑的有效演示,如下所示：
// background.js
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = document.createElement('img');
image.onload = function() {
context.drawImage(image, 0, 0);
// Demo: Show image
window.open(canvas.toDataURL('image/png'));
};
image.src = 'https://stackoverflow.com/favicon.ico';
这是此特定演示的最小清单文件：
{
"name": "Get image data",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": [
"https://stackoverflow.com/favicon.ico",
"http://cdn.sstatic.net/stackoverflow/img/favicon.ico"
]
}
需要第二个权限,因为https://stackoverflow.com/favicon.ico重定向到http://cdn.sstatic.net/stackoverflow/img/favicon.ico.
请注意,该代码在content scripts中不起作用,因为DOM是共享的,并且Chrome无法仅提供对内容脚本的不受限制的原始访问.
根据您的实际需求,您也可以尝试使用XMLHttpRequest以原始格式获取图像数据,并以所需的任何方式对其进行处理.此方法还可以在内容脚本中使用,它们的优点是效率更高,还可以保留图像的字节(使用canvas方法,在将图像转换为数据URL之前,浏览器会对其进行解析和处理) .
var x = new XMLHttpRequest();
x.responseType = 'blob';
x.open('get', 'https://stackoverflow.com');
x.onload = function() {
var fileReader = new FileReader();
fileReader.onloadend = function() {
// fileReader.result is a data-URL (string)
window.open(fileReader.result);
};
// x.response is a Blob object
fileReader.readAsDataURL(x.response);
};
x.send();
标签：html5,google-chrome-extension,cors,browser-extension,javascript 来源： https://codeday.me/bug/20191122/2056480.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。