Chrome Extension 开发入门

Chrome Extension 是什么

Chrome Extension 为浏览器的功能扩展,由 html、 css、 js及 manifest. json 组成,在浏览器的地址栏右侧,其实质为crx后缀的压缩包。

基本结构

包含如下5个组件:

  • Manifest
  • Background Script
  • UI Elements
  • Content Script
  • Options Page

manifest为必须描述文件。

Manifest

信息配置信息,使 json

  1. {
  2.     //(必须)manifest版本,而且必须是2
  3.     “manifest_version”: 2,
  4.     // (必须)名称
  5.     “name”“入门示例”,
  6.     // (必须)版本
  7.     “version”“1.0.0”,
  8.     // (推荐)描述
  9.     “description”“入门示例”,
  10.     // (推荐)图标,懒加载可用一个尺寸
  11.     “icons”:
  12.     {
  13.         “16”“images/icon-16.png”,
  14.         “32”“images/icon-32.png”,
  15.         “48”“images/icon-48.png”,
  16.         “64”“images/icon-64.png”,
  17.         “128”“images/icon-128.png”
  18.     },
  19.     // background script即插件运行的环境,会一直常驻的后台JS或后台页面
  20.     “background”:
  21.     {
  22.         // 2种指定方式,如果指定JS,那么会自动生成一个背景页
  23.         “page”“background.html”
  24.         //”scripts”: [“js/background.js”]
  25.     },
  26.     // 浏览器右上角图标设置,browser_action、page_action、app必须三选一
  27.     //  注意: Packaged apps 不能使用browser actions.
  28.     “browser_action”:
  29.     {
  30.         “default_icon”“images/icon.png”,
  31.         “default_title”“hello”// 图标悬停时的标题,可选
  32.         “default_popup”“popup.html”
  33.     },
  34.     // 当某些特定页面打开才显示的图标
  35.     /*”page_action”:
  36.     {
  37.         “default_icon”: “images/icon.png”,
  38.         “default_title”: “hello”,
  39.         “default_popup”: “popup.html”
  40.     },*/
  41.     // 需要直接注入页面的JS
  42.     “content_scripts”:
  43.     [
  44.         {
  45.             //”matches”: [“http://*/*”, “https://*/*”],
  46.             // “<all_urls>” 表示匹配所有地址
  47.             “matches”: [“<all_urls>”],
  48.             // 多个JS按顺序注入
  49.             “js”: [“js/jquery-1.8.3.js”“js/content-script.js”],
  50.             // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
  51.             “css”: [“css/custom.css”],
  52.             // 代码注入的时间,可选值: “document_start”, “document_end”, or “document_idle”,最后一个表示页面空闲时,默认document_idle
  53.             “run_at”“document_start”
  54.         },
  55.         // 这里仅仅是为了演示content-script可以配置多个规则
  56.         {
  57.             “matches”: [“*://*/*.png”“*://*/*.jpg”“*://*/*.gif”“*://*/*.bmp”],
  58.             “js”: [“js/show-image-content-size.js”]
  59.         }
  60.     ],
  61.     // 权限申请
  62.     “permissions”:
  63.     [
  64.         “contextMenus”// 右键菜单
  65.         “tabs”// 标签
  66.         “notifications”// 通知
  67.         “webRequest”// web请求
  68.         “webRequestBlocking”,
  69.         “storage”// 插件本地存储
  70.         “http://*/*”, // 可以通过executeScript或者insertCSS访问的网站
  71.         “https://*/*” // 可以通过executeScript或者insertCSS访问的网站
  72.     ],
  73.     // 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
  74.     “web_accessible_resources”: [“js/inject.js”],
  75.     // 扩展的主页 url。扩展的管理界面里面将有一个链接指向这个url。如果你将扩展放在自己的网站上,这个url就很有用了。如果你通过了Extensions Gallery和Chrome Web Store来分发扩展,主页 缺省就是扩展的页面。
  76.     “homepage_url”“https://www.baidu.com”,
  77.     // 覆盖浏览器默认页面
  78.     “chrome_url_overrides”:
  79.     {
  80.         // 覆盖浏览器默认的新标签页
  81.         “newtab”“newtab.html”
  82.     },
  83.     // Chrome40以后的插件选项页写法,如果2个都写,新版Chrome只认后面这一个
  84.     “options_ui”:
  85.     {
  86.         “page”“options.html”,
  87.         // 添加一些默认的样式,推荐使用
  88.         “chrome_style”true
  89.     },
  90.     // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
  91.     “omnibox”: { “keyword” : “go” },
  92.     // 默认语言
  93.     “default_locale”“zh_CN”,
  94.     // devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
  95.     “devtools_page”“devtools.html”
  96. }

 

Background Script

background 可以使扩展常驻后台,比较常用的是指定子属性scripts,表示在扩展启动时自动创建一个包含所有指定脚本的页面。它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。

UI Elements

用来定义了用户界面。例如定义弹出窗口,快捷键等。UI元素可以提升浏览体验。一般都有 browser action 或 page action。但也可以包含其它UI元素。如context menus,omnibox或快捷键。

browser action:可以将图标放置浏览器工具条上。此外还可以设计提示,图标和弹出框。对浏览器所有内所有标签页生效。

page action:可以将图标放置浏览器工具条上。此外还可以增加提示,图标和弹出框。但不是对所有标签页生效。并不对所有标签页可用,仅对满足条件的标签页处于激活状态可用。当处于非激活状态,图标为灰色。

UI界面,例如弹出框,可以包含带有Js脚本的html页面。此外也可以调用tabs.create或window.open来显示html文件。使用了page action和popup弹出框的插件可以使用 declarative content api在background script中来设置规则,确定什么时候弹出框可用。当条件满足的时候,弹出框对用户可用。

Content script

插件通过Content script来对页面操作,可以修改所访问的页面dom对象,样式等。比如用来修改页面的背景色。

除了可以在manifest中配置需要注入的页面以外,还可以动态的注入到页面中

  1. //直接注入代码
  2. chrome.browserAction.onClicked.addListener(function(tab) {
  3.   chrome.tabs.executeScript({
  4.     code: ‘document.body.style.backgroundColor=“red”
  5.   });
  6. });
  7. //注入脚本文件
  8. chrome.tabs.executeScript(null, {file: “content_script.js”});

注:需在描述文件中设置权限。

Options Page

插件的配置选项页面。通过该页面可以对插件功能进行配置。

消息通信机制

小例子

下载

本文链接地址: Chrome Extension 开发入门

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注