一起来做chrome扩展《基础介绍》

首先说明,chrome的扩展并不它的插件,网上很多说写插件,其实都是说的扩展。写扩展并不复杂,只要根据chrome提供的一系列的API进行就可以实现很多的功能。只是对API的学习是有代价的,加上国内访问chrome官网文档并不顺利。虽然360提供了一个翻译文档,而且有不少例子,但它的内容还是太少,有些问题它仍然没有涉及。所以,如果是做一个简单的应用没有什么问题,但实际的项目开发往往得不到有用的介绍和解释。

这个系列的文章将从解决一些实际的问题入手,涉及的内容大致有以下几个:

  • 基础配置
  • content_script和background_script
  • cookie的使用
  • 本地存储
  • ajax请求远程数据

博主也是在学习中,所说的也是开发过程中的一些总结,并不一定正确,如果有错,还请包涵。

写扩展只有一个文件是固定的,其它的并没有什么固定的要求,如固定的格式,固定的文件夹等。这个固定的文件就是它的配置文件,一个JSON格式的文件:manifest.json,基本内容如下:

manifest.json

{
    "manifest_version": 2,
    "name": "My Extension",
    "description": "Extension description",
    "version": "1.0"
}

这是一个最简单的文件,有2个需要注意的问题:

  • 目前的规定,manifest_version必须写为2,所以其它的数字就不要写了,特别是1
  • JSON中,最后一项,是不能有,号的,不然它会启用失败的。

这几项不用介绍,应该都知道它们是干嘛的,它们会出现在扩展界面里,别的就没什么用了。一个真正的扩展当然不可能只有这些。它能涉及到的,博主简单归纳为两类:

  • chrome浏览器的元素,如Tab,书签,历史记录等。
  • 页面内容

那么,如果你的扩展需要涉及什么,就得把它添加到配置JSON里,也就是manifest.json文件中,如需要用到Tab:

{
    "manifest_version": 2,
    "name": "My Extension",
    "description": "Extension description",
    "version": "1.0",
    "permissions": [
        "tabs"
    ]
}

permissions即为允许的,它会告诉chrome,这个插件是允许操作Tab的,不然chrome就允许让你使用它Tab相关的API。所以,如果还有使用书签,或是别的什么东西时,都可以写在这里面。如,我们要使用代理相关的API:

{
    "manifest_version": 2,
    "name": "My Extension",
    "description": "Extension description",
    "version": "1.0",
    "permissions": [
        "tabs",
        "proxy"
    ]
}

proxy即代表可以使用代理相关的API,诸如比类还有cookie,history等,具体相关可以查阅官方文档

chrome扩展对目录并没有严格的要求,所以,除了manifest.json这个文件必须,其它的都是按需增加。目录结构可以按你的习惯建立的命名,都没有问题。

时间: 2024-08-07 04:33:21

一起来做chrome扩展《基础介绍》的相关文章

一起来做chrome扩展《本地存储localStorage》

chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己的一些数据,而不受访问网站和域名的影响. localStorage基础 localStorage是HTML5特性,所以有些浏览器不一定支持,不过我们这里讲的是chrome扩展,所以完全不用担心这个问题.如果想在WEB页面上使用,那就要检查一下是不是支持它 可以这样的检测: if(window.loc

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

本地存储localStorage以及它的封装接口store.js的使用

本地存储localstorage localstorage 是 HTML5 提供的在客户端存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存的,除非人为干预删除. localstorage作为本地存储来使用,解决了cookie存储空间不足的问题:cookie中每条cookie的存储空间为4k,但localStorage的存储空间有5M大小.另外,相比于cookie,localStorage可以节约带宽,在同一个域内,浏览器每次向服务器发送请求,http都会带着cookie,使c

本地存储(localStorage、sessionStorage、web Database)

一.sessionStorage和localStorage sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据.不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据.如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据.但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别

HTML5本地存储 localStorage

HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: localStorage.setItem('a', 'xxxxxx'); // 设置 localStorage.getItem('a'); // 获取 localStorage.removeItem('a'); // 删除 下面说说有关localStorage和sessionStorage的特性. 1

objective-c ios webkit 本地存储local-storage

我有一个Cocoa / Objective-C的应用程序,它嵌入了一个WebKit的web视图.我需要打开的数据库支持和本地存储.我知道这是可以做到-我有它在Safari中工作-但我无法找到如何设置这在我自己的应用程序的示例. 我发现这个(未回答)问题的SO它提供了一个例子,但正如原来不起作用.而事实上,(setDatabasesEnabled,setLocalStorageEnabled)没有在我的WebKit的定义. (Xcode的3.2.5),尽管它们似乎存在,如果我定义他们自己. 任何人

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5 本地存储 LocalStorage

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家 都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样. userData是IE的东西,垃圾.现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用.再之后Google推出了

HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差