Question

我终于厌倦了Tweetdeck并且无法从Instagram加载图像。所以我决定使用Chrome扩展程序解决问题。这是一件非常困难的事情，因为Tweetdeck有非常严格的内容安全策略。但是我找到了一个解决方法。

使用Instagram embedding code我们可以提取图像的ID并根据ID形成新图像。这是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);

Answer 1

尝试添加manifest.json：

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

来自XHR的Chrome扩展程序文档：

请求跨域权限

通过将主机或主机匹配模式（或两者）添加到清单文件的权限部分，扩展可以请求访问其原始数据之外的远程服务器。

有用的链接

编辑：确保脚本以正确的方式执行，请参阅here以获取更多详细信息。

将Instagram添加到Tweetdeck

1 个答案:

请求跨域权限

有用的链接