Electronic Joint Business

Solution for E-Business

plugin

编写 Google Chrome 浏览器扩展 — CodeProject Reputation Watcher

本文将探讨如何利用 jQuery 和 jQuery UI 来构建 Chrome 浏览器扩展,并将之集成到 Chrome 中。文中讨论的扩展会读取 CodeProject 的会员信息,并查看荣誉值,它会将这些信息存储在本地,日后再查询 CodeProject 时会将这些变化呈现到表格中。该扩展还可以读取并显示会员的荣誉值走势图。1

背景
编写 Chrome 扩展所需的文档可以在 Google Chrome Externsion 上找到。用到的 javascript 类库可参见jQueryjQuery UI

Chrome 浏览器扩展
Chrome 扩展本质上是一些嵌入 JavaScript 和 CSS 的 HTML 文件。为了让 Chrome 知道该如何处理这些文件并呈现给用户,必须在项目的根目录中的清单文件(manifest)中加以规定。该清单文件的文件名固定为:“manifest.json”。

我们先来看看本范例的清单文件:

{
  "manifest_version": 2,
  "name": "CodeProject Reputation Watcher",
  "short_name": "CPRepWatcher",
  "version": "2.0",
  "content_security_policy": "script-src ‘self’ https://ssl.google-analytics.com ‘unsafe-eval’; object-src ‘self’ ",
  "description": "Extension to retrieve a CodeProject accounts reputation points.",
  "icons": {
      "48":"images/bob48.png",
      "128":"images/bob128.png"
  },
  "browser_action": {
    "default_icon": "images/bob.png",
    "default_popup": "cprepwatch.html"
  },
  "options_page": "options.html",
  "permissions": [
    "http://*.codeproject.com/"
  ]
}

开始的一些基本属性比如:“name”、 “version” 和 “description” 含义相当直观无需解释。“icons” 属性定义了扩展可以使用的多个图标文件,安装扩展后,这些图标会显示在 Chrome 扩展页及工具栏上。

>>> 阅读全文

 

, , , , ,

用Visual Studio开发Firefox扩展 (一) 简介与准备

Firefox插件简介
Extension就是一个zip包,里面有规定的一些必要文件。这个可以下载几个插件看一下他们的目录结构就好了。我下载了一个 QuickNote,看了一下,主要包括一个install.rdf(安装包相关信息和文件资源路径等配置)、chrome.manifest(设置各种 XUL文件路径以及其他的一些资源文件路径)、chrome文件夹(里面放着插件的所有源文件),不过chrome文件夹里面的文件我还没有过多研究。

Plugin好像是另外一码事了,在Mozilla Developer Center的Plugin开发介绍文中有这么一句:Plugins are different from extensions, which modify or enhance the functionality of the browser itself. Plugins are also different from search plugins, which plug additional search engines in the search bar. (插件与扩展不同,它更改或者改善了浏览器自身的功能。插件与搜索插件又不同,搜索插件在搜索工具栏上添加了额外的搜索引擎。)

我的理解,插件可以让你在FF中使用自己的View来展示、用自己编写的二进制文件来做某些事情,不仅仅是利用FF自身支持的一些特性和功能。而扩展相对来说就不需要这些东西,只利用FF的开发API就好了。Firefox插件,也叫Mozilla插件,它是一段程序。通常,界面使用XUL语言(XML的一个子集)或者XUL内嵌HTML编写,而程序逻辑使用ECMAScript (Standard ECMA-262)(俗称JavaScript)编写。

XUL可以是独立的窗体,可以是对话,也可以是overlay。Overlay可以用于修改已经构建好的界面。下面是一段示例的XUL代码:

<overlay id="main-overlay" xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <menu id="file_menu">
  <menuitem name="Example One"/>
  <menuitem name="Example Two"/>
  <menuitem name="Example Three"/>
  <menuitem name="Example Four" position="1"/>
 </menu>
</overlay>

而JavaScript可以用来定义程序的行为。CSS可以用于自定义样式,而XPCOM可以用于调用Firefox提供的接口。另外,现在有一些JavaScript Library,可以直接使用而降低代码难度。

>>> 阅读全文

 

, , , , , , ,