基于Greasemonkey的Firefox浏览器扩展

  • 1,304 views
Uploaded on

...

...

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,304
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

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 中实时显示股票信息
  • 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. 总结
    • 新的应用方式的体验
    • 跨域问题的影响
    • 页面标准的困扰
    • 变量作用域的限制
    • 个人对扩展应用的理解