iT邦幫忙

DAY 4
5

Chrome Extension 開發筆記系列 第 4

Chrome Extension 筆記(04)跨域後的練習, 讀取 RSS

  • 分享至 

  • xImage
  •  

在第二篇入門的介紹中有稍微提到在 manifest 中,
permissions 的屬性若設成 http(s) 形式,
就能擁有對應的跨網域請求的權限,
這篇是針對這點做的一個簡單的 DEMO.
總共三個檔案 "manifest.json"、"index.html"、"app.js"

內容如下
manifest.json

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.0",
   "browser_action": {
      "default_popup": "index.html"
   },
	"permissions": [
		"http://ithelp.ithome.com.tw/"
	]
}

index.html

		<title>ironman6</title>
		<style>body {width: 500px ;}</style>
	
	
		<button id="refresh">Refresh</button>
		<div id="rssList">Loading</div>
		<script src="app.js"></script>
	

app.js

document.addEventListener('DOMContentLoaded', function () {
	document.querySelector('#refresh').addEventListener('click', getRSS);
	getRSS();
});

function getRSS(){
	var xhr = new XMLHttpRequest();
	var url = 'http://ithelp.ithome.com.tw/rss/question?tag=%E9%90%B5%E4%BA%BA%E8%B3%BD';
	xhr.open('GET', url);
	xhr.onload = function(e) {
		if (this.status === 200) {
			var xml     = this.responseXML;
			var item    = xml.querySelectorAll('item');
			var rssList = document.querySelector('#rssList');
			var output  = [];
			for (var i = 0; i < item.length; i++){
				var rss   =  item[i];
				var title = rss.querySelector('title').textContent;
				var link  = rss.querySelector('link').textContent;
				output.push('<li><a href="' + link + '">' + title + '</a></li>');
			}
			document.querySelector('#rssList').innerHTML = output.join('');
		}
	};
	xhr.send();
}

程式結果:


上一篇
Chrome Extension 筆記(03)安全策略
下一篇
Chrome Extension 筆記(05)取得所有分頁(TAB)訊息
系列文
Chrome Extension 開發筆記27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言