将 Instagram 添加到 Tweetdeck

Question

我终于受够了 Tweetdeck 以及它无法从 Instagram 加载图片的问题。所以我决定使用 Chrome 扩展来解决这个问题。这是一件非常困难的事情，因为 Tweetdeck 有非常严格的内容安全政策。但是我找到了解决方法。

利用Instagram embedding code我们可以提取图片的ID，并根据ID形成新的图片。这是一个 link 到 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 扩展文档：

Requesting cross-origin permissions

By adding hosts or host match patterns (or both) to the permissions section of the manifest file, the extension can request access to remote servers outside of its origin.

有用的链接

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

将 Instagram 添加到 Tweetdeck

Adding Instagram into Tweetdeck

javascript

twitter

google-chrome

google-chrome-extension

instagram-api

Requesting cross-origin permissions

有用的链接