Your SlideShare is downloading. ×
基于Greasemonkey的Firefox浏览器扩展
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

基于Greasemonkey的Firefox浏览器扩展

720
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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