google-chrome-extensiongoogle-chrome-extension入门


备注

TODO:Chrome扩展程序的简短说明

官方文件

进一步阅读

TODO:填充重要概述主题的链接

绝对最小的例子

任何Chrome扩展程序都以解压扩展名开头:包含扩展程序文件的文件夹。

它必须包含的一个文件是manifest.json ,它描述了扩展的基本属性。该文件中的许多属性都是可选的,但这里是一个绝对最小的manifest.json 文件:

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

在某处创建一个文件夹(例如, myExtension ),将上面列出的manifest.json 添加到其中。

然后,您需要在Chrome中加载扩展程序。

  1. 打开chrome://extensions/ page,可通过菜单>更多工具>扩展程序访问
  2. 启用开发者模式 ,右上角有一个复选框,如果它尚未启用。
  3. 单击Load unpacked extension ...按钮,然后选择创建的myExtension 文件夹。 在此处输入图像描述

而已!您的第一个扩展程序由Chrome加载:

在此处输入图像描述

当然,它还没有做任何事情,所以现在是阅读扩展架构概述以开始添加所需部件的好时机。

重要提示:当您对扩展程序进行任何更改时,请不要忘记返回chrome://extensions/ 并在进行更改后按下chrome://extensions/ 的“ 重新加载”链接。如果是内容脚本,也要重新加载目标页面。

背景页面

后台页面是包含后台脚本的隐式页面。后台脚本是用于管理某个任务或状态的单个长时间运行脚本。它存在于您的扩展的生命周期中,并且一次只有一个实例处于活动状态。

您可以在manifest.json 声明它:

"background": {
    "scripts": ["background.js"]
}
 

扩展系统将生成一个后台页面,其中包含scripts属性中列出的每个文件。

您可以访问所有允许的chrome.* API。

背景页有两种类型:始终打开的持久性后台页面 ,以及根据需要打开和关闭的事件页面

如果您希望您的后台页面是非持久性的,则只需将persistent -flag设置为false:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}
 

此后台脚本仅在触发了已注册侦听器的事件时才处于活动状态。通常,您使用addListener 进行注册。

示例:首次安装应用或扩展程序。

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});
 

内容脚本

内容脚本是与普通页面一起运行的扩展代码。

他们可以完全访问网页的DOM(实际上, 它是扩展中唯一可以访问页面DOM的部分 ),但JavaScript代码是孤立的,这个概念称为孤立世界 。每个扩展都有自己的内容脚本JavaScript上下文,其他人和页面都不可见,从而防止代码冲突。

manifest.json 示例定义:

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]
 

属性具有以下含义:

属性描述
火柴指定将此内容脚本注入的页面。遵循匹配模式格式。
CSS 要注入匹配页面的CSS文件列表。
JS 要注入匹配页面的JS文件列表。 按列出的顺序执行。

也可以使用chrome.tabs.executeScript 按需注入内容脚本,该脚本称为Programmatic Injection

也可以看看

创建一个新选项卡

在扩展代码中,如果您声明了所需的权限,则可以使用任何chrome.* API。此外,某些API仅适用于后台页面,而某些API仅适用于内容脚本。

您可以使用大多数chrome.tabs 方法来声明任何权限。现在我们专注于chrome.tabs.create

注意:将打开新选项卡,不会显示任何popup 警告。

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})
 

您可以在官方chrome开发人员中了解有关tab对象的更多信息

选项页面

选项页面用于为用户提供维护扩展程序设置的可能性。

版本2

从Chrome 40开始,可以将选项页面作为chrome:// extensions的预定义对话框。

manifest.json 定义选项页面的方法如下:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}
 

此选项页面将作为对话框运行,它将作为弹出窗口打开,其中将显示options.htmlchrome_style 会将样式一致性原因的Chrome样式表应用于您的选项页面。

选项将通过扩展按钮的上下文菜单或chrome:// extensions页面自动显示。

扩展按钮

铬://扩展

您还可以以编程方式打开选项页面 ,例如从弹出窗口UI:

chrome.runtime.openOptionsPage();
 

版本1( 已弃用

manifest.json 示例定义:

"options_page": "options.html"
 

建议使用版本2,因为options_ui 行为很快将应用于版本1选项页面。

存储

通常,设置需要保留,因此建议使用chrome.storage API。权限可以在manifest.json 声明如下:

"permissions": [
   "storage"
]
 

官方文件