chromeプラグインで、スクリプト中にドメインをまたぐ要求を実現します.
3830 ワード
ソース: contentscript.js maifest.json manifast.jsonコード:
{
"name": "Content Script Cross-Domain XMLHttpRequest Example",
"version": "2.0.0",
"description": "Demonstrates making cross domain requests from a content script by putting Twitter trends on Google News.",
"permissions": [
"https://api.twitter.com/*"
],
"icons": {
"48" : "sample-48.png",
"128" : "sample-128.png"
},
"content_scripts": [
{
"matches": ["http://news.google.com/*"],
"js" : ["contentscript.js"]
}
]
}
contentscript.jsコード:/*
* Copyright (c) 2011 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
/**
* Performs an XMLHttpRequest to Twitter's API to get trending topics.
*
* @param callback Function If the response from fetching url has a
* HTTP status of 200, this function is called with a JSON decoded
* response. Otherwise, this function is called with null.
*/
function fetchTwitterFeed(callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
callback(data);
} else {
callback(null);
}
}
}
// Note that any URL fetched here must be matched by a permission in
// the manifest.json file!
var url = 'https://api.twitter.com/1/trends/daily.json?exclude=hashtags';
xhr.open('GET', url, true);
xhr.send();
};
/**
* Parses text from Twitter's API and generates a bar with trending topics at
* the top of the current page
*
* @param data Object JSON decoded response. Null if the request failed.
*/
function onText(data) {
// Only render the bar if the data is parsed into a format we recognize.
if (data.trends) {
// Create the overlay at the top of the page and fill it with data.
var trends_dom = document.createElement('div');
var title_dom = document.createElement('strong');
title_dom.innerText = 'Topics currently trending on Twitter:';
trends_dom.appendChild(title_dom);
for (var key in data.trends) {
for (var i=0,trend; trend = data.trends[key][i]; i++) {
var link_dom = document.createElement('a');
link_dom.setAttribute('href', trend.url)
link_dom.innerText = trend.name;
link_dom.style.color = '#000';
trends_dom.appendChild(document.createTextNode(' '));
trends_dom.appendChild(link_dom);
}
break;
}
trends_dom.style.cssText = [
'background-color: #ffd700;',
'background-image: -webkit-repeating-linear-gradient(' +
'45deg, transparent, transparent 35px,' +
'rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 70px);',
'color: #000;',
'padding: 10px;',
'font: 14px Arial;'
].join(' ');
document.body.style.cssText = 'position: relative';
document.body.parentElement.insertBefore(trends_dom, document.body);
}
};
fetchTwitterFeed(onText);