浏览器插件开发

文档标 浏览器插件开发 发布日期 – 08/04/2010 DOCUMENT ID: HZ_ RD_MAG_DOC_CONCEPT_0.1_20100804 PROJECT: RELEASE: 0.1 FEATURE: Concept Doc SUBSYSTEM: Scenarios DISTRIBUTE TO: MAG team 1 Chrome插件开发 插件开发 Once you've finished this page and the Getting Started tutorial, you'll be all set to start writing extensions and packaged apps. Note: Packaged apps are implemented as extensions, so unless otherwise stated, everything in this page applies to packaged apps. 　　1.开发语言和软件 　　开发语言就是Javascript，开发软件选择一款自己熟悉的纯文本编辑器就可以了，例如系统自带的记事本，或者支持语法高亮的UltraEdit。 　　2.插件 　　一个完整的插件是由4个部分组成，分别是manifest.json、.js文件、图标和HTML文件，设计插件就是设计这4类文件。manifest.json的作用是定义插件的属性，例如名称、版本、类型等;HTML文件具体实现插件的功能;.js文件是一个跟浏览器互动的脚本。 　　3.载入插件 　　设计好上面几个文件后，就可以将插件载入浏览器中试用一下。首先将它们整理到同一个文件夹中，然后在Chrome的工具栏中选择“扩展程序”，进入扩展管理页，在右侧选择“开发人员模式”，再点击“载入正在开发的扩展程序”按钮，定位到这个文件夹，将整个文件夹载入Chrome中。 　　4.发布插件 　　插件试用没有问题后，不妨将它发布出去让更多人使用。首先将插件所在的文件夹压缩成一个ZIP文件(别顺手压缩成了RAR文件)。然后再到扩展管理页，点击右下角的“获得更多扩展程序”链接，进入Chrome官方插件下载页面，在这个网页的左下角，你能看到“发布扩展程序”的链接，点击链接，上传ZIP压缩文件、添加插件的使用说明和截图，就可以发布插件了。 　　插件设计过程 　　1.制作图标 　　图标的格式为PNG，大小为19×19像素的图标显示在地址栏右侧，大小为48×48像素的图标显示在扩展管理页。 　　2. manifest.json 　　manifest.json定义插件的属性，这个文件的格式比较固定，大家下载代码后，根据自己的实际需要进行简单的更改就可以用了。   以下是代码片段： 　　{"name": "Our Chrome Extension's Name"， 　　"version": "1.0"， 　　"description": "This is the first Chrome extension."， 　　"icons": { "48": "icon48.png" }， //定义图片的大小，可以自己更改 　　"page_action": { "default_icon": "icon19.png" }，//定义图片的名称，可以自己更改 　　"background_page": "background.html"，//定义HTML名称，可以自己更改 　　"permissions": [ "tabs" ]， 　　"content_scripts": [{ 　　"matches": ["http://*.google.com/*"]， 　　"js": ["visit.js"]//定义.js文件名称，可以自己更改 　　}]} 　　3. .js文件 　　.js文件文件是连接浏览器和插件的桥梁，最基本的代码就是：chrome.extension.sendRequest();，它的作用是向Chrome的扩展管理程序发送一条请求消息，这条消息将被运行的插件HTML文件捕获。需要注意的是，在这个文件中，可以添加其他代码，例如一些优化代码。 　　4. HTML文件 　　HTML文件是插件的功能文件，插件要实现什么功能全靠这个文件。我以我开发的保持活跃在线插件为例，进行分析。我的插件，每隔一小段时间，随机打开论坛中的一个帖子。 　　在这个插件中，我用到了几个API：chrome.pageAction.show()，用来在浏览器地址栏右侧显示插件的图标;chrome.windows.getCurrent()，用来获取当前浏览器窗口的ID; chrome.tabs.create()，用来建立一个新的标签页;chrome.tabs.remove()，用来关闭打开的标签页。 　　这几个API比较基础，在插件开发中过程一般都用得到，如果要开发复杂的插件，则需要调用更多的API，到http://code.google.com/chrome/extensions去研究一下吧。 　　 以下是代码片段： 　 打包插件 我们想把自己制作的插件给其他人用，那么就需要将插件打包。 1. 回到Chrome的插件扩展中心，点击“打包扩展程序”按钮。 2. 选择刚才创建的文件夹，点击确定生成后缀为crx和cpm文件各一个。 把crx文件发送给自己的朋友，告诉他们你也会制作chrome插件吧。 关于插件自动升级  需要提供一个xml文件，用于升级的配置属性。  需要指定一个appid，对应于生成的Chrome插件唯一ID（记住是加上了.pem文件一起打包扩展程序的ID，而不是开发版的ID），以及下载地址、版本号，以下是豆瓣精灵的例子：  view plain 1.      2.      3.        4.          5.        6.      关于跨域提交请求  7. Chrome浏览器禁止跨域提交Ajax请求（除非是jsonp方式），但是在插件的backgroupd页面是可以直接跨域提交Ajax请求的！比如说如果想在contentscript.js中在豆瓣的页面访问新浪微博的链接，这样是不行的，Chrome会提示你禁止访问，这个时候需要把它放到background.html中来做。  8. 另外要注意的是，有些网站跨域提交POST数据被直接被禁止，所以需要使用这些网站提供的API来实现对应的功能，验证方式建议可以的话 尽量使用oauth一劳永逸的方式。 关于localStorage  9. 可以让程序员来编程存储用户浏览器数据，也就是说用户就算关闭浏览器，下次再打开时，localStorage的数据仍然存在。但是如果用户执行了清理所有浏览器数据及cookie时，存在localStorage里的数据将消失。  10. 每个网站都有自己的localStorage存放在Chrome缓存中互不冲突。而插件仍然也保存了一份不冲突的localStorage。也就是说：如果在豆瓣的contentscript.js中执行对localStorage的操作，只能取到豆瓣的localStorage，而无法取到插件的localStorage，如果要执行对插件的localStorage的读写操作，需要使用Chrome的chrome.extensions.sendMessage()来存取。  11. 另外，localStorage只能存二维数据。但是可以通过JSON.parse(normalString)来让它解压更复杂的json数据，相应的可以通过JSON.stringify(jsonString)来序列化一串JSON数据。  关于oauth

协议

离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载

  12. OAuth协议的详细内容可以参考RFC文档或者oauth官方网站的文档，以下我在研究过程中能记得的一些小TIP：  13. 官方OAUTH文档是说所有的OAUTH实现应该可以放在HTTP HEADER或者POST FORM或者URL GET中，但是很多网站提供的AIP都只支持其中一种，比如豆瓣和新浪的api是放在http header中，而腾迅微博的API的OAUTH数据是只能附加上URL上做为GET的请求数据。这个需要仔细查看对应网站的API文档，以免走错路。  14. 计算签名时，有些数据是必须放到basicString中做为签名的一部分来签名的，比如说新浪微博的发表新微博，需要把发表的内容转码后以status作为KEY，内容作为value成为basicString的一部分，然后再计算签名。此外签名时参数的顺序也不能错。否则会出现签名认错失败的情况。  15. 虽然很多网站的API OAUTH认证的文档写得不详细，但是容易出错的地方还是可以到他们的网站上找到的，一旦出错了，先到文档上找找是不是有什么特别的提示，这样可能可以更快的发现错误。  网址： http://code.google.com/chrome/extensions/samples.html Web App Type 2 Overview As the following figure shows, if you already have a web app, you don't need to change it; you can just publish it as a hosted app. If you're willing to modify your app or build one from scratch, you have more options. * 10MB is the current size limit for packaged apps. If your app (with all its essential assets) can't fit into a 10MB ZIP file, then your app is too big to be a packaged app. 3 Details If you're having trouble deciding what type of app to create, read the article Extensions, Packaged Apps, and Hosted Apps in the Chrome Web Store. Here's some additional information to help you choose: · A hosted app can work in all web browsers, as long as it doesn't depend on features that not all browsers support yet, such as background execution orWebGL. On the other hand, because only Chrome supports the Chrome Web Store, you have the option of tailoring your app to Chrome. · A packaged app will work only in Chrome. However, you can reuse the app's code for ordinary web apps. · Only an extension can present an icon in the toolbar, using a page action or browser action. · If you're not sure whether you need a packaged app or an extension, it should probably be an extension. Rule of thumb: A packaged app should feel like a hosted app, not like an extension. · Although an extension has little to no UI of its own, it can sometimes have a big effect on the UI of other pages and web apps. For example, an extension canreplace a standard Chrome page, such as the History page (chrome://history). Or it can change the contents or formatting of some or all websites—to use different fonts, for example. · The Licensing API lets you check programmatically whether the user has paid for your app using Chrome Web Store Payments. The Licensing API is usually used only by hosted apps because packaged apps are stored locally and could be modified to circumvent the API call. · The chrome.* APIs let your packaged app or extension be tightly integrated with Chrome. They take advantage of Chrome support for functionality such asidle state, internationalization, tabs, and windows. Back to top GA Account: Hujiabao007@gmail.com /bjt2k Hujiabao Web Property ID: UA-28023666-1 Default URL: http://yuedu.163.com API reference: chrome.browserAction chrome.contextMenus Desktop Notifications: chrome.extension.getBackgroundPage().doThing(); Omnibox: chrome.omnibox Options_page: Override Pages PageAction: chrome.pageAction.hide Browser Interactions Bookmarks: chrome.bookmarks Chrome.cookies Events: You can invoke the following methods on any Event Object: Chrome.history Chrome.management Chrome.tabs Chrome.windows Background Pages:chrome.extension.getViews() Chrome.extension.getBackgroundPage(); Content Scripts Cross-Origin XHR Internationalization Chrome.permissions NPAPI plugin with your extension,allowing you to call into native binary code from JavaScript https://developer.mozilla.org/en/Plugins Page 9 of 9