将Instagram添加到Tweetdeck中

Question

我终于厌倦了Tweetdeck和它无法从Instagram上加载图片。所以我决定用Chrome扩展来解决这个问题。这是一件非常困难的事情，因为Tweetdeck有非常严格的内容安全策略。不过，我在附近找到了一份工作。

使用Instagram嵌入码，我们可以提取图像的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扩展文档

请求跨源权限 通过向清单文件的权限部分添加主机或主机匹配模式(或两者)，扩展名可以请求对其来源以外的远程服务器的访问。

有用的链接

• 声明权限- Chrome扩展文档
• 匹配模式- Chrome扩展文档
• XHR扩展文档

编辑:确保脚本以正确的方式执行，更多细节请参见这里。