Добавление Instagram в Tweetdeck

В конце концов мне надоел 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);

person dtsn    schedule 23.04.2015    source источник


Ответы (1)


Попробуйте добавить в свой manifest.json:

"permissions": [
    "*://*.instagram.com",
    "*://*.twitter.com"
],

Из документации по расширению Chrome для XHR:

Запрос разрешений для разных источников

Добавляя хосты или шаблоны соответствия хостов (или и то, и другое) в раздел разрешений файла манифеста, расширение может запрашивать доступ к удаленным серверам за пределами своего источника.

Полезные ссылки

Изменить: убедитесь, что скрипты выполняются правильно. Подробнее см. здесь.

person dgil    schedule 23.04.2015
comment
Спасибо @dgil, однако веб-страница tweetdeck применяет политику безопасности содержимого скриптов, и манифест не отменяет ее, не так ли? - person dtsn; 23.04.2015
comment
@dtsn да, это так. Манифест расширения Chrome позволяет переопределить настройки страницы. Посмотрите этот ответ: stackoverflow.com/a/9776660/1776889 - person dgil; 23.04.2015
comment
@dtsn Я обновил свой ответ, добавив ссылку на документацию, в которой объясняются разрешения CORS. - person dgil; 23.04.2015
comment
даже с обновленным манифестом я получаю ту же ошибку: Отказано в загрузке изображения 'images.instagram.com/transparent .gif', поскольку он нарушает следующую директиву Content Security Policy: img-src https: data:. - person dtsn; 23.04.2015
comment
@dtsn Я забыл добавить *.twitter.com в manifest.json. Можешь попробовать? - person dgil; 23.04.2015
comment
Кстати, я не уверен, что вам нужен content_security_policy, если вы добавите оба сайта в permissions. - person dgil; 23.04.2015
comment
content_security_policy не влияет на сценарии контента. Объяснение см. в этом. - person Xan; 23.04.2015
comment
спасибо @xan этот пример устранил проблему, я неправильно добавил скрипт в тело - person dtsn; 24.04.2015