Saber 酱的抱枕

通过 chrome.webRequest.onBeforeSendHeaders 事件来设置 referer，来达到跨域的目的。

1. 在 manifest.json 中声明权限

"permissions": [
    "tabs", "downloads", "webRequest", "webRequestBlocking", "*://www.pixiv.net/*", "*://www.pixivision.net/*", "*://i.pximg.net/*"
]

webRequest、webRequestBlocking 是必须的；后面的网址列表表示这个扩展的生效范围。

在做跨域的时候，需要把你的目标网址也添加进去。比如你的扩展运行在 a.com，去请求 b.com 的内容，那么这两个网址都要写进去。

2. 在后台代码中设置 referer

chrome.webRequest.onBeforeSendHeaders.addListener(function (details) {
	for (var i = 0; i < details.requestHeaders.length; ++i) {
		if (details.requestHeaders[i].name === 'Referer') {
			details.requestHeaders[i].value = 'https://www.pixiv.net/';
			break;
		}
	}
	return {
		requestHeaders: details.requestHeaders
	};
}, {
	urls: ['https://www.pixiv.net/*']
}, ['blocking', 'requestHeaders']);

chrome.webRequest.onBeforeSendHeaders 事件的3个参数，分别为回调函数、过滤器、追加配置。后两者是可选的。

回调函数的 details 参数是 Chrome 根据追加配置里的参数传入的。我们在追加配置里声明了 requestHeaders，那么在 details 里就可以访问和操作 requestHeaders 信息。

参考 webRequest API 文档

3. 在前台发起请求即可

let my_xhr = new XMLHttpRequest;
my_xhr.open('GET', 'https://i.pximg.net/img-original/img/2018/07/03/00/00/08/69512461_p0.jpg', true);
my_xhr.responseType = 'blob';
my_xhr.timeout = 300000;
my_xhr.addEventListener('loadend', function () {
	let blob_url = window.URL.createObjectURL(my_xhr.response);
	console.log(blob_url);
	// 可以正常获取
	});
});
my_xhr.send();

和普通的 ajax 代码并没有什么不同。但是要注意的是，这里说的“前台”是 Chrome 扩展的“前台”，而非普通网页。在普通网页里执行还是会被跨域策略阻止的，在 Chrome 扩展的前台代码里请求则不会被阻止。

Chrome 扩展修改 referer 实现跨域