В конце концов мне надоел Tweetdeck и его невозможность загружать изображения из Instagram. Поэтому я решил решить проблему с помощью расширения Chrome. Это довольно сложно сделать, поскольку у Tweetdeck очень строгая политика безопасности контента. Однако я нашел обходной путь.
Используя код встраивания в Instagram, мы можем извлечь идентификатор изображения и сформировать новое изображение на основе идентификатора. . Это ссылка на редирект 301 на фактическое изображение. Однако, когда я пытаюсь запустить это на Tweetdeck, появляется случайный прозрачный .png. Что вызывает эту ошибку:
Refused to load the image 'http://images.instagram.com/transparent.gif' because it violates the following Content Security Policy directive: "img-src https: data:".
Я не могу найти, откуда берется этот png, он не загружается ни моим приложением, ни Instagram. Это ломает все остальное и приводит к отмене перенаправления 301.
Любая помощь будет принята с благодарностью.
Манифест
{
"manifest_version": 2,
"name": "Instagram for TweetDeck",
"description": "This extension will show thumbnails for instagram on TweetDeck",
"version": "1.0",
"content_security_policy": "script-src 'self'; object-src 'self'; img-src http: https: data:",
"content_scripts": [
{
"matches": ["https://tweetdeck.twitter.com/"],
"js": ["instagram_tweetdeck.js"]
}
]
}
JS-файл
var func = function () {
var Instagram = function () {
this.links = [];
};
Instagram.prototype.add = function (url, element) {
if (this.links.indexOf(url) !== -1) {
// already done this link
return;
}
this.links.push(url);
var id = url.substr(url.indexOf('/p/')).replace('/p/', '').replace('/', '');
obj = document.createElement('img');
obj.src = 'https://instagram.com/p/' + id + '/media/?size=m';
obj.width = "230";
obj.style.marginTop = "10px";
element.parentNode.insertBefore(obj, element);
};
var instagram = new Instagram();
var poll = function () {
var nodes = document.getElementsByTagName('a');
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].innerHTML.indexOf('instagram.com') !== -1) {
instagram.add(nodes[i].innerHTML, nodes[i]);
}
}
};
setInterval(poll, 500);
};
var script = document.createElement("script");
script.textContent = "(" + func.toString() + ")();";
document.body.appendChild(script);