• 认真地记录技术中遇到的坑!

Chrome扩展开发

其他 悠悠 12个月前 (11-02) 412次浏览 0个评论

Chrome浏览器使用非常方便,因为它有大量非常好用的扩展可以用,让你浏览网页的时候得心应手。

比如:屏蔽广告的扩展:adBblock,鼠标手势扩展:crxMouse,首页扩展:Infinity新标签页,开发者使用的模拟请求扩展:Postman。超级好用。

F12 调出调试窗口,写几句JS代码辅助操作,就能代替人工批量点击,自动筛选,批量点击下载等大量重复性操作。

这种方式直接,快速,简单,但是刷新页面之后,我们在控制台的JS代码丢失,需要重新编写一遍。不过只需要简单的几部,添加一个扩展,我们就能在每次页面刷新后自动执行事先写好的代码。

开始

你只需要一个Chrome浏览器,加上一个代码编辑器就可以了。

关于Chrome扩展开发更加详细的信息参考官方文档:https://developer.chrome.com/extensions/getstarted.html

如果你被墙了或者不太懂英文,可以去看360翻译的,只不过版本有点旧:http://open.chrome.360.cn/extension_dev/overview.html

一个扩展插件一般包含以下文件:

  1. 一个manifest文件,manifest.json:指定插件的相关信息,告诉浏览器你的插件要做什么
  2. 一个或多个html文件(除非这个应用是一个皮肤)
  3. 可选的一个或多个javascript文件
  4. 可选的任何需要的其他文件,例如图片,图标等

如果你只是开发一个简单的自己使用的扩展,用来协助处理页面中的一些内容,那么你只需要一个 manifest 文件和你需要执行的 JS 文件即可,当然一个好看的图标也是推荐的。

创建一个简单的应用

新建一个文件夹,新建 manifest.json 文件和 common.js 文件,放在同一个目录下。

manifest.json 文件内容如下:

{
	"author": "youyou",
	"name": "Chrome Tools Extension",
	"version": "1.0",
	"manifest_version": 2,
	"description": "Some tools for chrome when I am using.",
	"content_scripts": [
		{
			"matches": ["http://*/*", "https://*/*"],
			"run_at": "document_idle",
			"all_frames": true,
			"match_about_blank": true,
			"js": ["common.js"]
		}
	],
	"permissions": ["http://*/*"]
}

common.js 文件中就在控制台打印一句话:

console.log('hello world!');

打开浏览器的扩展页面,浏览器右上角单击,选择菜单 -> 扩展工具,或者直接在浏览器的地址输入 : chrome://extensions/

在扩展列表页面,勾选开发者模式,选择 “加载已经解压的扩展程序”,选择刚才的文件夹,如果没有问题,那么插件列表会增加一个插件,图标是一个拼图。

加载成功以后,默认是启用的,随便打开一个页面,比如百度.

F12 打开控制台,会发现控制台输出了 hello world,说明页面执行了我们写的 JS 文件,于是艺术性的开发开始了。

manifest.json

一般 manifest 包含以下字段:

  1. author:指定作者名称
  2. name:扩展的名称
  3. version:扩展的版本号
  4. manifest_version:manifest文件的版本,现在是 2
  5. description:扩展相关的描述
  6. icons:扩展的图标,可以是一个对象,指定多个尺寸的图标
  7. offline_enabled:指定本扩展或app是否支持脱机运行
  8. browser_action:用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标
  9. page_action:使用page actions把图标放置到地址栏里。page actions定义需要处理的页面的事件
  10. background:背景页面
  11. content_scripts:需要在页面执行的 JS 文件
  12. permissions:扩展或app将使用的一组权限

content_scripts

Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。

  • 不能使用除了chrome.extension之外的chrome.* 的接口
  • 不能访问它所在扩展中定义的函数和变量
  • 不能访问web页面或其它content script中定义的函数和变量
  • 不能做cross-site XMLHttpRequests
Name Type Description
matches array of strings 必须。 定义哪些页面需要注入content script。查看Match Patterns以了解详细语法。
css array of strings 可选。需要向匹配页面中注入的CSS文件。这些文件将在页面的DOM树创建和显示之前,按照定义的顺序依次注入。
js array of strings 可选。 需要向页面中注入的javascript文件,按定义顺序注入。
run_at string 可选。 控制content script注入的时机。可以是document_start, document_end或者document_idle。缺省时是document_idle。

如果是document_start, 文件将在所有CSS加载完毕,但是没有创建DOM并且没有运行任何脚本的时候注入。

如果是document_end,则文件将在创建完DOM之后,但还没有加载类似于图片或frame等的子资源前立刻注入。

如果是document_idle,浏览器会在document_end和发出window.onload事件之间的某个时机注入。具体的时机取决与文档加载的复杂度,为加快页面加载而优化。

注意:在document_idle的情况下,content script不一定会接收到window.onload事件,因为它有可能在事件发出之后才加载。在大多数情况下, 在content script中监听onload事件是不必要的,因为浏览器会确保在DOM创建完成后才执行它。 如果一定要在window.onload的时候运行,可以通过document.readyState属性来检查onload事件是否已经发出。

all_frames boolean 可选。控制是在匹配页面的所有frame中运行还是只在最上层的frame中运行。

缺省是false,也就是只在最上层frame中运行。

include_globs array of string 可选。控制将content_script注入到哪些匹配的页面中。模拟Greasemonkey中的@include关键字。 详细信息可以查看下面的Include and exclude globs。
exclude_globs array of string 可选。控制将content_script注入到哪些匹配的页面中。模拟Greasemonkey中的@exclude关键字。 详细信息可以查看下面的Include and exclude globs。

下载的扩展位置

需要一个参考怎么办呢,可以查看本地Chrome安卓的扩展的源代码。

windows xp中chrome插件默认安装目录位置:  C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions

windows7中chrome插件默认安装目录位置:  C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions

MAC中chrome插件默认安装目录位置:~/Library/Application Support/Google/Chrome/Default/Extensions

Ubuntu中chrome插件默认安装目录位置:      ~/.config/google-chrome/Default/Extensions

如果Chrome登陆的话,一般在:Google\Chrome\User Data\Profile 3,Profile目录下面,注意看是Profile X。

如果没有在以上位置找到的话,在浏览器地址输入:chrome:version

安装的插件位置在 个人资料路径下面。


转载请注明出处 Chrome扩展开发
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址