从 twitter 获取推文的 chrome 扩展代码问题答案

【问题标题】：Issue with chrome extension code to fetch tweets from twitter从 twitter 获取推文的 chrome 扩展代码问题
【发布时间】：2012-12-17 20:17:15
【问题描述】：

我正在尝试创建一个 chrome 扩展程序，它在弹出的扩展程序中显示带有标签 perkytweets 的推文，但没有显示任何内容。

这里是 manifest.json 代码

    {
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

这是 popup.html 代码

<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }

      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }
    </style>


    <script src="script.js"></script>
  </head>
  <body>
  </body>
</html>

这里是 script.js 代码

var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://search.twitter.com/search.atom?q=perkytweets",
    true);
req.onload = showTweets;
req.send(null);


function showTweets()
{
    document.body.appendChild(req.responseXML);
}

【问题讨论】：

标签： javascript jquery api twitter google-chrome-extension

【解决方案1】：

您只需要在文档加载后触发请求。尝试将您的代码包装在 onload 处理程序中

function showTweets() {
    document.body.appendChild(req.responseXML);
}

var req;
window.onload = function() {
    req = new XMLHttpRequest();
    req.open("GET", "http://search.twitter.com/search.atom?q=perkytweets", true);
    req.onload = showTweets;
    req.send(null);
}

更新

您需要允许访问 twitter URL，将其添加到您的清单中：

"permissions": [ "http://search.twitter.com/*" ]

所以你的manifest.json 现在看起来像这样：

{
    "name": "My First Extension",
    "version": "1.0",
    "manifest_version": 2,
    "description": "The first extension that I made.",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "http://search.twitter.com/*"
    ]
}

更新

req.responseXML 还不是元素，因此不能直接附加到正文，console.log 你的结果并从那里开始。

【讨论】：

为你的扩展打开检查器，chrome 日志说什么？
它给出的错误 XMLHttpRequest cannot load search.twitter.com/search.atom?q=perkytweets. Access-Control-Allow-Origin 不允许来源 chrome-extension://cbphocgfcalbcgcndefolpdljmapgnim。
好的，现在我们要去某个地方了，您需要在清单中允许访问该网址，我现在就更新答案
好的，我刚刚在清单文件中授予了权限，但现在出现了一些新错误.....未捕获的错误：HIERARCHY_REQUEST_ERR: DOM Exception 3 script.js:14