将 Instagram 添加到 Tweetdeck

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扩展文档：

请求跨域权限

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

有用的链接

• Declare permissions - Chrome Extension docs
• Match patterns - Chrome Extension docs
• XHR - Chrome Exntension docs

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