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 开发入门

发表回复

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