基于 greasemonkey 的 Firefox 浏览器扩展 通过 google 在 Firefox 中实时显示股票信息
JavaScript  &  Firefox <ul><li>JavaScript </li></ul><ul><li>脚本编写语言  </li></ul><ul><li>基于对象的语言  </li></ul><ul><li>安全性  </li...
毕业设计的任务 <ul><li>怎样通过使用 JavaScript 语言去利用 Google 的资源来得到股票信息。 </li></ul><ul><li>如何将得到的信息用什么样的方式在浏览器中显示。 </li></ul><ul><li>设计体...
Firefox 扩展的结构 Addon.xpi chrome install.rdf chrome.manifest Addon.jar content locale skin Addons.js Addon.xul
parser 剖析器 <ul><li>信息的来源: google.cn </li></ul><ul><li>分析对象:网页源代码 </li></ul><ul><li>方式: XMLHttpRequest 请求 </li></ul><ul><li...
XMLHttpRequest 跨域问题 <ul><li>对于客户端的 JavaScript, 可能是出于安全性的考虑,在发送 HTTP 请求的时候,只准许在同一个域内进行访问。对于跨域的访问,可以通过中间的服务器来实现 , 前提是信息不能过于繁...
greasemonkey <ul><li>Firefox 用户脚本管理器 </li></ul><ul><li>作用:控制页面设计和交互 </li></ul><ul><li>用户脚本: JavaScript 脚本 </li></ul><ul><l...
GM_xmlhttpRequest  <ul><li>Greasemonkey 专有的 API </li></ul><ul><li>GM_xmlhttpRequest({ </li></ul><ul><li>method: 'GET', </l...
HTML  &  CSS <ul><li>Google 的页面 </li></ul><ul><li>url 的建立 </li></ul><ul><li>查询目标的选择 </li></ul><ul><li>已得数据的操作 </li></ul><u...
总结 <ul><li>新的应用方式的体验 </li></ul><ul><li>跨域问题的影响 </li></ul><ul><li>页面标准的困扰 </li></ul><ul><li>变量作用域的限制 </li></ul><ul><li>个人对扩...
Upcoming SlideShare
Loading in...5
×

基于Greasemonkey的Firefox浏览器扩展

1,328

Published on

...

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,328
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

基于Greasemonkey的Firefox浏览器扩展

  1. 1. 基于 greasemonkey 的 Firefox 浏览器扩展 通过 google 在 Firefox 中实时显示股票信息
  2. 2. JavaScript & Firefox <ul><li>JavaScript </li></ul><ul><li>脚本编写语言 </li></ul><ul><li>基于对象的语言 </li></ul><ul><li>安全性 </li></ul><ul><li>动态性 </li></ul><ul><li>跨平台 </li></ul><ul><li>当把一个 JavaScript 解释器嵌入到 Web 浏览器时,就形成了客户端的 JavaScript 。 </li></ul><ul><li>Firefox </li></ul><ul><li>精简的内核 </li></ul><ul><li>强大的扩展性 </li></ul><ul><li>良好的安全性 </li></ul><ul><li>最早支持 JavaScript 的浏览器 </li></ul><ul><li>在 Firefox 下有些网页不能正确的显示,但在 ie 下却可以,是因为网页中含有了不符合 W3C 标准的语句。 ie 从来都是不标准的。 </li></ul>
  3. 3. 毕业设计的任务 <ul><li>怎样通过使用 JavaScript 语言去利用 Google 的资源来得到股票信息。 </li></ul><ul><li>如何将得到的信息用什么样的方式在浏览器中显示。 </li></ul><ul><li>设计体现思想: B/S 的结构已经越来越得到人们的注意,在应用上的优势也越来越明显 </li></ul>
  4. 4. Firefox 扩展的结构 Addon.xpi chrome install.rdf chrome.manifest Addon.jar content locale skin Addons.js Addon.xul
  5. 5. parser 剖析器 <ul><li>信息的来源: google.cn </li></ul><ul><li>分析对象:网页源代码 </li></ul><ul><li>方式: XMLHttpRequest 请求 </li></ul><ul><li>方法: getElementById </li></ul><ul><li>获取信息的形式:字符串形式 </li></ul>
  6. 6. XMLHttpRequest 跨域问题 <ul><li>对于客户端的 JavaScript, 可能是出于安全性的考虑,在发送 HTTP 请求的时候,只准许在同一个域内进行访问。对于跨域的访问,可以通过中间的服务器来实现 , 前提是信息不能过于繁琐和庞大。 </li></ul>
  7. 7. greasemonkey <ul><li>Firefox 用户脚本管理器 </li></ul><ul><li>作用:控制页面设计和交互 </li></ul><ul><li>用户脚本: JavaScript 脚本 </li></ul><ul><li>相关的技术 :HTML;DOM;CSS </li></ul><ul><li>头部格式: </li></ul><ul><li>// aGen`s stockTicker </li></ul><ul><li>// version 0.3 BETA! </li></ul><ul><li>// 2008-06-02 </li></ul><ul><li>// </li></ul><ul><li>// ==UserScript== </li></ul><ul><li>// @name aGen`s stockeTicker </li></ul><ul><li>// @description demo </li></ul><ul><li>// @include * </li></ul><ul><li>// ==/UserScript== </li></ul>
  8. 8. GM_xmlhttpRequest <ul><li>Greasemonkey 专有的 API </li></ul><ul><li>GM_xmlhttpRequest({ </li></ul><ul><li>method: 'GET', </li></ul><ul><li>url: www.google.com </li></ul><ul><li>headers: { </li></ul><ul><li>'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey', </li></ul><ul><li>'Accept': 'application/atom+xml,application/xml,text/xml', </li></ul><ul><li>}, </li></ul><ul><li>onload: function(responseDetails) </li></ul>
  9. 9. HTML & CSS <ul><li>Google 的页面 </li></ul><ul><li>url 的建立 </li></ul><ul><li>查询目标的选择 </li></ul><ul><li>已得数据的操作 </li></ul><ul><li>已得数据的判断 </li></ul><ul><li>插入的元素 </li></ul><ul><li>元素种类 </li></ul><ul><li>DOM 结构 </li></ul><ul><li>插入方式 </li></ul><ul><li>元素控制 </li></ul><ul><li>var div, a,b,p; </li></ul><ul><li>div = document.createElement('div'); </li></ul><ul><li>div.setAttribute('style','margin: 0;font-size: 80% /*smaller*/;font-weight: bold;line-height: 1.1;text-align: center;position: fixed; bottom: 0; left: auto; width: 8.5em; right: 0;') </li></ul><ul><li>var searchInput = document.createElement(&quot;input&quot;); </li></ul><ul><li> searchInput.value = &quot;&quot;; </li></ul><ul><li> searchInput.setAttribute('style','width: 100px; background: #666666;') </li></ul><ul><li> searchInput.setAttribute('id','searchInput'); </li></ul><ul><li> searchInput.addEventListener('keypress',onSearchKeypress,false); </li></ul><ul><li>div.appendChild(searchInput) </li></ul><ul><li> </li></ul><ul><li>document.body.style.paddingBottom = &quot;4em&quot;; </li></ul><ul><li>document.body.appendChild(div); </li></ul><ul><li>addGlobalStyle('#accessbar-div-0 {margin: 0;'+ </li></ul><ul><li>'font-size: 80% /*smaller*/;'+ </li></ul><ul><li>'font-weight: bold; '+ </li></ul><ul><li>'line-height: 1.1;'+ </li></ul><ul><li>'text-align: center;'+ </li></ul><ul><li>'position: fixed; '+ </li></ul><ul><li>'bottom: 0; left:auto; right:110px;}'+ </li></ul><ul><li>'#accessbar-div-0 table{'+ </li></ul><ul><li>'margin: 0 ! important;'+ </li></ul><ul><li>'list-style: none;'+ </li></ul><ul><li>'padding: 0.3em 0.4em ! important;'+ </li></ul><ul><li>'font-family: Arial, sans-serif ! important;'+ </li></ul><ul><li>'font-size: 80% /*smaller*/;'+ </li></ul><ul><li>'background:'+cl+' ! important;'+ </li></ul><ul><li>'border: thin dashed #000080 ! important;'+ </li></ul>
  10. 10. 总结 <ul><li>新的应用方式的体验 </li></ul><ul><li>跨域问题的影响 </li></ul><ul><li>页面标准的困扰 </li></ul><ul><li>变量作用域的限制 </li></ul><ul><li>个人对扩展应用的理解 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×