Ryan Z 的技术日志

最近在进行chrome浏览器插件的开发，一些小的经验总结随笔。1、首先，推荐360的chrome插件开发文档：http://open.chrome.360.cn/extension_dev/overview.html2、从chrome18开始往后，chrome浏览器插件开发的 manifest.json 文件中的 "manifest_version": 2 属性就必须被显式（固定）

手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单手把手教你开发Chrome扩展二：为html添加行为手把手教你开发Chrome扩展三：关于本地存储数据Chrome的更新速度可以说前无古人，现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界

1、书签使用chrome.bookmarks模块来创建、组织和管理书签。也可参看 Override Pages，来创建一个可定制的书签管理器页面。1.1、manifest.json 中配置{ "name": "My extension", ... "permissions": [ "bookmarks" ], ...}对象和属性

前言：　　最近有个课程项目，由于对插件开发很感兴趣，所以花了较大的功夫去研究chrome extension开发。最近一阵，读文档、别人的总结、示例代码不在少数，怕以后自己忘了，所以还是趁热打铁写下来。由于本人理解能力有限，对于一些现象给出的解释可能不全面或者有偏差，欢迎大家指正！　　写博客的经历不是很丰富，在此请允许一个小有心得的菜鸟谈谈chrome插件开发的一些知识，希望能对和

浏览器对于前端来说，基本就是一个吃喝拉撒等等都能干的地方。其中Chrome又是多数人的最佳选择，除开性能、速度、简洁的界面，它庞大而无所不能的extensions生态圈亦让人觉得很实用很牛x，这几天略看了下Chrome的插件，试了一试，先分享一下入门开发过程。以自己做的一个非常简易的词典来说明吧。先看目录结构： 插件的入口就是manifest.json,这是一个

开始Chrome Store在上传应用时要求提供源码打包的.zip格式，因此Chrome Store会读取你的源码文件，有一些固定的目录格式，和清单列表。支持多语言化就是其中一个。这是一个固定的文件夹，在你的应用中创建_locales文件夹，并在下面创建对应你语言代码的文件夹，常用的几个：中文(简体)：zh_CN中文(繁体)：zh_TW英文：en同样还有一个固定的文件格

刷新当前 tab 页的3中方式// 1.chrome.tabs.getSelected(null, function(tab) { var code = 'window.location.reload();'; chrome.tabs.executeScript(tab.id, {code: code});});// 2.chrome.tabs.update(null,

1、插件文件结构1.1、manifest.json每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，里面存放重要的插件相关信息。一个最基本的配置例子：{ "name": "browser action demo", "version": "1.0", "permissions": [ "tab

开始之前在Web Store上没找到满意的便签插件，就只好自己动手写了Notty Notes，你可以试试看，多多提建议哦~Backbone的流行，与前端复杂度的提高息息相关，尤其越来越多的大型单页应用的上线，代码的组织方面就产生很多新的问题。所以MV*的概念又一次在前端应用开来，不管最后那个*被定义成为什么，M(odel)和V(iew)这两层的分离，对于代码的组织大有好处。Ba

Chrome插件（Extensions）开发攻略本文将从个人经验出发，讲述为什么需要Chrome插件，如何开发，如何调试，到哪里找资料，会遇到怎样的问题以及如何解决等，同时给出一个个人认为的比较典型的例子——获取网页内容，和服务器交互，再把信息反馈给用户。OK，准备开始吧，我尽量把文章写得好看点，以免读者打瞌睡。目录为什么需要为什么是Chrome需要准备什么如何

由于插件的js运行环境有区别，所以消息传递机制是一个重要内容。阅读了很多博文，大家已经说得很清楚了，直接转一篇@姬小光 的博文，总结的挺好。后面附一个自己写过的demo，基本就对消息传递能够熟悉了。在开发 Chrome 扩展时经常需要在页面之间进行通讯，比如 background 与 content script 之间，background 与 popup 之间等等，本文结合官方文档中的例

这里通过一个网页开关灯的例子来演示browser action，除了browser action之外，还会涉及到其他很多的chrome api或者manifest.json配置项。这个文件包含的文件如下：background.html背景页，一个单独的长时间运行的脚本，是一个运行在扩展程序中的html页面。在应用的整个生命周期都存在，在同一个时间只有一个实例处于活动

1、创建notification的两种方法：// 注意：没有必要调用 webkitNotifications.checkPermission()。// 声明了 notifications 权限的扩展程序总是允许创建通知。// 创建一个简单的文本通知：var notification = webkitNotifications.createNotification( '48.pn

之前一直在考虑一个在浏览器上实现截屏的问题，搜索了一下了解了些情况。在初期想到的是如何通过JS把网页变为图片，网上有相应的开源项目，例如https://github.com/niklasvh/html2canvas. 这个组件试了一下在本机上还是有些问题。除了这个以外，还有一个东西是PhantomJSPhantomJS is a headless WebKit with JavaS

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');引自:http://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css

最近我在研究开发一个火狐插件，具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现，大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果。之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法，这些都是在为这个插件做技术准备。技术路线很清晰，将网页的某个区域的内容生成图像，保持到canvas里，然后将canvas内容转换成图片，保存到本地，最后

我觉得不错的学习路径：【基础部分】JS/CSS，JQUERY，这三个先学，JS则是那本【JAVASCRIPT高级编程第三版】比较不错，然后可以学COFFESCRIPT，来写面向对象的程序。不过我一直不太会写OO的东西，所以，总是用组件化的方式绕过去的。然后可以试试用所谓的测试驱动来进行迭代开发吧，我因为开发的都是小插件，所以，就懒得写测试了。然后就是HTML5的所有AP

bcoe/DoloresLabsTechTalkhttps://github.com/bcoe/DoloresLabsTechTalkmageMaily lets you right-click on an image on a webpage and send it to an email address.attachmentsme/Queueberthttps://gi

参考原文：A Simple Chrome Extension to Save Web Page Screenshots to Local DiskChrome Extension开发指南Chrome Extension OverviewChrome Extension DebuggingChrome Extension Sam