起步

起步例子可参考

git clone https://github.com/zzc5464/chrome-tool.git

官网入门-需翻墙描述文件 manifest

{
  "manifest_version": 2, // manifest的版本，1已经弃用，写死

  "name": "One-click Kittens", // 项目名称
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
  // 该插件会生效于哪个网址
  "permissions": ["http://*.google.com/", "https://*.google.com/"],
  "browser_action": { // 插件在浏览器上行为的描述
    "default_icon": "icon.png", // 右上角图标配置
    "default_popup": "popup.html" // 点击图标后显示的页面
  }
}

现在一个简单的插件就写好了，尝试把它放到浏览器去。

如果没问题会直接加载好了。

点击图标可以看到demo插件的popup.html 已展示出来

可以发现拓展插件页面有三个按钮: 加载、打包、更新。

一般可以认为: 加载已解压的拓展程序为开发时测试代码用，使用方式同上。

打包拓展程序为开发完成要发布时使用

选择要打包文件的路径，私钥文件为打包完文件后一起生成的 .pem 文件

一开始没有就不选

基础

这部分主要是过一下浏览器插件都可以做哪些事情

官网概要

概要

拓展程序是由:

html
css
js 可用API参考
谷歌提供的浏览器API(书签、标签页) 组合而成

交互界面

插件的用户界面,除了在起步中描述之外(浏览器按钮,这也是最常见的)。还可以是页面按钮，如图:

还有一些其他的交互方式: 右键菜单等具体可参考开发者指南

项目文件

编写完一个插件的代码,通过打包拓展程序压缩成以.crx结尾的zip 也可以通过谷歌的托管平台发布代码,会自动压缩成.crx (不过要付钱~) 一个插件所需文件要求如下

一个清单文件
一个或多个 HTML 文件（除非扩展程序是一个主题背景）
可选：一个或多个 JavaScript 文件
可选：您的扩展程序需要的任何其他文件，例如图片除了要求的文件外，你可以在任意目录放置任意文件。

关于清单文件,了解更多内容

插件项目的构成

在插件中根据几个关键文件进行定义

background.html 插件的后台。在插件生效后，会根据你使用的方式事件页面 or 后台网页运行后台脚本
popup.html 点击图片弹出的用户交互页面
contentscript.js 页面脚本

chrome.* API

除了能使用web中的api之外，还可以用谷歌专门提供的api 大部分方法都是异步的，在异步函数的最后一个参数中写一个回调即可获取执行结果。文档

页面通信

能让同一个插件生效的页面之间，都可以相互通信,直接调用chrome.extension。比如在插件调试工具中 chrome-extension://插件ID/页面

location.href
// "chrome-extension://pcbcpgmalddcijhdchfojedmhghopjhm/popup.html"

数据存储和隐身模式

直接使用使用 storage API、HTML5 网页存储 API（例如 localStorage）值得注意的是隐身模式下默认是不会运行插件的，但是也可以

要确定窗口是否处于隐身模式，检查相关的 tabs.Tab 或 windows.Window 对象的 icognito 属性。

function saveTabData(tab, data) {
  if (tab.incognito) {
    chrome.runtime.getBackgroundPage(function(bgPage) {
      bgPage[tab.url] = data;      // 仅在内存中保留数据
    });
  } else {
    localStorage[tab.url] = data;  // 可以保存数据
  }
}

调试

谷歌的插件开发调试工具,用来调试弹出窗口的工具，已经在浏览器中内置。

打开chrome://extensions
确保处于开发者模式
右键点击右上角想要调试的开发者工具
选择审查弹出的内容剩下的跟调试web一致

开发指南

剩下的就是去调用API了指南